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