3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 Tests for the new implementation of the qx.ui.layout.FlowLayout widget.
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var d = qx.ui.core.ClientDocument.getInstance();
25 var flow1 = new qx.ui.layout.FlowLayout;
32 // flow1.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
33 // flow1.setPadding(8);
35 flow1.setHorizontalSpacing(4);
36 flow1.setVerticalSpacing(4);
38 // flow1.setHorizontalChildrenAlign("right");
39 // flow1.setVerticalChildrenAlign("bottom");
41 // flow1.setReverseChildrenOrder(true);
47 var w1 = new qx.ui.basic.Terminator;
49 w1.setBackgroundColor("orange");
54 var w2 = new qx.ui.basic.Terminator;
56 w2.setBackgroundColor("blue");
61 var w3 = new qx.ui.basic.Terminator;
63 w3.setBackgroundColor("green");
68 var w4 = new qx.ui.basic.Terminator;
70 w4.setBackgroundColor("purple");
74 var w5 = new qx.ui.basic.Terminator;
76 w5.setBackgroundColor("yellow");
80 var w6 = new qx.ui.basic.Terminator;
82 w6.setBackgroundColor("red");
86 var i1 = new qx.ui.basic.Image("icon/32/clock.png");
87 var i2 = new qx.ui.basic.Image("icon/32/colors.png");
89 i2.setResizeToInner(true);
91 var c1 = new qx.ui.basic.Label("Hello World");
92 var c2 = new qx.ui.basic.Label("<ol><li>Simple HTML List</li><li>with one</li><li>and another item</li></ol>");
94 var a1 = new qx.ui.form.Button("Press", "icon/16/bell.png");
97 flow1.add(w1, i1, w2, w3, a1, c2, w4, i2, w5, c1, w6);
103 w1.addEventListener("click", function(e) {
104 this.setMaxWidth(this.getMaxWidth() == 50 ? null : 50);
107 w2.addEventListener("click", function(e)
109 if (this.getWidth() == 200)
121 i1.addEventListener("click", function(e) {
122 this.setSource(this.getSource() == "icon/32/clock.png" ? "icon/128/clock.png" : "icon/32/clock.png");
125 i2.addEventListener("click", function(e)
127 this.setWidth(this.getWidth() == "auto" ? 128 : "auto");
128 this.setHeight(this.getHeight() == "auto" ? 128 : "auto");
131 c1.addEventListener("click", function(e) {
132 this.setHtml(this.getHtml() == "Hello World" ? "Yeah, qooxdoo is great" : "Hello World");
138 // *************************************************************
140 var controlBox = new qx.ui.layout.VerticalBoxLayout;
142 controlBox.setLeft(20);
143 controlBox.setBottom(48);
144 controlBox.setRight(335);
145 controlBox.setWidth(null);
146 controlBox.setHeight("auto");
147 controlBox.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
148 controlBox.setSpacing(4);
149 controlBox.setPadding(8);
156 var cc0 = new qx.ui.basic.Label("Spacing: ");
159 var bc0 = new qx.ui.form.Button("0x0", "icon/16/button-ok.png");
160 var bc1 = new qx.ui.form.Button("4x4", "icon/16/button-ok.png");
161 var bc2 = new qx.ui.form.Button("8x8", "icon/16/button-ok.png");
162 var bc3 = new qx.ui.form.Button("20x20", "icon/16/button-ok.png");
163 var bc4 = new qx.ui.form.Button("0x10", "icon/16/button-ok.png");
164 var bc5 = new qx.ui.form.Button("10x0", "icon/16/button-ok.png");
166 bc0.addEventListener("execute", function(e) {
167 flow1.setHorizontalSpacing(0);
168 flow1.setVerticalSpacing(0);
171 bc1.addEventListener("execute", function(e) {
172 flow1.setHorizontalSpacing(4);
173 flow1.setVerticalSpacing(4);
176 bc2.addEventListener("execute", function(e) {
177 flow1.setHorizontalSpacing(8);
178 flow1.setVerticalSpacing(8);
181 bc3.addEventListener("execute", function(e) {
182 flow1.setHorizontalSpacing(20);
183 flow1.setVerticalSpacing(20);
186 bc4.addEventListener("execute", function(e) {
187 flow1.setHorizontalSpacing(0);
188 flow1.setVerticalSpacing(10);
191 bc5.addEventListener("execute", function(e) {
192 flow1.setHorizontalSpacing(10);
193 flow1.setVerticalSpacing(0);
196 var hc0 = new qx.ui.layout.HorizontalBoxLayout;
198 hc0.add(cc0, bc0, bc1, bc2, bc3, bc4, bc5);
199 hc0.setVerticalChildrenAlign("middle");
200 hc0.setHeight("auto");
209 var cr0 = new qx.ui.basic.Label("Order: ");
212 var br0 = new qx.ui.form.Button("Default", "icon/16/button-ok.png");
213 var br1 = new qx.ui.form.Button("Reversed", "icon/16/button-ok.png");
215 br0.addEventListener("execute", function(e) {
216 flow1.setReverseChildrenOrder(false);
219 br1.addEventListener("execute", function(e) {
220 flow1.setReverseChildrenOrder(true);
225 var hc1 = new qx.ui.layout.HorizontalBoxLayout;
227 hc1.add(cr0, br0, br1);
228 hc1.setVerticalChildrenAlign("middle");
229 hc1.setHeight("auto");
239 var cr0 = new qx.ui.basic.Label("Align: ");
242 var br0 = new qx.ui.form.Button("Top", "icon/16/button-ok.png");
243 var br1 = new qx.ui.form.Button("Bottom", "icon/16/button-ok.png");
244 var br2 = new qx.ui.form.Button("Left", "icon/16/button-ok.png");
245 var br3 = new qx.ui.form.Button("Right", "icon/16/button-ok.png");
247 br0.addEventListener("execute", function(e) {
248 flow1.setVerticalChildrenAlign("top");
251 br1.addEventListener("execute", function(e) {
252 flow1.setVerticalChildrenAlign("bottom");
255 br2.addEventListener("execute", function(e) {
256 flow1.setHorizontalChildrenAlign("left");
259 br3.addEventListener("execute", function(e) {
260 flow1.setHorizontalChildrenAlign("right");
264 var hc1 = new qx.ui.layout.HorizontalBoxLayout;
266 hc1.add(cr0, br0, br1, br2, br3);
267 hc1.setVerticalChildrenAlign("middle");
268 hc1.setHeight("auto");
278 var ca0 = new qx.ui.basic.Label("Children: ");
281 var ba0 = new qx.ui.form.Button("New Atom", "icon/16/button-ok.png");
282 var ba1 = new qx.ui.form.Button("New Image", "icon/16/button-ok.png");
283 var ba2 = new qx.ui.form.Button("New Atom to #3", "icon/16/button-ok.png");
284 var ba3 = new qx.ui.form.Button("New Image to #6", "icon/16/button-ok.png");
285 var ba4 = new qx.ui.form.Button("Remove First", "icon/16/button-ok.png");
287 ba0.addEventListener("execute", function(e) {
288 flow1.add(new qx.ui.basic.Atom("New Atom", "icon/16/services.png"));
291 ba1.addEventListener("execute", function(e) {
292 flow1.add(new qx.ui.basic.Image("icon/64/pipe.png"));
295 ba2.addEventListener("execute", function(e) {
296 flow1.addAt(new qx.ui.basic.Atom("New Atom", "icon/16/bell.png"), 3);
299 ba3.addEventListener("execute", function(e) {
300 flow1.addAt(new qx.ui.basic.Image("icon/64/vectorgraphics.png"), 6);
303 ba4.addEventListener("execute", function(e) {
304 flow1.remove(flow1.getFirstChild());
307 var ha1 = new qx.ui.layout.HorizontalBoxLayout;
309 ha1.add(ca0, ba0, ba1, ba2, ba3, ba4);
310 ha1.setVerticalChildrenAlign("middle");
311 ha1.setHeight("auto");