diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html | 283 |
1 files changed, 283 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html new file mode 100644 index 0000000000..36bcf5f9a2 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/BoxLayout_1.html @@ -0,0 +1,283 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » Demo</title> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/> + <!--[if IE]> + <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/> + <![endif]--> + <script type="text/javascript" src="../../script/qx.js"></script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + + <div id="testCommand" class="manualFrame"> + <style type="text/css"> + #testCommand{ + position: absolute; + right: 335px; + bottom: 48px; + width: 350px; + } + + .setform select{ + font-size: 11px; + min-width: 75px; + } + + .setform button{ + font-size: 11px; + } + </style> + + <table class="setform"><tbody> + + <tr> + <td> + <label for="sel_orientation">Orientation:</label> + </td> + <td> + <select id="sel_orientation"> + <option selected="selected">horizontal</option> + <option>vertical</option> + </select> + </td> + </tr> + + <tr> + <td>Width/Height:</td> + <td> + <select id="sel_width"> + <option>100</option> + <option selected="selected">250</option> + <option>500</option> + <option>auto</option> + </select> + <select id="sel_height"> + <option>100</option> + <option selected="selected">250</option> + <option>500</option> + <option>auto</option> + </select> + </td> + </tr> + + <tr> + <td>Spacing/Padding:</td> + <td> + <select id="sel_spacing"> + <option selected="selected">0</option> + <option>2</option> + <option>4</option> + <option>8</option> + </select> + <select id="sel_padding"> + <option selected="selected">0</option> + <option>2</option> + <option>4</option> + <option>8</option> + </select> + </td> + </tr> + + <tr> + <td> + <label for="sel_order">Order/Stretching:</label> + </td> + <td> + <select id="sel_order"> + <option selected="selected">default</option> + <option>reverse</option> + </select> + <select id="sel_stretch"> + <option selected="selected">enabled</option> + <option>disabled</option> + </select> + </td> + </tr> + + <tr> + <td>Horizontal/Vertical Align:</td> + <td> + <select id="sel_horalg"> + <option selected="selected">left</option> + <option>center</option> + <option>right</option> + </select> + <select id="sel_veralg"> + <option selected="selected">top</option> + <option>middle</option> + <option>bottom</option> + </select> + </td> + </tr> + + <tr> + <td> </td> + <td> + <button id="btn_save">Apply</button> + </td> + </tr> + + </tbody></table> + + <p><b>Tests</b></p> + <ul> + <li><a href="javascript:test1()">Test 1: Remove blue widget</a></li> + <li><a href="javascript:test2()">Test 2: Add blue widget</a></li> + <li><a href="javascript:test3()">Test 3: Add blue widget at position 2</a></li> + <li><a href="javascript:test4()">Test 4: Add blue widget at position 4</a></li> + <li><a href="javascript:test5()">Test 5: Add green widget at before the cdrom</a></li> + <li><a href="javascript:test6()">Test 6: Add green widget at after the color palette</a></li> + <li><a href="javascript:test7()">Test 7: Add new widget to layout</a></li> + </ul> + </div> + + <div id="demoDescription"> + <p>Now something more complex. Try to configure multiple things and then press <apply>.</p> + </div> + + <script type="text/javascript"> + + var bl, w1, w2, w3, w4, w5, w6, w7, w8; + + var _b = document.getElementById("btn_save"); + var _t = document.getElementById("sel_orientation"); + var _w = document.getElementById("sel_width"); + var _h = document.getElementById("sel_height"); + var _s = document.getElementById("sel_spacing"); + var _p = document.getElementById("sel_padding"); + var _o = document.getElementById("sel_order"); + var _r = document.getElementById("sel_stretch"); + var _l = document.getElementById("sel_horalg"); + var _v = document.getElementById("sel_veralg"); + + function save() + { + var vt = _t.options[_t.selectedIndex].firstChild.nodeValue; + var vw = _w.options[_w.selectedIndex].firstChild.nodeValue; + var vh = _h.options[_h.selectedIndex].firstChild.nodeValue; + var vs = _s.options[_s.selectedIndex].firstChild.nodeValue; + var vp = _p.options[_p.selectedIndex].firstChild.nodeValue; + var vo = _o.options[_o.selectedIndex].firstChild.nodeValue; + var vr = _r.options[_r.selectedIndex].firstChild.nodeValue; + var vl = _l.options[_l.selectedIndex].firstChild.nodeValue; + var vv = _v.options[_v.selectedIndex].firstChild.nodeValue; + + bl.setOrientation(vt); + bl.setWidth(vw == "auto" ? vw : parseInt(vw)); + bl.setHeight(vh == "auto" ? vh : parseInt(vh)); + bl.setSpacing(parseInt(vs)); + bl.setPadding(parseInt(vp)); + bl.setReverseChildrenOrder(vo == "reverse"); + bl.setStretchChildrenOrthogonalAxis(vr == "enabled"); + bl.setHorizontalChildrenAlign(vl); + bl.setVerticalChildrenAlign(vv); + }; + + if (_b.attachEvent) + _b.attachEvent("onclick", save); + else if (_b.addEventListener) + _b.addEventListener("click", save, false); + + + function test1() + { + bl.remove(w2); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test2() + { + bl.add(w2); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test3() + { + bl.addAt(w2, 2); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test4() + { + bl.addAt(w2, 4); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test5() + { + bl.addBefore(w3, w7); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test6() + { + bl.addAfter(w3, w4); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + function test7() + { + bl.addAt(w8, 1); + qx.ui.core.Widget.flushGlobalQueues(); + }; + + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + bl = new qx.ui.layout.BoxLayout("horizontal"); + bl.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + bl.setBackgroundColor(new qx.renderer.color.Color("white")); + bl.setWidth(250); + bl.setHeight(250); + bl.setTop(48); + bl.setLeft(20); + + w1 = new qx.ui.layout.CanvasLayout; + w1.setBackgroundColor(new qx.renderer.color.Color("orange")); + w1.setMinWidth(20); + w1.setMinHeight(20); + w1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + w2 = new qx.ui.layout.CanvasLayout; + w2.setBackgroundColor(new qx.renderer.color.Color("blue")); + w2.setMinWidth(20); + w2.setMinHeight(20); + w2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + w3 = new qx.ui.layout.CanvasLayout; + w3.setBackgroundColor(new qx.renderer.color.Color("green")); + w3.setMinWidth(20); + w3.setMinHeight(20); + w3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + w4 = new qx.ui.basic.Image("icon/32/colors.png"); + + w5 = new qx.ui.layout.CanvasLayout; + w5.setBackgroundColor(new qx.renderer.color.Color("yellow")); + w5.setMinWidth(20); + w5.setMinHeight(20); + w5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + w6 = new qx.ui.layout.CanvasLayout; + w6.setBackgroundColor(new qx.renderer.color.Color("red")); + w6.setMinWidth(20); + w6.setMinHeight(20); + w6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + w7 = new qx.ui.basic.Image("icon/64/cdrom.png"); + + w8 = new qx.ui.layout.CanvasLayout; + w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia")); + w8.setMinWidth(20); + w8.setMinHeight(20); + w8.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + + bl.add(w1, w2, w3, w4, w5, w6, w7); + d.add(bl); + }); + </script> +</body> +</html>
\ No newline at end of file |