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="testCommand" class="manualFrame">
15 <style type="text/css">
33 <table class="setform"><tbody>
37 <label for="sel_orientation">Orientation:</label>
40 <select id="sel_orientation">
41 <option selected="selected">horizontal</option>
42 <option>vertical</option>
48 <td>Width/Height:</td>
50 <select id="sel_width">
52 <option selected="selected">250</option>
56 <select id="sel_height">
58 <option selected="selected">250</option>
66 <td>Spacing/Padding:</td>
68 <select id="sel_spacing">
69 <option selected="selected">0</option>
74 <select id="sel_padding">
75 <option selected="selected">0</option>
85 <label for="sel_order">Order/Stretching:</label>
88 <select id="sel_order">
89 <option selected="selected">default</option>
90 <option>reverse</option>
92 <select id="sel_stretch">
93 <option selected="selected">enabled</option>
94 <option>disabled</option>
100 <td>Horizontal/Vertical Align:</td>
102 <select id="sel_horalg">
103 <option selected="selected">left</option>
104 <option>center</option>
105 <option>right</option>
107 <select id="sel_veralg">
108 <option selected="selected">top</option>
109 <option>middle</option>
110 <option>bottom</option>
118 <button id="btn_save">Apply</button>
126 <li><a href="javascript:test1()">Test 1: Remove blue widget</a></li>
127 <li><a href="javascript:test2()">Test 2: Add blue widget</a></li>
128 <li><a href="javascript:test3()">Test 3: Add blue widget at position 2</a></li>
129 <li><a href="javascript:test4()">Test 4: Add blue widget at position 4</a></li>
130 <li><a href="javascript:test5()">Test 5: Add green widget at before the cdrom</a></li>
131 <li><a href="javascript:test6()">Test 6: Add green widget at after the color palette</a></li>
132 <li><a href="javascript:test7()">Test 7: Add new widget to layout</a></li>
136 <div id="demoDescription">
137 <p>Now something more complex. Try to configure multiple things and then press <apply>.</p>
138 <p>Added initial support for children align override: Try to click on the color palette.</p>
141 <script type="text/javascript">
143 var bl, w1, w2, w3, w4, w5, w6, w7, w8;
145 var _b = document.getElementById("btn_save");
146 var _t = document.getElementById("sel_orientation");
147 var _w = document.getElementById("sel_width");
148 var _h = document.getElementById("sel_height");
149 var _s = document.getElementById("sel_spacing");
150 var _p = document.getElementById("sel_padding");
151 var _o = document.getElementById("sel_order");
152 var _r = document.getElementById("sel_stretch");
153 var _l = document.getElementById("sel_horalg");
154 var _v = document.getElementById("sel_veralg");
158 var vt = _t.options[_t.selectedIndex].firstChild.nodeValue;
159 var vw = _w.options[_w.selectedIndex].firstChild.nodeValue;
160 var vh = _h.options[_h.selectedIndex].firstChild.nodeValue;
161 var vs = _s.options[_s.selectedIndex].firstChild.nodeValue;
162 var vp = _p.options[_p.selectedIndex].firstChild.nodeValue;
163 var vo = _o.options[_o.selectedIndex].firstChild.nodeValue;
164 var vr = _r.options[_r.selectedIndex].firstChild.nodeValue;
165 var vl = _l.options[_l.selectedIndex].firstChild.nodeValue;
166 var vv = _v.options[_v.selectedIndex].firstChild.nodeValue;
168 bl.setOrientation(vt);
169 bl.setWidth(vw == "auto" ? vw : parseInt(vw));
170 bl.setHeight(vh == "auto" ? vh : parseInt(vh));
171 bl.setSpacing(parseInt(vs));
172 bl.setPadding(parseInt(vp));
173 bl.setReverseChildrenOrder(vo == "reverse");
174 bl.setStretchChildrenOrthogonalAxis(vr == "enabled");
175 bl.setHorizontalChildrenAlign(vl);
176 bl.setVerticalChildrenAlign(vv);
180 _b.attachEvent("onclick", save);
181 else if (_b.addEventListener)
182 _b.addEventListener("click", save, false);
188 qx.ui.core.Widget.flushGlobalQueues();
194 qx.ui.core.Widget.flushGlobalQueues();
200 qx.ui.core.Widget.flushGlobalQueues();
206 qx.ui.core.Widget.flushGlobalQueues();
211 bl.addBefore(w3, w7);
212 qx.ui.core.Widget.flushGlobalQueues();
218 qx.ui.core.Widget.flushGlobalQueues();
224 qx.ui.core.Widget.flushGlobalQueues();
227 qx.core.Init.getInstance().defineMain(function()
229 var d = qx.ui.core.ClientDocument.getInstance();
231 bl = new qx.ui.layout.BoxLayout("horizontal");
232 bl.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
233 bl.setBackgroundColor(new qx.renderer.color.Color("white"));
239 w1 = new qx.ui.layout.CanvasLayout;
240 w1.setBackgroundColor(new qx.renderer.color.Color("orange"));
243 w1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
244 w1.setAllowStretchX(false);
245 w1.setAllowStretchY(false);
246 w1.setVerticalAlign("middle");
247 w1.setHorizontalAlign("center");
249 w2 = new qx.ui.layout.CanvasLayout;
250 w2.setBackgroundColor(new qx.renderer.color.Color("blue"));
253 w2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
254 w2.setAllowStretchX(false);
255 w2.setHorizontalAlign("center");
257 w3 = new qx.ui.layout.CanvasLayout;
258 w3.setBackgroundColor(new qx.renderer.color.Color("green"));
261 w3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
262 w3.setAllowStretchY(false);
263 w3.setVerticalAlign("middle");
265 w4 = new qx.ui.basic.Image("icon/32/colors.png");
266 w4.setVerticalAlign("bottom");
267 w4.setHorizontalAlign("right");
269 w5 = new qx.ui.layout.CanvasLayout;
270 w5.setBackgroundColor(new qx.renderer.color.Color("yellow"));
273 w5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
275 w6 = new qx.ui.layout.CanvasLayout;
276 w6.setBackgroundColor(new qx.renderer.color.Color("red"));
279 w6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
281 w7 = new qx.ui.basic.Image("icon/64/cdrom.png");
282 w7.setVerticalAlign("middle");
283 w7.setHorizontalAlign("center");
285 w8 = new qx.ui.layout.CanvasLayout;
286 w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia"));
289 w8.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
292 w4.addEventListener("click", function()
296 switch(this.getHorizontalAlign())
313 this.setHorizontalAlign(h);
314 this.setVerticalAlign(v);
319 bl.add(w1, w2, w3, w4, w5, w6, w7);