summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html
diff options
context:
space:
mode:
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html')
-rw-r--r--swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html552
1 files changed, 552 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html
new file mode 100644
index 0000000000..c1eccd7244
--- /dev/null
+++ b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_3.html
@@ -0,0 +1,552 @@
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>qooxdoo &raquo; Demo</title>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
+ <!--[if IE]>
+ <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
+ <![endif]-->
+ <script type="text/javascript" src="../../script/qx.js"></script>
+</head>
+<body>
+ <script type="text/javascript" src="../../script/layout.js"></script>
+
+ <div id="demoDescription">
+ Tests for the new implementation of the qx.ui.layout.VerticalBoxLayout widget.<br/>
+ <br/>
+ 1. Simple testing, one static and one flex child<br/>
+ 2. Two flex children with the same priority<br/>
+ 3. The same as #2, but the second has the doubled priority compared to the first<br/>
+ <br/>
+
+ 4. The same as #3, but now the second child has a max-height of 50px<br/>
+ 5. The same as #4, but now with enabled "advancedFlexAllocation"<br/>
+ <br/>
+
+ 6. The same as #3, but now the second has a min height of 300px<br/>
+ 7. The same as #6, but now with enabled "advancedFlexAllocation"<br/>
+ <br/>
+
+ 8. Three children with the priorities: 1, 2 and 3. The second has a maxHeight of 50px<br/>
+ 9. The same as #8, but now with enabled "advancedFlexAllocation"<br/>
+ <br/>
+
+ 10. Three children with the priorities: 1, 2 and 3. Added a few mouse actions.<br/>
+ 11. Three children with the priorities: 1, a static height of 80px and 3.<br/>
+ 12. The same as #11, but configured as 'auto' height.
+ </div>
+
+ <script type="text/javascript">
+ qx.core.Init.getInstance().defineMain(function()
+ {
+ var d = qx.ui.core.ClientDocument.getInstance();
+
+
+ /* ***********************************************
+
+ EXAMPLE 1:
+
+ *********************************************** */
+
+ var te1 = new qx.ui.basic.Label("#1");
+ te1.setLocation(20, 48);
+ d.add(te1);
+
+ var hbl1 = new qx.ui.layout.VerticalBoxLayout;
+ hbl1.setTop(78);
+ hbl1.setLeft(20);
+ hbl1.setBottom(48);
+ hbl1.setHeight(null);
+ hbl1.setWidth("auto");
+ hbl1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl1.setSpacing(4);
+ hbl1.setPadding(2);
+ d.add(hbl1);
+
+ var t1_1 = new qx.ui.basic.Terminator;
+ t1_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t1_1.setHeight(20);
+ t1_1.setWidth(10);
+ t1_1.setBackgroundColor("green");
+ hbl1.add(t1_1);
+
+ t1_1.addEventListener("click", function() {
+ this.setHeight(this.getHeight() == 20 ? 100 : 20);
+ });
+
+ var t1_2 = new qx.ui.basic.Terminator;
+ t1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t1_2.setHeight(qx.constant.Core.FLEX);
+ t1_2.setWidth(10);
+ t1_2.setBackgroundColor("blue");
+ hbl1.add(t1_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 2:
+
+ *********************************************** */
+
+ var te2 = new qx.ui.basic.Label("#2");
+ te2.setLocation(40, 48);
+ d.add(te2);
+
+ var hbl2 = new qx.ui.layout.VerticalBoxLayout;
+ hbl2.setTop(78);
+ hbl2.setLeft(40);
+ hbl2.setBottom(48);
+ hbl2.setHeight(null);
+ hbl2.setWidth("auto");
+ hbl2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl2.setSpacing(4);
+ hbl2.setPadding(2);
+ d.add(hbl2);
+
+ var t2_1 = new qx.ui.basic.Terminator;
+ t2_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t2_1.setHeight(qx.constant.Core.FLEX);
+ t2_1.setWidth(10);
+ t2_1.setBackgroundColor("green");
+ hbl2.add(t2_1);
+
+ var t2_2 = new qx.ui.basic.Terminator;
+ t2_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t2_2.setHeight(qx.constant.Core.FLEX);
+ t2_2.setWidth(10);
+ t2_2.setBackgroundColor("blue");
+ hbl2.add(t2_2);
+
+
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 3:
+
+ *********************************************** */
+
+ var te3 = new qx.ui.basic.Label("#3");
+ te3.setLocation(60, 48);
+ d.add(te3);
+
+ var hbl3 = new qx.ui.layout.VerticalBoxLayout;
+ hbl3.setTop(78);
+ hbl3.setLeft(60);
+ hbl3.setBottom(48);
+ hbl3.setHeight(null);
+ hbl3.setWidth("auto");
+ hbl3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl3.setSpacing(4);
+ hbl3.setPadding(2);
+ d.add(hbl3);
+
+ var t3_1 = new qx.ui.basic.Terminator;
+ t3_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t3_1.setHeight(qx.constant.Core.FLEX);
+ t3_1.setWidth(10);
+ t3_1.setBackgroundColor("green");
+ hbl3.add(t3_1);
+
+ var t3_2 = new qx.ui.basic.Terminator;
+ t3_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t3_2.setHeight("2*");
+ t3_2.setWidth(10);
+ t3_2.setBackgroundColor("blue");
+ hbl3.add(t3_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 4:
+
+ *********************************************** */
+
+ var te4 = new qx.ui.basic.Label("#4");
+ te4.setLocation(100, 48);
+ d.add(te4);
+
+ var hbl4 = new qx.ui.layout.VerticalBoxLayout;
+ hbl4.setTop(78);
+ hbl4.setLeft(100);
+ hbl4.setBottom(48);
+ hbl4.setHeight(null);
+ hbl4.setWidth("auto");
+ hbl4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl4.setSpacing(4);
+ hbl4.setPadding(2);
+ d.add(hbl4);
+
+ var t4_1 = new qx.ui.basic.Terminator;
+ t4_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t4_1.setHeight(qx.constant.Core.FLEX);
+ t4_1.setWidth(10);
+ t4_1.setBackgroundColor("green");
+ hbl4.add(t4_1);
+
+ var t4_2 = new qx.ui.basic.Terminator;
+ t4_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t4_2.setHeight("2*");
+ t4_2.setWidth(10);
+ t4_2.setMaxHeight(50);
+ t4_2.setBackgroundColor("blue");
+ hbl4.add(t4_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 5:
+
+ *********************************************** */
+
+ var te5 = new qx.ui.basic.Label("#5");
+ te5.setLocation(120, 48);
+ d.add(te5);
+
+ var hbl5 = new qx.ui.layout.VerticalBoxLayout;
+ hbl5.setTop(78);
+ hbl5.setLeft(120);
+ hbl5.setBottom(48);
+ hbl5.setHeight(null);
+ hbl5.setWidth("auto");
+ hbl5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl5.setSpacing(4);
+ hbl5.setPadding(2);
+ hbl5.setUseAdvancedFlexAllocation(true);
+ d.add(hbl5);
+
+ var t5_1 = new qx.ui.basic.Terminator;
+ t5_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t5_1.setHeight(qx.constant.Core.FLEX);
+ t5_1.setWidth(10);
+ t5_1.setBackgroundColor("green");
+ hbl5.add(t5_1);
+
+ var t5_2 = new qx.ui.basic.Terminator;
+ t5_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t5_2.setHeight("2*");
+ t5_2.setWidth(10);
+ t5_2.setMaxHeight(50);
+ t5_2.setBackgroundColor("blue");
+ hbl5.add(t5_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 6:
+
+ *********************************************** */
+
+ var te6 = new qx.ui.basic.Label("#6");
+ te6.setLocation(160, 48);
+ d.add(te6);
+
+ var hbl6 = new qx.ui.layout.VerticalBoxLayout;
+ hbl6.setTop(78);
+ hbl6.setLeft(160);
+ hbl6.setBottom(48);
+ hbl6.setHeight(null);
+ hbl6.setWidth("auto");
+ hbl6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl6.setSpacing(4);
+ hbl6.setPadding(2);
+ d.add(hbl6);
+
+ var t6_1 = new qx.ui.basic.Terminator;
+ t6_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t6_1.setHeight(qx.constant.Core.FLEX);
+ t6_1.setWidth(10);
+ t6_1.setBackgroundColor("green");
+ hbl6.add(t6_1);
+
+ var t6_2 = new qx.ui.basic.Terminator;
+ t6_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t6_2.setHeight("2*");
+ t6_2.setWidth(10);
+ t6_2.setMinHeight(300);
+ t6_2.setBackgroundColor("blue");
+ hbl6.add(t6_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 7:
+
+ *********************************************** */
+
+ var te7 = new qx.ui.basic.Label("#7");
+ te7.setLocation(180, 48);
+ d.add(te7);
+
+ var hbl7 = new qx.ui.layout.VerticalBoxLayout;
+ hbl7.setTop(78);
+ hbl7.setLeft(180);
+ hbl7.setBottom(48);
+ hbl7.setHeight(null);
+ hbl7.setWidth("auto");
+ hbl7.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl7.setSpacing(4);
+ hbl7.setPadding(2);
+ hbl7.setUseAdvancedFlexAllocation(true);
+ d.add(hbl7);
+
+ var t7_1 = new qx.ui.basic.Terminator;
+ t7_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t7_1.setHeight(qx.constant.Core.FLEX);
+ t7_1.setWidth(10);
+ t7_1.setBackgroundColor("green");
+ hbl7.add(t7_1);
+
+ var t7_2 = new qx.ui.basic.Terminator;
+ t7_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t7_2.setHeight("2*");
+ t7_2.setWidth(10);
+ t7_2.setMinHeight(300);
+ t7_2.setBackgroundColor("blue");
+ hbl7.add(t7_2);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 8:
+
+ *********************************************** */
+
+ var te8 = new qx.ui.basic.Label("#8");
+ te8.setLocation(220, 48);
+ d.add(te8);
+
+ var hbl8 = new qx.ui.layout.VerticalBoxLayout;
+ hbl8.setTop(78);
+ hbl8.setLeft(220);
+ hbl8.setBottom(48);
+ hbl8.setHeight(null);
+ hbl8.setWidth("auto");
+ hbl8.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl8.setSpacing(4);
+ hbl8.setPadding(2);
+ d.add(hbl8);
+
+ var t8_1 = new qx.ui.basic.Terminator;
+ t8_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t8_1.setHeight(qx.constant.Core.FLEX);
+ t8_1.setWidth(10);
+ t8_1.setBackgroundColor("green");
+ hbl8.add(t8_1);
+
+ var t8_2 = new qx.ui.basic.Terminator;
+ t8_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t8_2.setHeight("2*");
+ t8_2.setWidth(10);
+ t8_2.setBackgroundColor("blue");
+ t8_2.setMaxHeight(50);
+ hbl8.add(t8_2);
+
+ var t8_3 = new qx.ui.basic.Terminator;
+ t8_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t8_3.setHeight("3*");
+ t8_3.setWidth(10);
+ t8_3.setBackgroundColor("red");
+ hbl8.add(t8_3);
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 9:
+
+ *********************************************** */
+
+ var te9 = new qx.ui.basic.Label("#9");
+ te9.setLocation(240, 48);
+ d.add(te9);
+
+ var hbl9 = new qx.ui.layout.VerticalBoxLayout;
+ hbl9.setTop(78);
+ hbl9.setLeft(240);
+ hbl9.setBottom(48);
+ hbl9.setHeight(null);
+ hbl9.setWidth("auto");
+ hbl9.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl9.setSpacing(4);
+ hbl9.setPadding(2);
+ hbl9.setUseAdvancedFlexAllocation(true);
+ d.add(hbl9);
+
+ var t9_1 = new qx.ui.basic.Terminator;
+ t9_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t9_1.setHeight(qx.constant.Core.FLEX);
+ t9_1.setWidth(10);
+ t9_1.setBackgroundColor("green");
+ hbl9.add(t9_1);
+
+ var t9_2 = new qx.ui.basic.Terminator;
+ t9_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t9_2.setHeight("2*");
+ t9_2.setWidth(10);
+ t9_2.setBackgroundColor("blue");
+ t9_2.setMaxHeight(50);
+ hbl9.add(t9_2);
+
+ var t9_3 = new qx.ui.basic.Terminator;
+ t9_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t9_3.setHeight("3*");
+ t9_3.setWidth(10);
+ t9_3.setBackgroundColor("red");
+ hbl9.add(t9_3);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 10:
+
+ *********************************************** */
+
+ var te10 = new qx.ui.basic.Label("#10");
+ te10.setLocation(280, 48);
+ d.add(te10);
+
+ var hbl10 = new qx.ui.layout.VerticalBoxLayout;
+ hbl10.setTop(78);
+ hbl10.setLeft(280);
+ hbl10.setBottom(48);
+ hbl10.setHeight(null);
+ hbl10.setWidth("auto");
+ hbl10.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl10.setSpacing(4);
+ hbl10.setPadding(2);
+ hbl10.setUseAdvancedFlexAllocation(true);
+ d.add(hbl10);
+
+ var t10_1 = new qx.ui.basic.Terminator;
+ t10_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t10_1.setHeight(qx.constant.Core.FLEX);
+ t10_1.setWidth(10);
+ t10_1.setBackgroundColor("green");
+ t10_1.addEventListener("click", function(e) { this.setHeight(this.getHeight() == qx.constant.Core.FLEX ? "4*" : qx.constant.Core.FLEX); });
+ hbl10.add(t10_1);
+
+ var t10_2 = new qx.ui.basic.Terminator;
+ t10_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t10_2.setHeight("2*");
+ t10_2.setWidth(10);
+ t10_2.setBackgroundColor("blue");
+ t10_2.addEventListener("click", function(e) { this.setHeight(this.getHeight() == "2*" ? qx.constant.Core.FLEX : "2*"); });
+ hbl10.add(t10_2);
+
+ var t10_3 = new qx.ui.basic.Terminator;
+ t10_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t10_3.setHeight("3*");
+ t10_3.setWidth(10);
+ t10_3.setBackgroundColor("red");
+ t10_3.addEventListener("click", function(e) { this.setHeight(this.getHeight() == "3*" ? "6*" : "3*"); });
+ hbl10.add(t10_3);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 11:
+
+ *********************************************** */
+
+ var te11 = new qx.ui.basic.Label("#11");
+ te11.setLocation(300, 48);
+ d.add(te11);
+
+ var hbl11 = new qx.ui.layout.VerticalBoxLayout;
+ hbl11.setTop(78);
+ hbl11.setLeft(300);
+ hbl11.setBottom(48);
+ hbl11.setHeight(null);
+ hbl11.setWidth("auto");
+ hbl11.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl11.setSpacing(4);
+ hbl11.setPadding(2);
+ d.add(hbl11);
+
+ var t11_1 = new qx.ui.basic.Terminator;
+ t11_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t11_1.setHeight(qx.constant.Core.FLEX);
+ t11_1.setWidth(10);
+ t11_1.setBackgroundColor("green");
+ hbl11.add(t11_1);
+
+ var t11_2 = new qx.ui.basic.Terminator;
+ t11_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t11_2.setHeight(80);
+ t11_2.setWidth(10);
+ t11_2.setBackgroundColor("blue");
+ hbl11.add(t11_2);
+
+ var t11_3 = new qx.ui.basic.Terminator;
+ t11_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t11_3.setHeight("3*");
+ t11_3.setWidth(10);
+ t11_3.setBackgroundColor("red");
+ hbl11.add(t11_3);
+
+
+
+
+ /* ***********************************************
+
+ EXAMPLE 12:
+
+ *********************************************** */
+
+ var te12 = new qx.ui.basic.Label("#13");
+ te12.setLocation(320, 48);
+ d.add(te12);
+
+ var hbl12 = new qx.ui.layout.VerticalBoxLayout;
+ hbl12.setTop(78);
+ hbl12.setLeft(320);
+ hbl12.setWidth("auto");
+ hbl12.setHeight("auto");
+ hbl12.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
+ hbl12.setSpacing(4);
+ hbl12.setPadding(2);
+ d.add(hbl12);
+
+ var t12_1 = new qx.ui.basic.Terminator;
+ t12_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t12_1.setHeight(qx.constant.Core.FLEX);
+ t12_1.setWidth(10);
+ t12_1.setBackgroundColor("green");
+ hbl12.add(t12_1);
+
+ var t12_2 = new qx.ui.basic.Terminator;
+ t12_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t12_2.setHeight(80);
+ t12_2.setWidth(10);
+ t12_2.setBackgroundColor("blue");
+ hbl12.add(t12_2);
+
+ var t12_3 = new qx.ui.basic.Terminator;
+ t12_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
+ t12_3.setHeight("3*");
+ t12_3.setWidth(10);
+ t12_3.setBackgroundColor("red");
+ hbl12.add(t12_3);
+ });
+ </script>
+</body>
+</html> \ No newline at end of file