Skip to content

Commit 48dcc10

Browse files
johnspackmanjohnspackman
committed
adds missing progressive tests
1 parent 71be137 commit 48dcc10

15 files changed

+1048
-1
lines changed

‎source/class/qxl/demobrowser/demo/progressive/ProgressiveLoader.js‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
/*
2+
* Example of using the Image cell renderer with Progressive''s Table.
3+
* This also demonstrates how the minimum row height can be set by a
4+
* cell renderer.
5+
*/
6+
qx.Class.define("qxl.demobrowser.demo.progressive.ProgressiveLoader",
7+
{
8+
extend : qx.application.Standalone,
9+
10+
members :
11+
{
12+
main : function()
13+
{
14+
this.base(arguments);
15+
16+
// We'll use the progressive table's progress footer. For that, we
17+
// need to define column widths as if we were a table.
18+
var columnWidths = new qx.ui.progressive.renderer.table.Widths(1);
19+
columnWidths.setWidth(0, "100%");
20+
21+
// Instantiate a Progressive
22+
var footer = new qx.ui.progressive.headfoot.Progress(columnWidths);
23+
var structure = new qx.ui.progressive.structure.Default(null, footer);
24+
var progressive = new qx.ui.progressive.Progressive(structure);
25+
26+
// We definitely want to see each progress as we're loading. Ensure
27+
// that the widget queue gets flushed
28+
progressive.setFlushWidgetQueueAfterBatch(true);
29+
30+
var addFunc = function(func)
31+
{
32+
var ret =
33+
{
34+
renderer : "func",
35+
data : func
36+
};
37+
return ret;
38+
};
39+
40+
// Instantiate a data model and populate it.
41+
var dataModel = new qx.ui.progressive.model.Default();
42+
43+
// Instantiate a Function Caller
44+
var functionCaller =
45+
new qx.ui.progressive.renderer.FunctionCaller();
46+
47+
// Give Progressive the renderer, and assign a name
48+
progressive.addRenderer("func", functionCaller);
49+
50+
var qooxdooUrl = "http://resources.qooxdoo.org/images/logo.gif";
51+
var qooxdoo = new qx.ui.basic.Image(qooxdooUrl, "100%", "100%");
52+
progressive.add(qooxdoo);
53+
54+
// Make the Progressive fairly small
55+
progressive.set(
56+
{
57+
height : 100,
58+
width : 272,
59+
zIndex : 99999,
60+
backgroundColor : "gray",
61+
opacity : 0.86,
62+
batchSize : 10
63+
});
64+
65+
this.getRoot().add(progressive,
66+
{
67+
top : -1000, // initially off screen
68+
left : -1000
69+
});
70+
71+
var pages =
72+
[
73+
{ text : "Red", background : "red", color : "white" },
74+
{ text : "Green", background : "green", color : "white" },
75+
{ text : "Blue", background : "blue", color : "white" },
76+
{ text : "Purple", background : "purple", color : "white" },
77+
{ text : "Yellow", background : "yellow", color : "black" }
78+
];
79+
80+
// Wait for execution to start so we can provide a place to store
81+
// references to objects we add to the application.
82+
this.context =
83+
{
84+
document : this.getRoot(),
85+
pages : pages
86+
};
87+
progressive.addListener(
88+
"renderStart",
89+
function(e)
90+
{
91+
// Our event data is an object containing the 'state' object and
92+
// the number of elements to be rendered.
93+
var state = e.getData().state;
94+
var initialNum = e.getData().initial;
95+
96+
// Center ourself
97+
var rootBounds = this.getRoot().getBounds();
98+
var progressive = e.getData().state.getProgressive();
99+
var progressiveBounds = progressive.getBounds();
100+
101+
var left =
102+
Math.floor((rootBounds.width - progressiveBounds.width) / 2);
103+
var top =
104+
Math.floor((rootBounds.height - progressiveBounds.height) / 2);
105+
106+
progressive.setLayoutProperties(
107+
{
108+
left : left < 0 ? 0 : left,
109+
top : top < 0 ? 0 : top
110+
});
111+
112+
// Save our context in the userData field of the state object.
113+
state.getUserData().context = this.context;
114+
115+
// Also save the number of elements for our progress bar usage.
116+
state.getUserData().initialNum = initialNum;
117+
},
118+
this);
119+
120+
progressive.addListener(
121+
"renderEnd",
122+
function(e)
123+
{
124+
// We don't need the Progressive any longer. Arrange for it to be
125+
// destroyed.
126+
qx.event.Timer.once(
127+
function()
128+
{
129+
this.getLayoutParent().remove(this);
130+
this.dispose();
131+
},
132+
this, 0);
133+
});
134+
135+
// Create the tabview which is the basis of our GUI
136+
dataModel.addElement(addFunc(
137+
function(userData)
138+
{
139+
// Get our context
140+
var context = userData.context;
141+
142+
// Create the tabview
143+
context.tabview = new qx.ui.tabview.TabView();
144+
context.tabview.set(
145+
{
146+
// height : 500
147+
});
148+
context.document.add(context.tabview,
149+
{
150+
left : 20,
151+
right : 20,
152+
top : 20,
153+
bottom : 20
154+
});
155+
156+
// We're ready to create our first page
157+
context.page = 0;
158+
context.currentPage = null;
159+
}));
160+
161+
for (var page = 0; page < pages.length; page++)
162+
{
163+
// Create this page
164+
dataModel.addElement(addFunc(
165+
function(userData)
166+
{
167+
// Get our context
168+
var context = userData.context;
169+
170+
// Get our page index
171+
var pageInfo = context.pages[context.page];
172+
173+
// Create the page
174+
context.currentPage = new qx.ui.tabview.Page(pageInfo.text);
175+
context.currentPage.setLayout(new qx.ui.layout.VBox(4));
176+
177+
// Add the page to the tabview's pane
178+
context.tabview.add(context.currentPage);
179+
180+
// Save a starting row and column number for our page widgets
181+
context.row = 0;
182+
context.col = 0;
183+
184+
// Save the first page
185+
if (context.page == 0)
186+
{
187+
context.firstPage = context.currentPage;
188+
}
189+
}));
190+
191+
// For each row on this page...
192+
for (var row = 0; row < 20; row++)
193+
{
194+
// Create a horizontal layout for this row
195+
dataModel.addElement(addFunc(
196+
function(userData)
197+
{
198+
// Get our context
199+
var context = userData.context;
200+
201+
// Create the horizontal layout
202+
context.hBox =
203+
new qx.ui.container.Composite(new qx.ui.layout.HBox(4));
204+
205+
// Add this horizontal layout to the vertical layout
206+
context.currentPage.add(context.hBox);
207+
208+
// Set this page active to watch it do its thing
209+
context.tabview.setSelection([context.currentPage]);
210+
211+
// Reset the column number
212+
context.col = 0;
213+
}));
214+
215+
for (var col = 0; col < 10; col++)
216+
{
217+
// Add elements to the horizontal layout
218+
dataModel.addElement(addFunc(
219+
function(userData)
220+
{
221+
// Get our context
222+
var context = userData.context;
223+
224+
// Get our page index
225+
var pageInfo = context.pages[context.page];
226+
227+
// Create an object to add
228+
var o = new qx.ui.basic.Atom("row " + context.row +
229+
", " +
230+
"col " + context.col);
231+
o.set(
232+
{
233+
width : 90,
234+
backgroundColor : pageInfo.background,
235+
textColor : pageInfo.color
236+
});
237+
238+
// Add it to the current horizontal layout
239+
context.hBox.add(o);
240+
}));
241+
242+
// Increment to the next column
243+
dataModel.addElement(addFunc(
244+
function(userData)
245+
{
246+
++userData.context.col;
247+
}));
248+
}
249+
250+
// Increment to the next row
251+
dataModel.addElement(addFunc(
252+
function(userData)
253+
{
254+
++userData.context.row;
255+
}));
256+
}
257+
258+
// Increment to the next page
259+
dataModel.addElement(addFunc(
260+
function(userData)
261+
{
262+
++userData.context.page;
263+
}));
264+
}
265+
266+
267+
// Switch back to the first page
268+
dataModel.addElement(addFunc(
269+
function(userData)
270+
{
271+
userData.context.tabview.setSelection([userData.context.firstPage]);
272+
}));
273+
274+
// Tell Progressive about its data model
275+
progressive.setDataModel(dataModel);
276+
277+
278+
// Begin execution
279+
progressive.render();
280+
}
281+
}
282+
});

