swat/apps/qooxdoo-examples/test/VerticalBoxLayout_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="demoDescription">
  15     Tests for the new implementation of the qx.ui.layout.VerticalBoxLayout 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     var cl_white = new qx.renderer.color.Color("white");
  24     var cl_blue = new qx.renderer.color.Color("blue");
  25     var cl_yellow = new qx.renderer.color.Color("yellow");
  26     var cl_green = new qx.renderer.color.Color("green");
  27     var cl_orange = new qx.renderer.color.Color("orange");
  28     var cl_purple = new qx.renderer.color.Color("purple");
  29     var cl_aqua = new qx.renderer.color.Color("aqua");
  30     var cl_fuchsia = new qx.renderer.color.Color("fuchsia");
  31
  32     /* ***********************************************
  33
  34        EXAMPLE ONE:
  35        TOP ALIGN
  36
  37     *********************************************** */
  38
  39     var hbl1 = new qx.ui.layout.VerticalBoxLayout;
  40
  41     hbl1.setTop(48);
  42     hbl1.setLeft(20);
  43     hbl1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  44     hbl1.setWidth("auto");
  45     hbl1.setBottom(48);
  46
  47     hbl1.setSpacing(4);
  48     hbl1.setPadding(8);
  49
  50     hbl1.setHorizontalChildrenAlign("right");
  51
  52
  53     var w1_1 = new qx.ui.layout.CanvasLayout;
  54     w1_1.setHeight(25);
  55     w1_1.setWidth(25);
  56     w1_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  57     w1_1.setBackgroundColor(cl_white);
  58     // w1_1.setMaxWidth(40);
  59
  60     var w1_2 = new qx.ui.layout.CanvasLayout;
  61     w1_2.setHeight(25);
  62     w1_2.setWidth(25);
  63     w1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  64     w1_2.setBackgroundColor(cl_blue);
  65     w1_2.setRight(10);
  66
  67     var w1_3 = new qx.ui.layout.CanvasLayout;
  68     w1_3.setHeight(25);
  69     w1_3.setWidth("100%");
  70     w1_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  71     w1_3.setBackgroundColor(cl_yellow);
  72
  73     var w1_4 = new qx.ui.layout.CanvasLayout;
  74     w1_4.setHeight(25);
  75     w1_4.setWidth(25);
  76     w1_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  77     w1_4.setBackgroundColor(cl_green);
  78
  79     var w1_5 = new qx.ui.layout.CanvasLayout;
  80     w1_5.setHeight("15%");
  81     // w1_5.setWidth(25);
  82     w1_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  83     w1_5.setBackgroundColor(cl_orange);
  84
  85     var w1_6 = new qx.ui.layout.CanvasLayout;
  86     w1_6.setHeight(25);
  87     w1_6.setWidth(25);
  88     w1_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  89     w1_6.setBackgroundColor(cl_purple);
  90     w1_6.setLeft(15);
  91     w1_6.setTop(-25);
  92
  93     var w1_7 = new qx.ui.basic.Image("icon/32/clock.png");
  94
  95     var w1_8 = new qx.ui.basic.Image("icon/32/colors.png");
  96
  97     var w1_9 = new qx.ui.layout.CanvasLayout;
  98     w1_9.setHeight(25);
  99     w1_9.setWidth(25);
 100     w1_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 101     w1_9.setBackgroundColor(cl_aqua);
 102
 103     var w1_10 = new qx.ui.layout.CanvasLayout;
 104     w1_10.setHeight(25);
 105     w1_10.setWidth(25);
 106     w1_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 107     w1_10.setBackgroundColor(cl_fuchsia);
 108
 109     var hbl1_click = 0;
 110     hbl1.addEventListener("click", function(e)
 111     {
 112       if (e.getTarget()!=this) {
 113         return;
 114       };
 115
 116       switch(hbl1_click)
 117       {
 118         case 0:
 119           this.setWidth(30);
 120           break;
 121
 122         case 1:
 123           this.setWidth(80);
 124           break;
 125
 126         case 2:
 127           this.setWidth("auto");
 128           break;
 129
 130         case 3:
 131           this.setHeight(200);
 132           break;
 133
 134         case 4:
 135           this.setHeight(null);
 136           this.setBottom(48);
 137           hbl1_click = 0;
 138           return;
 139       };
 140
 141       hbl1_click++;
 142     });
 143
 144     w1_1.addEventListener("click", function(e)
 145     {
 146       if (this.getHeight() == 25)
 147       {
 148         this.setHeight(65);
 149         this.setWidth(65);
 150         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
 151       }
 152       else
 153       {
 154         this.setHeight(25);
 155         this.setWidth(25);
 156         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 157       };
 158     });
 159
 160     w1_2.addEventListener("click", function(e) {
 161       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
 162     });
 163
 164     w1_3.addEventListener("click", function(e) {
 165       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
 166     });
 167
 168     w1_4.addEventListener("click", function(e) {
 169       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
 170     });
 171
 172     w1_5.addEventListener("click", function(e) {
 173       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
 174     });
 175
 176     w1_6.addEventListener("click", function(e) {
 177       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
 178     });
 179
 180     w1_7.addEventListener("click", function(e) {
 181       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
 182     });
 183
 184     w1_8.addEventListener("click", function(e) {
 185       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
 186     });
 187
 188     w1_9.addEventListener("click", function(e)
 189     {
 190       if (this.getLeft() == null)
 191       {
 192         this.setLeft(20);
 193         this.setTop(-10);
 194       }
 195       else
 196       {
 197         this.setLeft(null);
 198         this.setTop(null);
 199       };
 200     });
 201
 202     w1_10.addEventListener("click", function(e)
 203     {
 204       if (this.getHeight() == 25)
 205       {
 206         this.setHeight(10);
 207         this.setWidth(10);
 208         this.setTop(-5);
 209         this.setRight(15);
 210       }
 211       else
 212       {
 213         this.setHeight(25);
 214         this.setWidth(25);
 215         this.setTop(null);
 216         this.setRight(null);
 217       };
 218     });
 219
 220
 221
 222     hbl1.add(w1_1, w1_2, w1_3, w1_4, w1_5, w1_6, w1_7, w1_8, w1_9, w1_10);
 223     d.add(hbl1);
 224
 225
 226
 227
 228
 229     /* ***********************************************
 230
 231        EXAMPLE TWO:
 232        BOTTOM ALIGN
 233
 234     *********************************************** */
 235
 236     var hbl2 = new qx.ui.layout.VerticalBoxLayout;
 237
 238     hbl2.setLeft(110);
 239     hbl2.setTop(48);
 240     hbl2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 241     hbl2.setWidth("auto");
 242     hbl2.setBottom(48);
 243
 244     hbl2.setSpacing(4);
 245     hbl2.setPadding(8);
 246
 247     hbl2.setVerticalChildrenAlign("bottom");
 248     hbl2.setHorizontalChildrenAlign("center");
 249
 250
 251     var w2_1 = new qx.ui.layout.CanvasLayout;
 252     w2_1.setHeight(25);
 253     w2_1.setWidth(25);
 254     w2_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 255     w2_1.setBackgroundColor(cl_white);
 256     // w2_1.setMaxWidth(40);
 257
 258     var w2_2 = new qx.ui.layout.CanvasLayout;
 259     w2_2.setHeight(25);
 260     w2_2.setWidth(25);
 261     w2_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 262     w2_2.setBackgroundColor(cl_blue);
 263     w2_2.setRight(10);
 264
 265     var w2_3 = new qx.ui.layout.CanvasLayout;
 266     w2_3.setHeight(25);
 267     w2_3.setWidth("100%");
 268     w2_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 269     w2_3.setBackgroundColor(cl_yellow);
 270
 271     var w2_4 = new qx.ui.layout.CanvasLayout;
 272     w2_4.setHeight(25);
 273     w2_4.setWidth(25);
 274     w2_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 275     w2_4.setBackgroundColor(cl_green);
 276
 277     var w2_5 = new qx.ui.layout.CanvasLayout;
 278     w2_5.setHeight("15%");
 279     // w2_5.setWidth(25);
 280     w2_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 281     w2_5.setBackgroundColor(cl_orange);
 282
 283     var w2_6 = new qx.ui.layout.CanvasLayout;
 284     w2_6.setHeight(25);
 285     w2_6.setWidth(25);
 286     w2_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 287     w2_6.setBackgroundColor(cl_purple);
 288     w2_6.setLeft(15);
 289     w2_6.setTop(-25);
 290
 291     var w2_7 = new qx.ui.basic.Image("icon/32/clock.png");
 292
 293     var w2_8 = new qx.ui.basic.Image("icon/32/colors.png");
 294
 295     var w2_9 = new qx.ui.layout.CanvasLayout;
 296     w2_9.setHeight(25);
 297     w2_9.setWidth(25);
 298     w2_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 299     w2_9.setBackgroundColor(cl_aqua);
 300
 301     var w2_10 = new qx.ui.layout.CanvasLayout;
 302     w2_10.setHeight(25);
 303     w2_10.setWidth(25);
 304     w2_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 305     w2_10.setBackgroundColor(cl_fuchsia);
 306     w2_10.foo = true;
 307
 308
 309     var hbl2_click = 0;
 310     hbl2.addEventListener("click", function(e)
 311     {
 312       if (e.getTarget()!=this) {
 313         return;
 314       };
 315
 316       switch(hbl2_click)
 317       {
 318         case 0:
 319           this.setWidth(30);
 320           break;
 321
 322         case 1:
 323           this.setWidth(80);
 324           break;
 325
 326         case 2:
 327           this.setWidth("auto");
 328           break;
 329
 330         case 3:
 331           this.setHeight(200);
 332           break;
 333
 334         case 4:
 335           this.setHeight(null);
 336           this.setBottom(48);
 337           hbl2_click = 0;
 338           return;
 339       };
 340
 341       hbl2_click++;
 342     });
 343
 344     w2_1.addEventListener("click", function(e)
 345     {
 346       if (this.getHeight() == 25)
 347       {
 348         this.setHeight(65);
 349         this.setWidth(65);
 350         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
 351       }
 352       else
 353       {
 354         this.setHeight(25);
 355         this.setWidth(25);
 356         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 357       };
 358     });
 359
 360     w2_2.addEventListener("click", function(e) {
 361       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
 362     });
 363
 364     w2_3.addEventListener("click", function(e) {
 365       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
 366     });
 367
 368     w2_4.addEventListener("click", function(e) {
 369       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
 370     });
 371
 372     w2_5.addEventListener("click", function(e) {
 373       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
 374     });
 375
 376     w2_6.addEventListener("click", function(e) {
 377       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
 378     });
 379
 380     w2_7.addEventListener("click", function(e) {
 381       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
 382     });
 383
 384     w2_8.addEventListener("click", function(e) {
 385       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
 386     });
 387
 388     w2_9.addEventListener("click", function(e)
 389     {
 390       if (this.getLeft() == null)
 391       {
 392         this.setLeft(20);
 393         this.setTop(-10);
 394       }
 395       else
 396       {
 397         this.setLeft(null);
 398         this.setTop(null);
 399       };
 400     });
 401
 402     w2_10.addEventListener("click", function(e)
 403     {
 404       if (this.getHeight() == 25)
 405       {
 406         this.setHeight(10);
 407         this.setWidth(10);
 408         this.setTop(-5);
 409         this.setRight(15);
 410       }
 411       else
 412       {
 413         this.setHeight(25);
 414         this.setWidth(25);
 415         this.setTop(null);
 416         this.setRight(null);
 417       };
 418     });
 419
 420
 421
 422     hbl2.add(w2_1, w2_2, w2_3, w2_4, w2_5, w2_6, w2_7, w2_8, w2_9, w2_10);
 423     d.add(hbl2);
 424
 425
 426     /* ***********************************************
 427
 428        EXAMPLE THREE:
 429        CENTER ALIGN
 430
 431     *********************************************** */
 432
 433     var hbl3 = new qx.ui.layout.VerticalBoxLayout;
 434
 435     hbl3.setLeft(200);
 436     hbl3.setTop(48);
 437     hbl3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 438     hbl3.setWidth("auto");
 439     hbl3.setBottom(48);
 440
 441     hbl3.setSpacing(4);
 442     hbl3.setPadding(8);
 443
 444     hbl3.setVerticalChildrenAlign("middle");
 445
 446
 447
 448     var w3_1 = new qx.ui.layout.CanvasLayout;
 449     w3_1.setHeight(25);
 450     w3_1.setWidth(25);
 451     w3_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 452     w3_1.setBackgroundColor(cl_white);
 453     // w3_1.setMaxWidth(40);
 454
 455     var w3_2 = new qx.ui.layout.CanvasLayout;
 456     w3_2.setHeight(25);
 457     w3_2.setWidth(25);
 458     w3_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 459     w3_2.setBackgroundColor(cl_blue);
 460     w3_2.setRight(10);
 461
 462     var w3_3 = new qx.ui.layout.CanvasLayout;
 463     w3_3.setHeight(25);
 464     w3_3.setWidth("100%");
 465     w3_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 466     w3_3.setBackgroundColor(cl_yellow);
 467
 468     var w3_4 = new qx.ui.layout.CanvasLayout;
 469     w3_4.setHeight(25);
 470     w3_4.setWidth(25);
 471     w3_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 472     w3_4.setBackgroundColor(cl_green);
 473
 474     var w3_5 = new qx.ui.layout.CanvasLayout;
 475     w3_5.setHeight("15%");
 476     // w3_5.setWidth(25);
 477     w3_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 478     w3_5.setBackgroundColor(cl_orange);
 479
 480     var w3_6 = new qx.ui.layout.CanvasLayout;
 481     w3_6.setHeight(25);
 482     w3_6.setWidth(25);
 483     w3_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 484     w3_6.setBackgroundColor(cl_purple);
 485     w3_6.setLeft(15);
 486     w3_6.setTop(-25);
 487
 488     var w3_7 = new qx.ui.basic.Image("icon/32/clock.png");
 489
 490     var w3_8 = new qx.ui.basic.Image("icon/32/colors.png");
 491
 492     var w3_9 = new qx.ui.layout.CanvasLayout;
 493     w3_9.setHeight(25);
 494     w3_9.setWidth(25);
 495     w3_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 496     w3_9.setBackgroundColor(cl_aqua);
 497
 498     var w3_10 = new qx.ui.layout.CanvasLayout;
 499     w3_10.setHeight(25);
 500     w3_10.setWidth(25);
 501     w3_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 502     w3_10.setBackgroundColor(cl_fuchsia);
 503
 504
 505     var hbl3_click = 0;
 506     hbl3.addEventListener("click", function(e)
 507     {
 508       if (e.getTarget()!=this) {
 509         return;
 510       };
 511
 512       switch(hbl3_click)
 513       {
 514         case 0:
 515           this.setWidth(30);
 516           break;
 517
 518         case 1:
 519           this.setWidth(80);
 520           break;
 521
 522         case 2:
 523           this.setWidth("auto");
 524           break;
 525
 526         case 3:
 527           this.setHeight(200);
 528           break;
 529
 530         case 4:
 531           this.setHeight(null);
 532           this.setBottom(48);
 533           hbl3_click = 0;
 534           return;
 535       };
 536
 537       hbl3_click++;
 538     });
 539
 540     w3_1.addEventListener("click", function(e)
 541     {
 542       if (this.getHeight() == 25)
 543       {
 544         this.setHeight(65);
 545         this.setWidth(65);
 546         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
 547       }
 548       else
 549       {
 550         this.setHeight(25);
 551         this.setWidth(25);
 552         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 553       };
 554     });
 555
 556     w3_2.addEventListener("click", function(e) {
 557       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
 558     });
 559
 560     w3_3.addEventListener("click", function(e) {
 561       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
 562     });
 563
 564     w3_4.addEventListener("click", function(e) {
 565       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
 566     });
 567
 568     w3_5.addEventListener("click", function(e) {
 569       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
 570     });
 571
 572     w3_6.addEventListener("click", function(e) {
 573       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
 574     });
 575
 576     w3_7.addEventListener("click", function(e) {
 577       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
 578     });
 579
 580     w3_8.addEventListener("click", function(e) {
 581       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
 582     });
 583
 584     w3_9.addEventListener("click", function(e)
 585     {
 586       if (this.getLeft() == null)
 587       {
 588         this.setLeft(20);
 589         this.setTop(-10);
 590       }
 591       else
 592       {
 593         this.setLeft(null);
 594         this.setTop(null);
 595       };
 596     });
 597
 598     w3_10.addEventListener("click", function(e)
 599     {
 600       if (this.getHeight() == 25)
 601       {
 602         this.setHeight(10);
 603         this.setWidth(10);
 604         this.setTop(-5);
 605         this.setRight(15);
 606       }
 607       else
 608       {
 609         this.setHeight(25);
 610         this.setWidth(25);
 611         this.setTop(null);
 612         this.setRight(null);
 613       };
 614     });
 615
 616
 617
 618     hbl3.add(w3_1, w3_2, w3_3, w3_4, w3_5, w3_6, w3_7, w3_8, w3_9, w3_10);
 619     d.add(hbl3);
 620
 621
 622
 623
 624     /* ***********************************************
 625
 626        EXAMPLE FOUR:
 627        TOP ALIGN, REVERTED CHILDREN ORDER
 628
 629     *********************************************** */
 630
 631     var hbl4 = new qx.ui.layout.VerticalBoxLayout;
 632
 633     hbl4.setLeft(290);
 634     hbl4.setTop(48);
 635     hbl4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 636     hbl4.setHeight(null);
 637     hbl4.setBottom(48);
 638
 639     hbl4.setSpacing(4);
 640     hbl4.setPadding(8);
 641     hbl4.setReverseChildrenOrder(true);
 642     hbl4.setHorizontalChildrenAlign("right");
 643
 644     hbl4.setWidth(80);
 645
 646
 647
 648     var w4_1 = new qx.ui.layout.CanvasLayout;
 649     w4_1.setHeight(25);
 650     w4_1.setWidth(25);
 651     w4_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 652     w4_1.setBackgroundColor(cl_white);
 653     // w4_1.setMaxWidth(40);
 654
 655     var w4_2 = new qx.ui.layout.CanvasLayout;
 656     w4_2.setHeight(25);
 657     w4_2.setWidth(25);
 658     w4_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 659     w4_2.setBackgroundColor(cl_blue);
 660     w4_2.setRight(10);
 661
 662     var w4_3 = new qx.ui.layout.CanvasLayout;
 663     w4_3.setHeight(25);
 664     w4_3.setWidth("100%");
 665     w4_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 666     w4_3.setBackgroundColor(cl_yellow);
 667
 668     var w4_4 = new qx.ui.layout.CanvasLayout;
 669     w4_4.setHeight(25);
 670     w4_4.setWidth(25);
 671     w4_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 672     w4_4.setBackgroundColor(cl_green);
 673
 674     var w4_5 = new qx.ui.layout.CanvasLayout;
 675     w4_5.setHeight("15%");
 676     // w4_5.setWidth(25);
 677     w4_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 678     w4_5.setBackgroundColor(cl_orange);
 679
 680     var w4_6 = new qx.ui.layout.CanvasLayout;
 681     w4_6.setHeight(25);
 682     w4_6.setWidth(25);
 683     w4_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 684     w4_6.setBackgroundColor(cl_purple);
 685     w4_6.setLeft(15);
 686     w4_6.setTop(-25);
 687
 688     var w4_7 = new qx.ui.basic.Image("icon/32/clock.png");
 689
 690     var w4_8 = new qx.ui.basic.Image("icon/32/colors.png");
 691
 692     var w4_9 = new qx.ui.layout.CanvasLayout;
 693     w4_9.setHeight(25);
 694     w4_9.setWidth(25);
 695     w4_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 696     w4_9.setBackgroundColor(cl_aqua);
 697
 698     var w4_10 = new qx.ui.layout.CanvasLayout;
 699     w4_10.setHeight(25);
 700     w4_10.setWidth(25);
 701     w4_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 702     w4_10.setBackgroundColor(cl_fuchsia);
 703
 704
 705     var hbl4_click = 0;
 706     hbl4.addEventListener("click", function(e)
 707     {
 708       if (e.getTarget()!=this) {
 709         return;
 710       };
 711
 712       switch(hbl4_click)
 713       {
 714         case 0:
 715           this.setWidth(30);
 716           break;
 717
 718         case 1:
 719           this.setWidth("auto");
 720           break;
 721
 722         case 2:
 723           this.setWidth(80);
 724           break;
 725
 726         case 3:
 727           this.setHeight(200);
 728           break;
 729
 730         case 4:
 731           this.setHeight(null);
 732           this.setBottom(48);
 733           hbl4_click = 0;
 734           return;
 735       };
 736
 737       hbl4_click++;
 738     });
 739
 740     w4_1.addEventListener("click", function(e)
 741     {
 742       if (this.getHeight() == 25)
 743       {
 744         this.setHeight(65);
 745         this.setWidth(65);
 746         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
 747       }
 748       else
 749       {
 750         this.setHeight(25);
 751         this.setWidth(25);
 752         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 753       };
 754     });
 755
 756     w4_2.addEventListener("click", function(e) {
 757       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
 758     });
 759
 760     w4_3.addEventListener("click", function(e) {
 761       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
 762     });
 763
 764     w4_4.addEventListener("click", function(e) {
 765       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
 766     });
 767
 768     w4_5.addEventListener("click", function(e) {
 769       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
 770     });
 771
 772     w4_6.addEventListener("click", function(e) {
 773       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
 774     });
 775
 776     w4_7.addEventListener("click", function(e) {
 777       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
 778     });
 779
 780     w4_8.addEventListener("click", function(e) {
 781       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
 782     });
 783
 784     w4_9.addEventListener("click", function(e)
 785     {
 786       if (this.getLeft() == null)
 787       {
 788         this.setLeft(20);
 789         this.setTop(-10);
 790       }
 791       else
 792       {
 793         this.setLeft(null);
 794         this.setTop(null);
 795       };
 796     });
 797
 798     w4_10.addEventListener("click", function(e)
 799     {
 800       if (this.getHeight() == 25)
 801       {
 802         this.setHeight(10);
 803         this.setWidth(10);
 804         this.setTop(-5);
 805         this.setRight(15);
 806       }
 807       else
 808       {
 809         this.setHeight(25);
 810         this.setWidth(25);
 811         this.setTop(null);
 812         this.setRight(null);
 813       };
 814     });
 815
 816
 817
 818     hbl4.add(w4_1, w4_2, w4_3, w4_4, w4_5, w4_6, w4_7, w4_8, w4_9, w4_10);
 819     d.add(hbl4);
 820
 821
 822
 823
 824     /* ***********************************************
 825
 826        EXAMPLE FIVE:
 827        BOTTOM ALIGN, REVERTED CHILDREN ORDER
 828
 829     *********************************************** */
 830
 831     var hbl5 = new qx.ui.layout.VerticalBoxLayout;
 832
 833     hbl5.setLeft(380);
 834     hbl5.setTop(48);
 835     hbl5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 836     hbl5.setHeight(null);
 837     hbl5.setBottom(48);
 838
 839     hbl5.setSpacing(4);
 840     hbl5.setPadding(8);
 841
 842     hbl5.setVerticalChildrenAlign("bottom");
 843     hbl5.setReverseChildrenOrder(true);
 844     hbl5.setHorizontalChildrenAlign("center");
 845
 846     hbl5.setWidth(80);
 847
 848
 849     var w5_1 = new qx.ui.layout.CanvasLayout;
 850     w5_1.setHeight(25);
 851     w5_1.setWidth(25);
 852     w5_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 853     w5_1.setBackgroundColor(cl_white);
 854     // w5_1.setMaxWidth(40);
 855
 856     var w5_2 = new qx.ui.layout.CanvasLayout;
 857     w5_2.setHeight(25);
 858     w5_2.setWidth(25);
 859     w5_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 860     w5_2.setBackgroundColor(cl_blue);
 861     w5_2.setRight(10);
 862
 863     var w5_3 = new qx.ui.layout.CanvasLayout;
 864     w5_3.setHeight(25);
 865     w5_3.setWidth("100%");
 866     w5_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 867     w5_3.setBackgroundColor(cl_yellow);
 868
 869     var w5_4 = new qx.ui.layout.CanvasLayout;
 870     w5_4.setHeight(25);
 871     w5_4.setWidth(25);
 872     w5_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 873     w5_4.setBackgroundColor(cl_green);
 874
 875     var w5_5 = new qx.ui.layout.CanvasLayout;
 876     w5_5.setHeight("15%");
 877     // w5_5.setWidth(25);
 878     w5_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 879     w5_5.setBackgroundColor(cl_orange);
 880
 881     var w5_6 = new qx.ui.layout.CanvasLayout;
 882     w5_6.setHeight(25);
 883     w5_6.setWidth(25);
 884     w5_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 885     w5_6.setBackgroundColor(cl_purple);
 886     w5_6.setLeft(15);
 887     w5_6.setTop(-25);
 888
 889     var w5_7 = new qx.ui.basic.Image("icon/32/clock.png");
 890
 891     var w5_8 = new qx.ui.basic.Image("icon/32/colors.png");
 892
 893     var w5_9 = new qx.ui.layout.CanvasLayout;
 894     w5_9.setHeight(25);
 895     w5_9.setWidth(25);
 896     w5_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 897     w5_9.setBackgroundColor(cl_aqua);
 898
 899     var w5_10 = new qx.ui.layout.CanvasLayout;
 900     w5_10.setHeight(25);
 901     w5_10.setWidth(25);
 902     w5_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 903     w5_10.setBackgroundColor(cl_fuchsia);
 904
 905
 906     var hbl5_click = 0;
 907     hbl5.addEventListener("click", function(e)
 908     {
 909       if (e.getTarget()!=this) {
 910         return;
 911       };
 912
 913       switch(hbl5_click)
 914       {
 915         case 0:
 916           this.setWidth(30);
 917           break;
 918
 919         case 1:
 920           this.setWidth("auto");
 921           break;
 922
 923         case 2:
 924           this.setWidth(80);
 925           break;
 926
 927         case 3:
 928           this.setHeight(200);
 929           break;
 930
 931         case 4:
 932           this.setHeight(null);
 933           this.setBottom(48);
 934           hbl5_click = 0;
 935           return;
 936       };
 937
 938       hbl5_click++;
 939     });
 940
 941     w5_1.addEventListener("click", function(e)
 942     {
 943       if (this.getHeight() == 25)
 944       {
 945         this.setHeight(65);
 946         this.setWidth(65);
 947         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
 948       }
 949       else
 950       {
 951         this.setHeight(25);
 952         this.setWidth(25);
 953         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 954       };
 955     });
 956
 957     w5_2.addEventListener("click", function(e) {
 958       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
 959     });
 960
 961     w5_3.addEventListener("click", function(e) {
 962       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
 963     });
 964
 965     w5_4.addEventListener("click", function(e) {
 966       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
 967     });
 968
 969     w5_5.addEventListener("click", function(e) {
 970       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
 971     });
 972
 973     w5_6.addEventListener("click", function(e) {
 974       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
 975     });
 976
 977     w5_7.addEventListener("click", function(e) {
 978       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
 979     });
 980
 981     w5_8.addEventListener("click", function(e) {
 982       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
 983     });
 984
 985     w5_9.addEventListener("click", function(e)
 986     {
 987       if (this.getLeft() == null)
 988       {
 989         this.setLeft(20);
 990         this.setTop(-10);
 991       }
 992       else
 993       {
 994         this.setLeft(null);
 995         this.setTop(null);
 996       };
 997     });
 998
 999     w5_10.addEventListener("click", function(e)
1000     {
1001       if (this.getHeight() == 25)
1002       {
1003         this.setHeight(10);
1004         this.setWidth(10);
1005         this.setTop(-5);
1006         this.setRight(15);
1007       }
1008       else
1009       {
1010         this.setHeight(25);
1011         this.setWidth(25);
1012         this.setTop(null);
1013         this.setRight(null);
1014       };
1015     });
1016
1017
1018
1019     hbl5.add(w5_1, w5_2, w5_3, w5_4, w5_5, w5_6, w5_7, w5_8, w5_9, w5_10);
1020     d.add(hbl5);
1021
1022
1023
1024
1025
1026
1027
1028
1029     /* ***********************************************
1030
1031        EXAMPLE SIX:
1032        CENTER ALIGN, REVERTED CHILDREN ORDER
1033
1034     *********************************************** */
1035
1036     var hbl6 = new qx.ui.layout.VerticalBoxLayout;
1037
1038     hbl6.setLeft(470);
1039     hbl6.setTop(48);
1040     hbl6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
1041     hbl6.setHeight(null);
1042     hbl6.setBottom(48);
1043
1044     hbl6.setSpacing(4);
1045     hbl6.setPadding(8);
1046
1047     hbl6.setVerticalChildrenAlign("middle");
1048     hbl6.setReverseChildrenOrder(true);
1049     hbl6.setWidth(80);
1050
1051
1052     var w6_1 = new qx.ui.layout.CanvasLayout;
1053     w6_1.setHeight(25);
1054     w6_1.setWidth(25);
1055     w6_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1056     w6_1.setBackgroundColor(cl_white);
1057     // w6_1.setMaxWidth(40);
1058
1059     var w6_2 = new qx.ui.layout.CanvasLayout;
1060     w6_2.setHeight(25);
1061     w6_2.setWidth(25);
1062     w6_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1063     w6_2.setBackgroundColor(cl_blue);
1064     w6_2.setRight(10);
1065
1066     var w6_3 = new qx.ui.layout.CanvasLayout;
1067     w6_3.setHeight(25);
1068     w6_3.setWidth("100%");
1069     w6_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1070     w6_3.setBackgroundColor(cl_yellow);
1071
1072     var w6_4 = new qx.ui.layout.CanvasLayout;
1073     w6_4.setHeight(25);
1074     w6_4.setWidth(25);
1075     w6_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1076     w6_4.setBackgroundColor(cl_green);
1077
1078     var w6_5 = new qx.ui.layout.CanvasLayout;
1079     w6_5.setHeight("15%");
1080     // w6_5.setWidth(25);
1081     w6_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1082     w6_5.setBackgroundColor(cl_orange);
1083
1084     var w6_6 = new qx.ui.layout.CanvasLayout;
1085     w6_6.setHeight(25);
1086     w6_6.setWidth(25);
1087     w6_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1088     w6_6.setBackgroundColor(cl_purple);
1089     w6_6.setLeft(15);
1090     w6_6.setTop(-25);
1091
1092     var w6_7 = new qx.ui.basic.Image("icon/32/clock.png");
1093
1094     var w6_8 = new qx.ui.basic.Image("icon/32/colors.png");
1095
1096     var w6_9 = new qx.ui.layout.CanvasLayout;
1097     w6_9.setHeight(25);
1098     w6_9.setWidth(25);
1099     w6_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1100     w6_9.setBackgroundColor(cl_aqua);
1101
1102     var w6_10 = new qx.ui.layout.CanvasLayout;
1103     w6_10.setHeight(25);
1104     w6_10.setWidth(25);
1105     w6_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1106     w6_10.setBackgroundColor(cl_fuchsia);
1107
1108
1109     var hbl6_click = 0;
1110     hbl6.addEventListener("click", function(e)
1111     {
1112       if (e.getTarget()!=this) {
1113         return;
1114       };
1115
1116       switch(hbl6_click)
1117       {
1118         case 0:
1119           this.setWidth(30);
1120           break;
1121
1122         case 1:
1123           this.setWidth("auto");
1124           break;
1125
1126         case 2:
1127           this.setWidth(80);
1128           break;
1129
1130         case 3:
1131           this.setHeight(200);
1132           break;
1133
1134         case 4:
1135           this.setHeight(null);
1136           this.setBottom(48);
1137           hbl6_click = 0;
1138           return;
1139       };
1140
1141       hbl6_click++;
1142     });
1143
1144     w6_1.addEventListener("click", function(e)
1145     {
1146       if (this.getHeight() == 25)
1147       {
1148         this.setHeight(65);
1149         this.setWidth(65);
1150         this.setBorder(new qx.renderer.border.Border(6, "double", "black"));
1151       }
1152       else
1153       {
1154         this.setHeight(25);
1155         this.setWidth(25);
1156         this.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
1157       };
1158     });
1159
1160     w6_2.addEventListener("click", function(e) {
1161       this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0);
1162     });
1163
1164     w6_3.addEventListener("click", function(e) {
1165       this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity);
1166     });
1167
1168     w6_4.addEventListener("click", function(e) {
1169       this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25);
1170     });
1171
1172     w6_5.addEventListener("click", function(e) {
1173       this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40);
1174     });
1175
1176     w6_6.addEventListener("click", function(e) {
1177       this.getTop() == -25 ? this.setTop(25) : this.setTop(-25);
1178     });
1179
1180     w6_7.addEventListener("click", function(e) {
1181       this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png");
1182     });
1183
1184     w6_8.addEventListener("click", function(e) {
1185       this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png");
1186     });
1187
1188     w6_9.addEventListener("click", function(e)
1189     {
1190       if (this.getLeft() == null)
1191       {
1192         this.setLeft(20);
1193         this.setTop(-10);
1194       }
1195       else
1196       {
1197         this.setLeft(null);
1198         this.setTop(null);
1199       };
1200     });
1201
1202     w6_10.addEventListener("click", function(e)
1203     {
1204       if (this.getHeight() == 25)
1205       {
1206         this.setHeight(10);
1207         this.setWidth(10);
1208         this.setTop(-5);
1209         this.setRight(15);
1210       }
1211       else
1212       {
1213         this.setHeight(25);
1214         this.setWidth(25);
1215         this.setTop(null);
1216         this.setRight(null);
1217       };
1218     });
1219
1220
1221
1222     hbl6.add(w6_1, w6_2, w6_3, w6_4, w6_5, w6_6, w6_7, w6_8, w6_9, w6_10);
1223     d.add(hbl6);
1224   });
1225   </script>
1226 </body>
1227 </html>