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