Started client-side scaffolding for faceted browsing.

git-svn-id: http://google-refine.googlecode.com/svn/trunk@12 7d457c2a-affb-35e4-300a-418c747d4874
This commit is contained in:
David Huynh 2010-01-29 00:46:15 +00:00
parent e0365f45c8
commit dce2ec71aa
5 changed files with 49 additions and 26 deletions

View File

@ -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) {
}
}
}

View File

@ -1 +1 @@
<html> <head> <title>Gridlock</title> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/project.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/data-table-view.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> </head> <body> <div id="header"> <h1 id="title">Gridlock</h1> </div> <div id="body"> Loading ... </div> </body> </html>
<html> <head> <title>Gridlock</title> <link rel="stylesheet" href="/styles/common.css" /> <link rel="stylesheet" href="/styles/project.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript" src="scripts/util/url.js"></script> <script type="text/javascript" src="scripts/util/string.js"></script> <script type="text/javascript" src="scripts/util/ajax.js"></script> <script type="text/javascript" src="scripts/util/menu.js"></script> <script type="text/javascript" src="scripts/project.js"></script> <script type="text/javascript" src="scripts/project/browsing-engine.js"></script> <script type="text/javascript" src="scripts/project/data-table-view.js"></script> <script type="text/javascript" src="scripts/project/history-widget.js"></script> </head> <body> <div id="header"> <h1 id="title">Gridlock</h1> </div> <div id="body"> Loading ... </div> </body> </html>

View File

@ -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 = $('<div></div>').appendTo(tdRight);
ui.historyPanel = $('<div></div>').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);
}

View File

@ -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;
};

View File

@ -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() {
$('<span>' +
(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" +
'</span>'
).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) {