swat.obsolete/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.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.<br/>
  16     <br/>
  17     1. Simple testing, one static and one flex child<br/>
  18     2. Two flex children with the same priority<br/>
  19     3. The same as #2, but the second has the doubled priority compared to the first<br/>
  20     <br/>
  21
  22     4. The same as #3, but now the second child has a max-width of 50px<br/>
  23     5. The same as #4, but now with enabled "advancedFlexAllocation"<br/>
  24     <br/>
  25
  26     6. The same as #3, but now the second has a min width of 500px<br/>
  27     7. The same as #6, but now with enabled "advancedFlexAllocation"<br/>
  28     <br/>
  29
  30     8. Three children with the priorities: 1, 2 and 3. The second has a maxWidth of 50px<br/>
  31     9. The same as #8, but now with enabled "advancedFlexAllocation"<br/>
  32     <br/>
  33
  34     10. Three children with the priorities: 1, 2 and 3. Added a few mouse actions.<br/>
  35     11. Three children with the priorities: 1, a static width of 80px and 3.<br/>
  36     12. The same as #11, but configured as 'auto' width.<br/>
  37     <br/>
  38
  39     13. Test for more complex child widgets. Seems to work without problems.
  40   </div>
  41
  42   <script type="text/javascript">
  43   qx.core.Init.getInstance().defineMain(function()
  44   {
  45     var d = qx.ui.core.ClientDocument.getInstance();
  46
  47
  48     /* ***********************************************
  49
  50        EXAMPLE 1:
  51
  52     *********************************************** */
  53
  54     var te1 = new qx.ui.basic.Label("#1");
  55     te1.setLocation(20, 48);
  56     d.add(te1);
  57
  58     var hbl1 = new qx.ui.layout.HorizontalBoxLayout;
  59     hbl1.setLeft(50);
  60     hbl1.setTop(48);
  61     hbl1.setRight(335);
  62     hbl1.setWidth(null);
  63     hbl1.setHeight("auto");
  64     hbl1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
  65     hbl1.setSpacing(4);
  66     hbl1.setPadding(2);
  67     d.add(hbl1);
  68
  69     var t1_1 = new qx.ui.basic.Terminator;
  70     t1_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  71     t1_1.setWidth(20);
  72     t1_1.setHeight(10);
  73     t1_1.setBackgroundColor("green");
  74     hbl1.add(t1_1);
  75
  76     t1_1.addEventListener("click", function() {
  77       this.setWidth(this.getWidth() == 20 ? 100 : 20);
  78     });
  79
  80     var t1_2 = new qx.ui.basic.Terminator;
  81     t1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  82     t1_2.setWidth(qx.constant.Core.FLEX);
  83     t1_2.setHeight(10);
  84     t1_2.setBackgroundColor("blue");
  85     hbl1.add(t1_2);
  86
  87
  88
  89
  90     /* ***********************************************
  91
  92        EXAMPLE 2:
  93
  94     *********************************************** */
  95
  96     var te2 = new qx.ui.basic.Label("#2");
  97     te2.setLocation(20, 68);
  98     d.add(te2);
  99
 100     var hbl2 = new qx.ui.layout.HorizontalBoxLayout;
 101     hbl2.setLeft(50);
 102     hbl2.setTop(68);
 103     hbl2.setRight(335);
 104     hbl2.setWidth(null);
 105     hbl2.setHeight("auto");
 106     hbl2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 107     hbl2.setSpacing(4);
 108     hbl2.setPadding(2);
 109     d.add(hbl2);
 110
 111     var t2_1 = new qx.ui.basic.Terminator;
 112     t2_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 113     t2_1.setWidth(qx.constant.Core.FLEX);
 114     t2_1.setHeight(10);
 115     t2_1.setBackgroundColor("green");
 116     hbl2.add(t2_1);
 117
 118     var t2_2 = new qx.ui.basic.Terminator;
 119     t2_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 120     t2_2.setWidth(qx.constant.Core.FLEX);
 121     t2_2.setHeight(10);
 122     t2_2.setBackgroundColor("blue");
 123     hbl2.add(t2_2);
 124
 125
 126
 127
 128
 129
 130     /* ***********************************************
 131
 132        EXAMPLE 3:
 133
 134     *********************************************** */
 135
 136     var te3 = new qx.ui.basic.Label("#3");
 137     te3.setLocation(20, 88);
 138     d.add(te3);
 139
 140     var hbl3 = new qx.ui.layout.HorizontalBoxLayout;
 141     hbl3.setLeft(50);
 142     hbl3.setTop(88);
 143     hbl3.setRight(335);
 144     hbl3.setWidth(null);
 145     hbl3.setHeight("auto");
 146     hbl3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 147     hbl3.setSpacing(4);
 148     hbl3.setPadding(2);
 149     d.add(hbl3);
 150
 151     var t3_1 = new qx.ui.basic.Terminator;
 152     t3_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 153     t3_1.setWidth(qx.constant.Core.FLEX);
 154     t3_1.setHeight(10);
 155     t3_1.setBackgroundColor("green");
 156     hbl3.add(t3_1);
 157
 158     var t3_2 = new qx.ui.basic.Terminator;
 159     t3_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 160     t3_2.setWidth("2*");
 161     t3_2.setHeight(10);
 162     t3_2.setBackgroundColor("blue");
 163     hbl3.add(t3_2);
 164
 165
 166
 167
 168     /* ***********************************************
 169
 170        EXAMPLE 4:
 171
 172     *********************************************** */
 173
 174     var te4 = new qx.ui.basic.Label("#4");
 175     te4.setLocation(20, 128);
 176     d.add(te4);
 177
 178     var hbl4 = new qx.ui.layout.HorizontalBoxLayout;
 179     hbl4.setLeft(50);
 180     hbl4.setTop(128);
 181     hbl4.setRight(335);
 182     hbl4.setWidth(null);
 183     hbl4.setHeight("auto");
 184     hbl4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 185     hbl4.setSpacing(4);
 186     hbl4.setPadding(2);
 187     d.add(hbl4);
 188
 189     var t4_1 = new qx.ui.basic.Terminator;
 190     t4_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 191     t4_1.setWidth(qx.constant.Core.FLEX);
 192     t4_1.setHeight(10);
 193     t4_1.setBackgroundColor("green");
 194     hbl4.add(t4_1);
 195
 196     var t4_2 = new qx.ui.basic.Terminator;
 197     t4_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 198     t4_2.setWidth("2*");
 199     t4_2.setHeight(10);
 200     t4_2.setMaxWidth(50);
 201     t4_2.setBackgroundColor("blue");
 202     hbl4.add(t4_2);
 203
 204
 205
 206
 207     /* ***********************************************
 208
 209        EXAMPLE 5:
 210
 211     *********************************************** */
 212
 213     var te5 = new qx.ui.basic.Label("#5");
 214     te5.setLocation(20, 148);
 215     d.add(te5);
 216
 217     var hbl5 = new qx.ui.layout.HorizontalBoxLayout;
 218     hbl5.setLeft(50);
 219     hbl5.setTop(148);
 220     hbl5.setRight(335);
 221     hbl5.setWidth(null);
 222     hbl5.setHeight("auto");
 223     hbl5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 224     hbl5.setSpacing(4);
 225     hbl5.setPadding(2);
 226     hbl5.setUseAdvancedFlexAllocation(true);
 227     d.add(hbl5);
 228
 229     var t5_1 = new qx.ui.basic.Terminator;
 230     t5_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 231     t5_1.setWidth(qx.constant.Core.FLEX);
 232     t5_1.setHeight(10);
 233     t5_1.setBackgroundColor("green");
 234     hbl5.add(t5_1);
 235
 236     var t5_2 = new qx.ui.basic.Terminator;
 237     t5_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 238     t5_2.setWidth("2*");
 239     t5_2.setHeight(10);
 240     t5_2.setMaxWidth(50);
 241     t5_2.setBackgroundColor("blue");
 242     hbl5.add(t5_2);
 243
 244
 245
 246
 247     /* ***********************************************
 248
 249        EXAMPLE 6:
 250
 251     *********************************************** */
 252
 253     var te6 = new qx.ui.basic.Label("#6");
 254     te6.setLocation(20, 188);
 255     d.add(te6);
 256
 257     var hbl6 = new qx.ui.layout.HorizontalBoxLayout;
 258     hbl6.setLeft(50);
 259     hbl6.setTop(188);
 260     hbl6.setRight(335);
 261     hbl6.setWidth(null);
 262     hbl6.setHeight("auto");
 263     hbl6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 264     hbl6.setSpacing(4);
 265     hbl6.setPadding(2);
 266     d.add(hbl6);
 267
 268     var t6_1 = new qx.ui.basic.Terminator;
 269     t6_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 270     t6_1.setWidth(qx.constant.Core.FLEX);
 271     t6_1.setHeight(10);
 272     t6_1.setBackgroundColor("green");
 273     hbl6.add(t6_1);
 274
 275     var t6_2 = new qx.ui.basic.Terminator;
 276     t6_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 277     t6_2.setWidth("2*");
 278     t6_2.setHeight(10);
 279     t6_2.setMinWidth(500);
 280     t6_2.setBackgroundColor("blue");
 281     hbl6.add(t6_2);
 282
 283
 284
 285
 286     /* ***********************************************
 287
 288        EXAMPLE 7:
 289
 290     *********************************************** */
 291
 292     var te7 = new qx.ui.basic.Label("#7");
 293     te7.setLocation(20, 208);
 294     d.add(te7);
 295
 296     var hbl7 = new qx.ui.layout.HorizontalBoxLayout;
 297     hbl7.setLeft(50);
 298     hbl7.setTop(208);
 299     hbl7.setRight(335);
 300     hbl7.setWidth(null);
 301     hbl7.setHeight("auto");
 302     hbl7.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 303     hbl7.setSpacing(4);
 304     hbl7.setPadding(2);
 305     hbl7.setUseAdvancedFlexAllocation(true);
 306     d.add(hbl7);
 307
 308     var t7_1 = new qx.ui.basic.Terminator;
 309     t7_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 310     t7_1.setWidth(qx.constant.Core.FLEX);
 311     t7_1.setHeight(10);
 312     t7_1.setBackgroundColor("green");
 313     hbl7.add(t7_1);
 314
 315     var t7_2 = new qx.ui.basic.Terminator;
 316     t7_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 317     t7_2.setWidth("2*");
 318     t7_2.setHeight(10);
 319     t7_2.setMinWidth(500);
 320     t7_2.setBackgroundColor("blue");
 321     hbl7.add(t7_2);
 322
 323
 324
 325
 326     /* ***********************************************
 327
 328        EXAMPLE 8:
 329
 330     *********************************************** */
 331
 332     var te8 = new qx.ui.basic.Label("#8");
 333     te8.setLocation(20, 248);
 334     d.add(te8);
 335
 336     var hbl8 = new qx.ui.layout.HorizontalBoxLayout;
 337     hbl8.setLeft(50);
 338     hbl8.setTop(248);
 339     hbl8.setRight(335);
 340     hbl8.setWidth(null);
 341     hbl8.setHeight("auto");
 342     hbl8.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 343     hbl8.setSpacing(4);
 344     hbl8.setPadding(2);
 345     d.add(hbl8);
 346
 347     var t8_1 = new qx.ui.basic.Terminator;
 348     t8_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 349     t8_1.setWidth(qx.constant.Core.FLEX);
 350     t8_1.setHeight(10);
 351     t8_1.setBackgroundColor("green");
 352     hbl8.add(t8_1);
 353
 354     var t8_2 = new qx.ui.basic.Terminator;
 355     t8_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 356     t8_2.setWidth("2*");
 357     t8_2.setHeight(10);
 358     t8_2.setBackgroundColor("blue");
 359     t8_2.setMaxWidth(50);
 360     hbl8.add(t8_2);
 361
 362     var t8_3 = new qx.ui.basic.Terminator;
 363     t8_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 364     t8_3.setWidth("3*");
 365     t8_3.setHeight(10);
 366     t8_3.setBackgroundColor("red");
 367     hbl8.add(t8_3);
 368
 369
 370
 371     /* ***********************************************
 372
 373        EXAMPLE 9:
 374
 375     *********************************************** */
 376
 377     var te9 = new qx.ui.basic.Label("#9");
 378     te9.setLocation(20, 268);
 379     d.add(te9);
 380
 381     var hbl9 = new qx.ui.layout.HorizontalBoxLayout;
 382     hbl9.setLeft(50);
 383     hbl9.setTop(268);
 384     hbl9.setRight(335);
 385     hbl9.setWidth(null);
 386     hbl9.setHeight("auto");
 387     hbl9.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 388     hbl9.setSpacing(4);
 389     hbl9.setPadding(2);
 390     hbl9.setUseAdvancedFlexAllocation(true);
 391     d.add(hbl9);
 392
 393     var t9_1 = new qx.ui.basic.Terminator;
 394     t9_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 395     t9_1.setWidth(qx.constant.Core.FLEX);
 396     t9_1.setHeight(10);
 397     t9_1.setBackgroundColor("green");
 398     hbl9.add(t9_1);
 399
 400     var t9_2 = new qx.ui.basic.Terminator;
 401     t9_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 402     t9_2.setWidth("2*");
 403     t9_2.setHeight(10);
 404     t9_2.setBackgroundColor("blue");
 405     t9_2.setMaxWidth(50);
 406     hbl9.add(t9_2);
 407
 408     var t9_3 = new qx.ui.basic.Terminator;
 409     t9_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 410     t9_3.setWidth("3*");
 411     t9_3.setHeight(10);
 412     t9_3.setBackgroundColor("red");
 413     hbl9.add(t9_3);
 414
 415
 416
 417
 418     /* ***********************************************
 419
 420        EXAMPLE 10:
 421
 422     *********************************************** */
 423
 424     var te10 = new qx.ui.basic.Label("#10");
 425     te10.setLocation(20, 308);
 426     d.add(te10);
 427
 428     var hbl10 = new qx.ui.layout.HorizontalBoxLayout;
 429     hbl10.setLeft(50);
 430     hbl10.setTop(308);
 431     hbl10.setRight(335);
 432     hbl10.setWidth(null);
 433     hbl10.setHeight("auto");
 434     hbl10.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 435     hbl10.setSpacing(4);
 436     hbl10.setPadding(2);
 437     hbl10.setUseAdvancedFlexAllocation(true);
 438     d.add(hbl10);
 439
 440     var t10_1 = new qx.ui.basic.Terminator;
 441     t10_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 442     t10_1.setWidth(qx.constant.Core.FLEX);
 443     t10_1.setHeight(10);
 444     t10_1.setBackgroundColor("green");
 445     t10_1.addEventListener("click", function(e) { this.setWidth(this.getWidth() == qx.constant.Core.FLEX ? "4*" : qx.constant.Core.FLEX); });
 446     hbl10.add(t10_1);
 447
 448     var t10_2 = new qx.ui.basic.Terminator;
 449     t10_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 450     t10_2.setWidth("2*");
 451     t10_2.setHeight(10);
 452     t10_2.setBackgroundColor("blue");
 453     t10_2.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "2*" ? qx.constant.Core.FLEX : "2*"); });
 454     hbl10.add(t10_2);
 455
 456     var t10_3 = new qx.ui.basic.Terminator;
 457     t10_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 458     t10_3.setWidth("3*");
 459     t10_3.setHeight(10);
 460     t10_3.setBackgroundColor("red");
 461     t10_3.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "3*" ? "6*" : "3*"); });
 462     hbl10.add(t10_3);
 463
 464
 465
 466
 467     /* ***********************************************
 468
 469        EXAMPLE 11:
 470
 471     *********************************************** */
 472
 473     var te11 = new qx.ui.basic.Label("#11");
 474     te11.setLocation(20, 328);
 475     d.add(te11);
 476
 477     var hbl11 = new qx.ui.layout.HorizontalBoxLayout;
 478     hbl11.setLeft(50);
 479     hbl11.setTop(328);
 480     hbl11.setRight(335);
 481     hbl11.setWidth(null);
 482     hbl11.setHeight("auto");
 483     hbl11.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 484     hbl11.setSpacing(4);
 485     hbl11.setPadding(2);
 486     d.add(hbl11);
 487
 488     var t11_1 = new qx.ui.basic.Terminator;
 489     t11_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 490     t11_1.setWidth(qx.constant.Core.FLEX);
 491     t11_1.setHeight(10);
 492     t11_1.setBackgroundColor("green");
 493     hbl11.add(t11_1);
 494
 495     var t11_2 = new qx.ui.basic.Terminator;
 496     t11_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 497     t11_2.setWidth(80);
 498     t11_2.setHeight(10);
 499     t11_2.setBackgroundColor("blue");
 500     hbl11.add(t11_2);
 501
 502     var t11_3 = new qx.ui.basic.Terminator;
 503     t11_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 504     t11_3.setWidth("3*");
 505     t11_3.setHeight(10);
 506     t11_3.setBackgroundColor("red");
 507     hbl11.add(t11_3);
 508
 509
 510
 511
 512     /* ***********************************************
 513
 514        EXAMPLE 12:
 515
 516     *********************************************** */
 517
 518     var te12 = new qx.ui.basic.Label("#12");
 519     te12.setLocation(20, 348);
 520     d.add(te12);
 521
 522     var hbl12 = new qx.ui.layout.HorizontalBoxLayout;
 523     hbl12.setLeft(50);
 524     hbl12.setTop(348);
 525     hbl12.setHeight("auto");
 526     hbl12.setWidth("auto");
 527     hbl12.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 528     hbl12.setSpacing(4);
 529     hbl12.setPadding(2);
 530     d.add(hbl12);
 531
 532     var t12_1 = new qx.ui.basic.Terminator;
 533     t12_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 534     t12_1.setWidth(qx.constant.Core.FLEX);
 535     t12_1.setHeight(10);
 536     t12_1.setBackgroundColor("green");
 537     hbl12.add(t12_1);
 538
 539     var t12_2 = new qx.ui.basic.Terminator;
 540     t12_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 541     t12_2.setWidth(80);
 542     t12_2.setHeight(10);
 543     t12_2.setBackgroundColor("blue");
 544     hbl12.add(t12_2);
 545
 546     var t12_3 = new qx.ui.basic.Terminator;
 547     t12_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 548     t12_3.setWidth("3*");
 549     t12_3.setHeight(10);
 550     t12_3.setBackgroundColor("red");
 551     hbl12.add(t12_3);
 552
 553
 554
 555     /* ***********************************************
 556
 557        EXAMPLE 13:
 558
 559     *********************************************** */
 560
 561     var te13 = new qx.ui.basic.Label("#13");
 562     te13.setLocation(20, 388);
 563     d.add(te13);
 564
 565     var hbl13 = new qx.ui.layout.HorizontalBoxLayout;
 566     hbl13.setLeft(50);
 567     hbl13.setTop(388);
 568     hbl13.setRight(335);
 569     hbl13.setWidth(null);
 570     hbl13.setHeight("auto");
 571     hbl13.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 572     hbl13.setSpacing(4);
 573     hbl13.setPadding(2);
 574     d.add(hbl13);
 575
 576     var t13_1 = new qx.ui.basic.Terminator;
 577     t13_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 578     t13_1.setWidth(200);
 579     t13_1.setHeight(10);
 580     t13_1.setBackgroundColor("green");
 581     hbl13.add(t13_1);
 582
 583     var t13_2 = new qx.ui.form.TextField("http://qooxdoo.org");
 584     t13_2.setWidth(qx.constant.Core.FLEX);
 585     t13_2.setStyleProperty("fontSize", "16px");
 586     hbl13.add(t13_2);
 587
 588     var t13_3 = new qx.ui.form.Button(null, "icon/16/apply.png");
 589     hbl13.add(t13_3);
 590
 591   });
 592   </script>
 593 </body>
 594 </html>