swat/apps/qooxdoo-examples/test/FlowLayout_1.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="demoDescription">
  15     Tests for the new implementation of the qx.ui.layout.FlowLayout widget.
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var d = qx.ui.core.ClientDocument.getInstance();
  22
  23
  24
  25     var flow1 = new qx.ui.layout.FlowLayout;
  26
  27     flow1.setTop(48);
  28     flow1.setLeft(20);
  29     flow1.setRight(335);
  30     flow1.setBottom(200);
  31
  32     // flow1.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
  33     // flow1.setPadding(8);
  34
  35     flow1.setHorizontalSpacing(4);
  36     flow1.setVerticalSpacing(4);
  37
  38     // flow1.setHorizontalChildrenAlign("right");
  39     // flow1.setVerticalChildrenAlign("bottom");
  40
  41     // flow1.setReverseChildrenOrder(true);
  42
  43     d.add(flow1);
  44
  45
  46
  47     var w1 = new qx.ui.basic.Terminator;
  48
  49     w1.setBackgroundColor("orange");
  50     w1.setWidth(300);
  51     w1.setHeight(20);
  52
  53
  54     var w2 = new qx.ui.basic.Terminator;
  55
  56     w2.setBackgroundColor("blue");
  57     w2.setWidth(200);
  58     w2.setHeight(50);
  59
  60
  61     var w3 = new qx.ui.basic.Terminator;
  62
  63     w3.setBackgroundColor("green");
  64     w3.setWidth(100);
  65     w3.setHeight(150);
  66     w3.setMarginLeft(20);
  67
  68     var w4 = new qx.ui.basic.Terminator;
  69
  70     w4.setBackgroundColor("purple");
  71     w4.setWidth("30%");
  72     w4.setHeight("10%");
  73
  74     var w5 = new qx.ui.basic.Terminator;
  75
  76     w5.setBackgroundColor("yellow");
  77     w5.setWidth(50);
  78     w5.setHeight(80);
  79
  80     var w6 = new qx.ui.basic.Terminator;
  81
  82     w6.setBackgroundColor("red");
  83     w6.setWidth(400);
  84     w6.setHeight(50);
  85
  86     var i1 = new qx.ui.basic.Image("icon/32/clock.png");
  87     var i2 = new qx.ui.basic.Image("icon/32/colors.png");
  88
  89     i2.setResizeToInner(true);
  90
  91     var c1 = new qx.ui.basic.Label("Hello World");
  92     var c2 = new qx.ui.basic.Label("<ol><li>Simple HTML List</li><li>with one</li><li>and another item</li></ol>");
  93
  94     var a1 = new qx.ui.form.Button("Press", "icon/16/bell.png");
  95
  96
  97     flow1.add(w1, i1, w2, w3, a1, c2, w4, i2, w5, c1, w6);
  98
  99
 100
 101
 102
 103     w1.addEventListener("click", function(e) {
 104       this.setMaxWidth(this.getMaxWidth() == 50 ? null : 50);
 105     });
 106
 107     w2.addEventListener("click", function(e)
 108     {
 109       if (this.getWidth() == 200)
 110       {
 111         this.setWidth(100);
 112         this.setHeight(200);
 113       }
 114     else
 115       {
 116         this.setWidth(200);
 117         this.setHeight(50);
 118       };
 119     });
 120
 121     i1.addEventListener("click", function(e) {
 122       this.setSource(this.getSource() == "icon/32/clock.png" ? "icon/128/clock.png" : "icon/32/clock.png");
 123     });
 124
 125     i2.addEventListener("click", function(e)
 126     {
 127       this.setWidth(this.getWidth() == "auto" ? 128 : "auto");
 128       this.setHeight(this.getHeight() == "auto" ? 128 : "auto");
 129     });
 130
 131     c1.addEventListener("click", function(e) {
 132       this.setHtml(this.getHtml() == "Hello World" ? "Yeah, qooxdoo is great" : "Hello World");
 133     });
 134
 135
 136
 137
 138     // *************************************************************
 139
 140     var controlBox = new qx.ui.layout.VerticalBoxLayout;
 141
 142     controlBox.setLeft(20);
 143     controlBox.setBottom(48);
 144     controlBox.setRight(335);
 145     controlBox.setWidth(null);
 146     controlBox.setHeight("auto");
 147     controlBox.setBorder(qx.renderer.border.BorderPresets.getInstance().groove);
 148     controlBox.setSpacing(4);
 149     controlBox.setPadding(8);
 150
 151     d.add(controlBox);
 152
 153
 154
 155
 156     var cc0 = new qx.ui.basic.Label("Spacing: ");
 157     cc0.setWidth(50);
 158
 159     var bc0 = new qx.ui.form.Button("0x0", "icon/16/button-ok.png");
 160     var bc1 = new qx.ui.form.Button("4x4", "icon/16/button-ok.png");
 161     var bc2 = new qx.ui.form.Button("8x8", "icon/16/button-ok.png");
 162     var bc3 = new qx.ui.form.Button("20x20", "icon/16/button-ok.png");
 163     var bc4 = new qx.ui.form.Button("0x10", "icon/16/button-ok.png");
 164     var bc5 = new qx.ui.form.Button("10x0", "icon/16/button-ok.png");
 165
 166     bc0.addEventListener("execute", function(e) {
 167       flow1.setHorizontalSpacing(0);
 168       flow1.setVerticalSpacing(0);
 169     });
 170
 171     bc1.addEventListener("execute", function(e) {
 172       flow1.setHorizontalSpacing(4);
 173       flow1.setVerticalSpacing(4);
 174     });
 175
 176     bc2.addEventListener("execute", function(e) {
 177       flow1.setHorizontalSpacing(8);
 178       flow1.setVerticalSpacing(8);
 179     });
 180
 181     bc3.addEventListener("execute", function(e) {
 182       flow1.setHorizontalSpacing(20);
 183       flow1.setVerticalSpacing(20);
 184     });
 185
 186     bc4.addEventListener("execute", function(e) {
 187       flow1.setHorizontalSpacing(0);
 188       flow1.setVerticalSpacing(10);
 189     });
 190
 191     bc5.addEventListener("execute", function(e) {
 192       flow1.setHorizontalSpacing(10);
 193       flow1.setVerticalSpacing(0);
 194     });
 195
 196     var hc0 = new qx.ui.layout.HorizontalBoxLayout;
 197
 198     hc0.add(cc0, bc0, bc1, bc2, bc3, bc4, bc5);
 199     hc0.setVerticalChildrenAlign("middle");
 200     hc0.setHeight("auto");
 201
 202     controlBox.add(hc0);
 203
 204
 205
 206
 207
 208
 209     var cr0 = new qx.ui.basic.Label("Order: ");
 210     cr0.setWidth(50);
 211
 212     var br0 = new qx.ui.form.Button("Default", "icon/16/button-ok.png");
 213     var br1 = new qx.ui.form.Button("Reversed", "icon/16/button-ok.png");
 214
 215     br0.addEventListener("execute", function(e) {
 216       flow1.setReverseChildrenOrder(false);
 217     });
 218
 219     br1.addEventListener("execute", function(e) {
 220       flow1.setReverseChildrenOrder(true);
 221     });
 222
 223
 224
 225     var hc1 = new qx.ui.layout.HorizontalBoxLayout;
 226
 227     hc1.add(cr0, br0, br1);
 228     hc1.setVerticalChildrenAlign("middle");
 229     hc1.setHeight("auto");
 230
 231     controlBox.add(hc1);
 232
 233
 234
 235
 236
 237
 238
 239     var cr0 = new qx.ui.basic.Label("Align: ");
 240     cr0.setWidth(50);
 241
 242     var br0 = new qx.ui.form.Button("Top", "icon/16/button-ok.png");
 243     var br1 = new qx.ui.form.Button("Bottom", "icon/16/button-ok.png");
 244     var br2 = new qx.ui.form.Button("Left", "icon/16/button-ok.png");
 245     var br3 = new qx.ui.form.Button("Right", "icon/16/button-ok.png");
 246
 247     br0.addEventListener("execute", function(e) {
 248       flow1.setVerticalChildrenAlign(qx.constant.Layout.ALIGN_TOP);
 249     });
 250
 251     br1.addEventListener("execute", function(e) {
 252       flow1.setVerticalChildrenAlign(qx.constant.Layout.ALIGN_BOTTOM);
 253     });
 254
 255     br2.addEventListener("execute", function(e) {
 256       flow1.setHorizontalChildrenAlign(qx.constant.Layout.ALIGN_LEFT);
 257     });
 258
 259     br3.addEventListener("execute", function(e) {
 260       flow1.setHorizontalChildrenAlign(qx.constant.Layout.ALIGN_RIGHT);
 261     });
 262
 263
 264     var hc1 = new qx.ui.layout.HorizontalBoxLayout;
 265
 266     hc1.add(cr0, br0, br1, br2, br3);
 267     hc1.setVerticalChildrenAlign("middle");
 268     hc1.setHeight("auto");
 269
 270     controlBox.add(hc1);
 271
 272
 273
 274
 275
 276
 277
 278     var ca0 = new qx.ui.basic.Label("Children: ");
 279     ca0.setWidth(50);
 280
 281     var ba0 = new qx.ui.form.Button("New Atom", "icon/16/button-ok.png");
 282     var ba1 = new qx.ui.form.Button("New Image", "icon/16/button-ok.png");
 283     var ba2 = new qx.ui.form.Button("New Atom to #3", "icon/16/button-ok.png");
 284     var ba3 = new qx.ui.form.Button("New Image to #6", "icon/16/button-ok.png");
 285     var ba4 = new qx.ui.form.Button("Remove First", "icon/16/button-ok.png");
 286
 287     ba0.addEventListener("execute", function(e) {
 288       flow1.add(new qx.ui.basic.Atom("New Atom", "icon/16/services.png"));
 289     });
 290
 291     ba1.addEventListener("execute", function(e) {
 292       flow1.add(new qx.ui.basic.Image("icon/64/pipe.png"));
 293     });
 294
 295     ba2.addEventListener("execute", function(e) {
 296       flow1.addAt(new qx.ui.basic.Atom("New Atom", "icon/16/bell.png"), 3);
 297     });
 298
 299     ba3.addEventListener("execute", function(e) {
 300       flow1.addAt(new qx.ui.basic.Image("icon/64/vectorgraphics.png"), 6);
 301     });
 302
 303     ba4.addEventListener("execute", function(e) {
 304       flow1.remove(flow1.getFirstChild());
 305     });
 306
 307     var ha1 = new qx.ui.layout.HorizontalBoxLayout;
 308
 309     ha1.add(ca0, ba0, ba1, ba2, ba3, ba4);
 310     ha1.setVerticalChildrenAlign("middle");
 311     ha1.setHeight("auto");
 312
 313     controlBox.add(ha1);
 314
 315
 316   });
 317   </script>
 318 </body>
 319 </html>