Handling a Trillion Data Using ZK"
Jumperchen (talk | contribs) m |
Jumperchen (talk | contribs) |
||
| Line 15: | Line 15: | ||
=Demo Code Details= | =Demo Code Details= | ||
| + | In the following subsections, we will guide you how to implement those stuffs for the Biglistbox. | ||
== ZUL File== | == ZUL File== | ||
| + | <source lang="xml" high="1,5,10"> | ||
| + | <biglistbox id="myComp" hflex="1" vflex="1" xmlns:w="client" w:onScroll="jq('$tip').fadeOut();"> | ||
| + | <!-- Template example | ||
| + | <template name="heads"> | ||
| + | <html><![CDATA[ | ||
| + | <div class="images_${matrixInfo[0]%28}" title="x=${matrixInfo[0]},y=${matrixInfo[1]}">${each[matrixInfo[0]]}</div> | ||
| + | ]]></html> | ||
| + | </template> | ||
| + | <template name="rows"> | ||
| + | <html><![CDATA[ | ||
| + | <div class="images_${matrixInfo[0]%28}" title="x=${matrixInfo[0]},y=${matrixInfo[1]}">${each[matrixInfo[0]]}</div> | ||
| + | ]]></html> | ||
| + | </template> --> | ||
| + | </biglistbox> | ||
| + | </source> | ||
| + | As you can see, the Biglistbox can support ''V/Hflex'' function to adjust its size automatically and ZK'6 template function to render the HTML output, and you can retrieve the ''rowIndex'' and ''colIndex'' from the ''matrixInfo'' object that template rendering provided. In our demo, we use [[#MatrixRenderer | MatrixRenderer]] to handle a complex HTML output. | ||
| + | |||
== Composer == | == Composer == | ||
| + | <source lang="java" high="8,9,10,13,23,30,31"> | ||
| + | public class DemoWindowComposer extends SelectorComposer<Window> { | ||
| + | //... omitted | ||
| + | |||
| + | public void doAfterCompose(Window comp) throws Exception { | ||
| + | super.doAfterCompose(comp); | ||
| + | |||
| + | // specify a trillion faker model | ||
| + | myComp.setModel(new FakerMatrixModel(1000 * 1000, 1000 * 1000)); | ||
| + | myComp.setColWidth("130px"); | ||
| + | myComp.setMatrixRenderer(new MatrixRenderer<List<String>>() { | ||
| + | |||
| + | @Override | ||
| + | public String renderCell(Component owner, List<String> data, | ||
| + | int rowIndex, int colIndex) throws Exception { | ||
| + | String d = data.get(colIndex); | ||
| + | d = d.replace("ZK", "<span class='red' title='ZK'>ZK</span>") | ||
| + | .replace("Hello", "<span class='blue' title='Hello'>Hello</span>"); | ||
| + | return "<div class='images_" + (colIndex%28) + "' title='x=" + | ||
| + | colIndex + ",y=" + rowIndex + "'>" + d + "</div>"; | ||
| + | } | ||
| + | |||
| + | @Override | ||
| + | public String renderHeader(Component owner, List<String> data, | ||
| + | int rowIndex, int colIndex) throws Exception { | ||
| + | return "<div class='images_" + (colIndex % 28) + "' title='" | ||
| + | + images[colIndex % 28] + "'>" + data.get(colIndex) | ||
| + | + "</div>"; | ||
| + | } | ||
| + | }); | ||
| + | myComp.setSortAscending(new MyMatrixComparatorProvider<List<String>>(true)); | ||
| + | myComp.setSortDescending(new MyMatrixComparatorProvider<List<String>>(false)); | ||
| + | } | ||
| + | |||
| + | //... omitted | ||
| + | } | ||
| + | </source> | ||
| + | In the ''DemoWindowComposer'' class, we create a ''FakerMatrixModel'' instance, which implements [[#MatrixModel|MatrixModel]], to handle '''1,000,000''' columns and '''1,000,000''' rows data and instantiates an anonymous [[#MatrixRenderer|MatrixRenderer]] class to render the HTML string output for display. The sorting function of the Biglistbox we used is to implement the [[#MatrixComparatorProvider|MatrixComparatorProvider]] to provide each comparator from the given column index of the Biglistbox when user clicks on it. Those implementations above look similar to manipulate ZK Listbox, if you ever use. | ||
| + | |||
== MatrixModel == | == MatrixModel == | ||
== MatrixRenderer == | == MatrixRenderer == | ||
== MyMatrixComparatorProvider == | == MyMatrixComparatorProvider == | ||
| + | |||
=Component Usages= | =Component Usages= | ||
=Limitation= | =Limitation= | ||
Revision as of 05:04, 12 March 2012
This page is under construction, so we cannot guarantee the accuracy of the content!
Jumper Chen, Senior Engineer, Potix Corporation
March 12, 2012
ZK 6
Introduction
Cloud services and storage are the hot IT topics recently, and the desires of displaying a huge data in ZK are buzz from our users. After doing some experiments, we brew a single component with model named Biglistbox, a Big Listbox component, to handle an unlimited data set for a big table and provides the same as many as Listbox functions, selection, sorting, keystroke navigation, ROD(rendering-on-demand), and so on. The best features in the big listbox component are that it uses the server-side memory as less as it can and optimizes the updating area as much minimal at client-side, so that the big listbox component can display as fast as it can. In the following demo, we will demonstrate how to use Biglistbox to handle a trillion data.
Demo
Demo Code Details
In the following subsections, we will guide you how to implement those stuffs for the Biglistbox.
ZUL File
<biglistbox id="myComp" hflex="1" vflex="1" xmlns:w="client" w:onScroll="jq('$tip').fadeOut();">
<!-- Template example
<template name="heads">
<html><![CDATA[
<div class="images_${matrixInfo[0]%28}" title="x=${matrixInfo[0]},y=${matrixInfo[1]}">${each[matrixInfo[0]]}</div>
]]></html>
</template>
<template name="rows">
<html><![CDATA[
<div class="images_${matrixInfo[0]%28}" title="x=${matrixInfo[0]},y=${matrixInfo[1]}">${each[matrixInfo[0]]}</div>
]]></html>
</template> -->
</biglistbox>
As you can see, the Biglistbox can support V/Hflex function to adjust its size automatically and ZK'6 template function to render the HTML output, and you can retrieve the rowIndex and colIndex from the matrixInfo object that template rendering provided. In our demo, we use MatrixRenderer to handle a complex HTML output.
Composer
public class DemoWindowComposer extends SelectorComposer<Window> {
//... omitted
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
// specify a trillion faker model
myComp.setModel(new FakerMatrixModel(1000 * 1000, 1000 * 1000));
myComp.setColWidth("130px");
myComp.setMatrixRenderer(new MatrixRenderer<List<String>>() {
@Override
public String renderCell(Component owner, List<String> data,
int rowIndex, int colIndex) throws Exception {
String d = data.get(colIndex);
d = d.replace("ZK", "<span class='red' title='ZK'>ZK</span>")
.replace("Hello", "<span class='blue' title='Hello'>Hello</span>");
return "<div class='images_" + (colIndex%28) + "' title='x=" +
colIndex + ",y=" + rowIndex + "'>" + d + "</div>";
}
@Override
public String renderHeader(Component owner, List<String> data,
int rowIndex, int colIndex) throws Exception {
return "<div class='images_" + (colIndex % 28) + "' title='"
+ images[colIndex % 28] + "'>" + data.get(colIndex)
+ "</div>";
}
});
myComp.setSortAscending(new MyMatrixComparatorProvider<List<String>>(true));
myComp.setSortDescending(new MyMatrixComparatorProvider<List<String>>(false));
}
//... omitted
}
In the DemoWindowComposer class, we create a FakerMatrixModel instance, which implements MatrixModel, to handle 1,000,000 columns and 1,000,000 rows data and instantiates an anonymous MatrixRenderer class to render the HTML string output for display. The sorting function of the Biglistbox we used is to implement the MatrixComparatorProvider to provide each comparator from the given column index of the Biglistbox when user clicks on it. Those implementations above look similar to manipulate ZK Listbox, if you ever use.
MatrixModel
MatrixRenderer
MyMatrixComparatorProvider
Component Usages
Limitation
Download
You can download the sample application code from its github repo here
Comments
| Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License. |