summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/BoxLayout_2.html
diff options
context:
space:
mode:
authorDerrell Lipman <derrell@samba.org>2006-10-06 15:40:18 +0000
committerGerald (Jerry) Carter <jerry@samba.org>2007-10-10 14:20:40 -0500
commit10c06a1968dbf39d8a3790077a3537b8323f36ff (patch)
treef7389aac531dfe7c0d538879bdbd15cca33156e4 /swat/apps/qooxdoo-examples/test/BoxLayout_2.html
parent77fc14c0818498e277a79196fa4f6e15f4b607b1 (diff)
downloadsamba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.gz
samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.bz2
samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.zip
r19141: add a reasonable subset of the qooxdoo runtime environment, and example applications
(This used to be commit ff28ab7314ff1eebcd62f387678b816091af8121)
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/BoxLayout_2.html')
-rw-r--r--swat/apps/qooxdoo-examples/test/BoxLayout_2.html324
1 files changed, 324 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/BoxLayout_2.html b/swat/apps/qooxdoo-examples/test/BoxLayout_2.html
new file mode 100644
index 0000000000..ead48a1f0c
--- /dev/null
+++ b/swat/apps/qooxdoo-examples/test/BoxLayout_2.html
@@ -0,0 +1,324 @@
+<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>
+ <p>Added initial support for children align override: Try to click on the color palette.</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, 3);
+ 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);
+ w1.setAllowStretchX(false);
+ w1.setAllowStretchY(false);
+ w1.setVerticalAlign("middle");
+ w1.setHorizontalAlign("center");
+
+ 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);
+ w2.setAllowStretchX(false);
+ w2.setHorizontalAlign("center");
+
+ 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);
+ w3.setAllowStretchY(false);
+ w3.setVerticalAlign("middle");
+
+ w4 = new qx.ui.basic.Image("icon/32/colors.png");
+ w4.setVerticalAlign("bottom");
+ w4.setHorizontalAlign("right");
+
+ 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");
+ w7.setVerticalAlign("middle");
+ w7.setHorizontalAlign("center");
+
+ 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);
+
+
+ w4.addEventListener("click", function()
+ {
+ var h, v;
+
+ switch(this.getHorizontalAlign())
+ {
+ case "center":
+ h = "right";
+ v = "bottom";
+ break;
+
+ case "right":
+ h = "left";
+ v = "top";
+ break;
+
+ default:
+ h = "center";
+ v = "middle";
+ };
+
+ this.setHorizontalAlign(h);
+ this.setVerticalAlign(v);
+ });
+
+
+
+ bl.add(w1, w2, w3, w4, w5, w6, w7);
+ d.add(bl);
+ });
+ </script>
+</body>
+</html> \ No newline at end of file
generated by cgit (git 2.34.1) at 2024-12-27 22:31:00 +0000