From dce2ec71aaa6998d6a7795096b7f033fc4c9eea1 Mon Sep 17 00:00:00 2001 From: David Huynh Date: Fri, 29 Jan 2010 00:46:15 +0000 Subject: [PATCH] Started client-side scaffolding for faceted browsing. git-svn-id: http://google-refine.googlecode.com/svn/trunk@12 7d457c2a-affb-35e4-300a-418c747d4874 --- .../gridlock/commands/GetRowsCommand.java | 12 ++++---- src/main/webapp/project.html | 2 +- src/main/webapp/scripts/project.js | 12 ++------ .../webapp/scripts/project/browsing-engine.js | 19 ++++++++++++ .../webapp/scripts/project/data-table-view.js | 30 ++++++++++++------- 5 files changed, 49 insertions(+), 26 deletions(-) create mode 100644 src/main/webapp/scripts/project/browsing-engine.js diff --git a/src/main/java/com/metaweb/gridlock/commands/GetRowsCommand.java b/src/main/java/com/metaweb/gridlock/commands/GetRowsCommand.java index de0df5345..32d13a587 100644 --- a/src/main/java/com/metaweb/gridlock/commands/GetRowsCommand.java +++ b/src/main/java/com/metaweb/gridlock/commands/GetRowsCommand.java @@ -20,7 +20,7 @@ import com.metaweb.gridlock.model.Row; public class GetRowsCommand extends Command { @Override - public void doGet(HttpServletRequest request, HttpServletResponse response) + public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { try { @@ -47,9 +47,11 @@ public class GetRowsCommand extends Command { } @Override - public void internalVisit(Row row) { + public void internalVisit(int rowIndex, Row row) { try { - list.add(row.getJSON(options)); + JSONObject ro = row.getJSON(options); + ro.put("i", rowIndex); + list.add(ro); } catch (JSONException e) { } } @@ -86,12 +88,12 @@ public class GetRowsCommand extends Command { @Override public void visit(int rowIndex, Row row) { if (total >= start && total < start + limit) { - internalVisit(row); + internalVisit(rowIndex, row); } total++; } - protected void internalVisit(Row row) { + protected void internalVisit(int rowIndex, Row row) { } } } diff --git a/src/main/webapp/project.html b/src/main/webapp/project.html index 1bfd690f0..2bfb12442 100644 --- a/src/main/webapp/project.html +++ b/src/main/webapp/project.html @@ -1 +1 @@ - Gridlock
Loading ...
\ No newline at end of file + Gridlock
Loading ...
\ No newline at end of file diff --git a/src/main/webapp/scripts/project.js b/src/main/webapp/scripts/project.js index 7ba955ddb..02259bfa2 100644 --- a/src/main/webapp/scripts/project.js +++ b/src/main/webapp/scripts/project.js @@ -5,10 +5,7 @@ function onLoad() { var params = URL.getParameters(); if ("project" in params) { theProject = { - id: parseInt(params.project), - view: { - pageSize: 25 - } + id: parseInt(params.project) }; Ajax.chainGetJSON( @@ -23,10 +20,6 @@ function onLoad() { theProject.columnModel.columns[i].collapsed = false; } }, - "/command/get-rows?" + $.param({ project: theProject.id, start: 0, limit: 25 }), null, - function(data) { - theProject.rowModel = data; - }, function() { initializeUI(); } @@ -56,6 +49,7 @@ function initializeUI() { ui.facetPanel = $('
').appendTo(tdRight); ui.historyPanel = $('
').addClass("history-panel").appendTo(document.body); - ui.dataTableView = new DataTableView(ui.viewPanel); + ui.browsingEngine = new BrowsingEngine(ui.facetPanel); ui.historyWidget = new HistoryWidget(ui.historyPanel); + ui.dataTableView = new DataTableView(ui.viewPanel); } diff --git a/src/main/webapp/scripts/project/browsing-engine.js b/src/main/webapp/scripts/project/browsing-engine.js new file mode 100644 index 000000000..d771e9a82 --- /dev/null +++ b/src/main/webapp/scripts/project/browsing-engine.js @@ -0,0 +1,19 @@ +function BrowsingEngine(div) { + this._div = div; + this.render(); + + this._facets = []; +} + +BrowsingEngine.prototype.render = function() { + var self = this; + var container = this._div.empty(); +}; + +BrowsingEngine.prototype.getJSON = function() { + var a = { facets: [] }; + for (var i = 0; i < this._facets.length; i++) { + a.facets.push(this._facets[i].getJSON()); + } + return a; +}; diff --git a/src/main/webapp/scripts/project/data-table-view.js b/src/main/webapp/scripts/project/data-table-view.js index d98a5921e..c3688cfec 100644 --- a/src/main/webapp/scripts/project/data-table-view.js +++ b/src/main/webapp/scripts/project/data-table-view.js @@ -1,6 +1,7 @@ function DataTableView(div) { this._div = div; - this.render(); + this._pageSize = 20; + this._showRows(0); } DataTableView.prototype.render = function() { @@ -11,8 +12,8 @@ DataTableView.prototype.render = function() { $('' + (theProject.rowModel.start + 1) + " to " + (theProject.rowModel.start + theProject.rowModel.limit) + " of " + - (theProject.rowModel.total) + - " rows total" + + (theProject.rowModel.filtered) + " filtered rows, " + + (theProject.rowModel.total) + " total rows" + '' ).appendTo(divSummary); @@ -88,7 +89,7 @@ DataTableView.prototype.render = function() { tr.className = (r % 2) == 1 ? "odd" : "even"; var td = tr.insertCell(tr.cells.length); - $(td).html((theProject.rowModel.start + r + 1) + "."); + $(td).html((row.i + 1) + "."); for (var i = 0; i < columns.length; i++) { var column = columns[i]; @@ -107,29 +108,36 @@ DataTableView.prototype.render = function() { DataTableView.prototype._showRows = function(start, onDone) { var self = this; - Ajax.chainGetJSON( - "/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: theProject.view.pageSize }), null, + + $.post( + "/command/get-rows?" + $.param({ project: theProject.id, start: start, limit: this._pageSize }), + { engine: JSON.stringify(ui.browsingEngine.getJSON()) }, function(data) { theProject.rowModel = data; self.render(); - } + + if (onDone) { + onDone(); + } + }, + "json" ); }; DataTableView.prototype._onClickPreviousPage = function(elmt, evt) { - this._showRows(theProject.rowModel.start - theProject.view.pageSize); + this._showRows(theProject.rowModel.start - this._pageSize); }; DataTableView.prototype._onClickNextPage = function(elmt, evt) { - this._showRows(theProject.rowModel.start + theProject.view.pageSize); + this._showRows(theProject.rowModel.start + this._pageSize); }; DataTableView.prototype._onClickFirstPage = function(elmt, evt) { - this._showRows(0, theProject.view.pageSize); + this._showRows(0); }; DataTableView.prototype._onClickLastPage = function(elmt, evt) { - this._showRows(Math.floor(theProject.rowModel.total / theProject.view.pageSize) * theProject.view.pageSize); + this._showRows(Math.floor(theProject.rowModel.total / this._pageSize) * this._pageSize); }; DataTableView.prototype._createMenuForAllColumns = function(elmt) {