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