diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/VerticalBoxLayout_3.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/VerticalBoxLayout_3.html | 552 |
1 files changed, 552 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/VerticalBoxLayout_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/VerticalBoxLayout_3.html new file mode 100644 index 0000000000..ffd67a7308 --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/VerticalBoxLayout_3.html @@ -0,0 +1,552 @@ +<html> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>qooxdoo » 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + 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("1*"); + t10_1.setWidth(10); + t10_1.setBackgroundColor("green"); + t10_1.addEventListener("click", function(e) { this.setHeight(this.getHeight() == "1*" ? "4*" : "1*"); }); + 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*" ? "1*" : "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("1*"); + 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("1*"); + 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 |