‎source/class/qxl/demobrowser/demo/progressive/ProgressiveTable.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/* ************************************************************************
2+
3+
qooxdoo - the new era of web development
4+
5+
http://qooxdoo.org
6+
7+
Copyright:
8+
2008 Derrell Lipman
9+
10+
License:
11+
LGPL: http://www.gnu.org/licenses/lgpl.html
12+
EPL: http://www.eclipse.org/org/documents/epl-v10.php
13+
See the LICENSE file in the project's top-level directory for details.
14+
15+
Authors:
16+
* Derrell Lipman (derrell)
17+
18+
************************************************************************ */
19+
20+
qx.Class.define("qxl.demobrowser.demo.progressive.ProgressiveTable",
21+
{
22+
extend : qx.application.Standalone,
23+
24+
members :
25+
{
26+
main : function()
27+
{
28+
this.base(arguments);
29+
30+
var nextId = 0;
31+
var createRandomRows = function(rowCount) {
32+
var rowData = [];
33+
var now = new Date().getTime();
34+
var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
35+
for (var row = 0; row < rowCount; row++) {
36+
var date = new Date(now + Math.random() * dateRange - dateRange / 2);
37+
rowData.push(
38+
{
39+
renderer : "row",
40+
location : row == rowCount - 1 ? "start" : "end",
41+
data : [
42+
nextId++,
43+
Math.random() * 10000,
44+
date
45+
]
46+
});
47+
}
48+
return rowData;
49+
};
50+
51+
var columnWidths = new qx.ui.progressive.renderer.table.Widths(3);
52+
columnWidths.setWidth(0, 100);
53+
columnWidths.setWidth(1, "1*");
54+
columnWidths.setMaxWidth(1, 200);
55+
columnWidths.setWidth(2, 300);
56+
57+
var columnNames = [ "Id", "Number", "Date" ];
58+
59+
// Instantiate a Progressive with a default structure with header
60+
var header = new qx.ui.progressive.headfoot.TableHeading(columnWidths,
61+
columnNames);
62+
var footer = new qx.ui.progressive.headfoot.Progress(columnWidths,
63+
columnNames);
64+
var structure = new qx.ui.progressive.structure.Default(header,
65+
footer);
66+
var progressive = new qx.ui.progressive.Progressive(structure);
67+
68+
// Add a message
69+
var message = new qx.ui.basic.Atom("<span style='color:red;'>" +
70+
"Last item is intentionally " +
71+
"inserted at the top to show how " +
72+
"it's done" +
73+
"</span>");
74+
message.setRich(true);
75+
message.setHeight(16);
76+
progressive.add(message);
77+
78+
// Instantiate a data model and populate it.
79+
var dataModel = new qx.ui.progressive.model.Default();
80+
var rowData = createRandomRows(500);
81+
dataModel.addElements(rowData);
82+
83+
// Tell Progressive about its data model
84+
progressive.setDataModel(dataModel);
85+
86+
// Instantiate a table row renderer
87+
var renderer =
88+
new qx.ui.progressive.renderer.table.Row(columnWidths);
89+
90+
// Give Progressive the renderer, and assign a name
91+
progressive.addRenderer("row", renderer);
92+
93+
progressive.set(
94+
{
95+
width : 500,
96+
maxWidth : 500
97+
});
98+
this.getRoot().add(progressive, { left : 50, top : 50, bottom : 50 });
99+
100+
progressive.render();
101+
}
102+
}
103+
});

0 commit comments

Comments
 (0)