Skip to content

Commit e7a0693

Browse files
hkollmannhkollmann
committed
2 parents 25f702e + 814aef1 commit e7a0693

22 files changed

+1343
-2
lines changed

‎package-lock.json‎

Lines changed: 52 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"name": "qxl.demobrowser",
3+
"version": "1.0.0",
4+
"description": "A GUI framework application for qooxdoo demos",
5+
"main": "compile.js",
6+
"dependencies": {
7+
"async": "^3.1.0",
8+
"mkdirp": "^0.5.5",
9+
"upath": "^1.2.0",
10+
"walker": "^1.0.7"
11+
},
12+
"devDependencies": {},
13+
"scripts": {
14+
"test": "echo \"Error: no test specified\" && exit 1"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/qooxdoo/qxl.demobrowser.git"
19+
},
20+
"author": "",
21+
"license": "ISC",
22+
"bugs": {
23+
"url": "https://github.com/qooxdoo/qxl.demobrowser/issues"
24+
},
25+
"homepage": "https://github.com/qooxdoo/qxl.demobrowser#readme"
26+
}

‎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+
});

0 commit comments

Comments
 (0)