swat/apps/qooxdoo-examples/test/BoxLayout_2.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="testCommand" class="manualFrame">
  15     <style type="text/css">
  16       #testCommand{
  17         position: absolute;
  18         right: 335px;
  19         bottom: 48px;
  20         width: 350px;
  21       }
  22
  23       .setform select{
  24         font-size: 11px;
  25         min-width: 75px;
  26       }
  27
  28       .setform button{
  29         font-size: 11px;
  30       }
  31     </style>
  32
  33     <table class="setform"><tbody>
  34
  35     <tr>
  36       <td>
  37         <label for="sel_orientation">Orientation:</label>
  38       </td>
  39       <td>
  40         <select id="sel_orientation">
  41           <option selected="selected">horizontal</option>
  42           <option>vertical</option>
  43         </select>
  44       </td>
  45     </tr>
  46
  47     <tr>
  48       <td>Width/Height:</td>
  49       <td>
  50         <select id="sel_width">
  51           <option>100</option>
  52           <option selected="selected">250</option>
  53           <option>500</option>
  54           <option>auto</option>
  55         </select>
  56         <select id="sel_height">
  57           <option>100</option>
  58           <option selected="selected">250</option>
  59           <option>500</option>
  60           <option>auto</option>
  61         </select>
  62       </td>
  63     </tr>
  64
  65     <tr>
  66       <td>Spacing/Padding:</td>
  67       <td>
  68         <select id="sel_spacing">
  69           <option selected="selected">0</option>
  70           <option>2</option>
  71           <option>4</option>
  72           <option>8</option>
  73         </select>
  74         <select id="sel_padding">
  75           <option selected="selected">0</option>
  76           <option>2</option>
  77           <option>4</option>
  78           <option>8</option>
  79         </select>
  80       </td>
  81     </tr>
  82
  83     <tr>
  84       <td>
  85         <label for="sel_order">Order/Stretching:</label>
  86       </td>
  87       <td>
  88         <select id="sel_order">
  89           <option selected="selected">default</option>
  90           <option>reverse</option>
  91         </select>
  92         <select id="sel_stretch">
  93           <option selected="selected">enabled</option>
  94           <option>disabled</option>
  95         </select>
  96       </td>
  97     </tr>
  98
  99     <tr>
 100       <td>Horizontal/Vertical Align:</td>
 101       <td>
 102         <select id="sel_horalg">
 103           <option selected="selected">left</option>
 104           <option>center</option>
 105           <option>right</option>
 106         </select>
 107         <select id="sel_veralg">
 108           <option selected="selected">top</option>
 109           <option>middle</option>
 110           <option>bottom</option>
 111         </select>
 112       </td>
 113     </tr>
 114
 115     <tr>
 116       <td>&#160;</td>
 117       <td>
 118         <button id="btn_save">Apply</button>
 119       </td>
 120     </tr>
 121
 122     </tbody></table>
 123
 124     <p><b>Tests</b></p>
 125     <ul>
 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>
 133     </ul>
 134   </div>
 135
 136   <div id="demoDescription">
 137     <p>Now something more complex. Try to configure multiple things and then press &lt;apply&gt;.</p>
 138     <p>Added initial support for children align override: Try to click on the color palette.</p>
 139   </div>
 140
 141   <script type="text/javascript">
 142
 143   var bl, w1, w2, w3, w4, w5, w6, w7, w8;
 144
 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");
 155
 156   function save()
 157   {
 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;
 167
 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);
 177   };
 178
 179   if (_b.attachEvent)
 180     _b.attachEvent("onclick", save);
 181   else if (_b.addEventListener)
 182     _b.addEventListener("click", save, false);
 183
 184
 185   function test1()
 186   {
 187     bl.remove(w2);
 188     qx.ui.core.Widget.flushGlobalQueues();
 189   };
 190
 191   function test2()
 192   {
 193     bl.add(w2);
 194     qx.ui.core.Widget.flushGlobalQueues();
 195   };
 196
 197   function test3()
 198   {
 199     bl.addAt(w2, 2);
 200     qx.ui.core.Widget.flushGlobalQueues();
 201   };
 202
 203   function test4()
 204   {
 205     bl.addAt(w2, 4);
 206     qx.ui.core.Widget.flushGlobalQueues();
 207   };
 208
 209   function test5()
 210   {
 211     bl.addBefore(w3, w7);
 212     qx.ui.core.Widget.flushGlobalQueues();
 213   };
 214
 215   function test6()
 216   {
 217     bl.addAfter(w3, w4);
 218     qx.ui.core.Widget.flushGlobalQueues();
 219   };
 220
 221   function test7()
 222   {
 223     bl.addAt(w8, 3);
 224     qx.ui.core.Widget.flushGlobalQueues();
 225   };
 226
 227   qx.core.Init.getInstance().defineMain(function()
 228   {
 229     var d = qx.ui.core.ClientDocument.getInstance();
 230
 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"));
 234     bl.setWidth(250);
 235     bl.setHeight(250);
 236     bl.setTop(48);
 237     bl.setLeft(20);
 238
 239     w1 = new qx.ui.layout.CanvasLayout;
 240     w1.setBackgroundColor(new qx.renderer.color.Color("orange"));
 241     w1.setMinWidth(20);
 242     w1.setMinHeight(20);
 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");
 248
 249     w2 = new qx.ui.layout.CanvasLayout;
 250     w2.setBackgroundColor(new qx.renderer.color.Color("blue"));
 251     w2.setMinWidth(20);
 252     w2.setMinHeight(20);
 253     w2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 254     w2.setAllowStretchX(false);
 255     w2.setHorizontalAlign("center");
 256
 257     w3 = new qx.ui.layout.CanvasLayout;
 258     w3.setBackgroundColor(new qx.renderer.color.Color("green"));
 259     w3.setMinWidth(20);
 260     w3.setMinHeight(20);
 261     w3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 262     w3.setAllowStretchY(false);
 263     w3.setVerticalAlign("middle");
 264
 265     w4 = new qx.ui.basic.Image("icon/32/colors.png");
 266     w4.setVerticalAlign("bottom");
 267     w4.setHorizontalAlign("right");
 268
 269     w5 = new qx.ui.layout.CanvasLayout;
 270     w5.setBackgroundColor(new qx.renderer.color.Color("yellow"));
 271     w5.setMinWidth(20);
 272     w5.setMinHeight(20);
 273     w5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 274
 275     w6 = new qx.ui.layout.CanvasLayout;
 276     w6.setBackgroundColor(new qx.renderer.color.Color("red"));
 277     w6.setMinWidth(20);
 278     w6.setMinHeight(20);
 279     w6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 280
 281     w7 = new qx.ui.basic.Image("icon/64/cdrom.png");
 282     w7.setVerticalAlign("middle");
 283     w7.setHorizontalAlign("center");
 284
 285     w8 = new qx.ui.layout.CanvasLayout;
 286     w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia"));
 287     w8.setMinWidth(20);
 288     w8.setMinHeight(20);
 289     w8.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 290
 291
 292     w4.addEventListener("click", function()
 293     {
 294       var h, v;
 295
 296       switch(this.getHorizontalAlign())
 297       {
 298         case "center":
 299           h = "right";
 300           v = "bottom";
 301           break;
 302
 303         case "right":
 304           h = "left";
 305           v = "top";
 306           break;
 307
 308         default:
 309           h = "center";
 310           v = "middle";
 311       };
 312
 313       this.setHorizontalAlign(h);
 314       this.setVerticalAlign(v);
 315     });
 316
 317
 318
 319     bl.add(w1, w2, w3, w4, w5, w6, w7);
 320     d.add(bl);
 321   });
 322   </script>
 323 </body>
 324 </html>