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