summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/BoxLayout_1.html
diff options
context:
space:
mode:
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/BoxLayout_1.html')
-rw-r--r--swat/apps/qooxdoo-examples/test/BoxLayout_1.html283
1 files changed, 0 insertions, 283 deletions
diff --git a/swat/apps/qooxdoo-examples/test/BoxLayout_1.html b/swat/apps/qooxdoo-examples/test/BoxLayout_1.html
deleted file mode 100644
index 36bcf5f9a2..0000000000
--- a/swat/apps/qooxdoo-examples/test/BoxLayout_1.html
+++ /dev/null
@@ -1,283 +0,0 @@
-<html>
-<head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>qooxdoo &raquo; 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>&#160;</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 &lt;apply&gt;.</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