diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HorizontalBoxLayout_3.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HorizontalBoxLayout_3.html | 594 |
1 files changed, 594 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HorizontalBoxLayout_3.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HorizontalBoxLayout_3.html new file mode 100644 index 0000000000..6777c53d7b --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/test/HorizontalBoxLayout_3.html @@ -0,0 +1,594 @@ +<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.HorizontalBoxLayout 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-width 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 width of 500px<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 maxWidth 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 width of 80px and 3.<br/> + 12. The same as #11, but configured as 'auto' width.<br/> + <br/> + + 13. Test for more complex child widgets. Seems to work without problems. + </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.HorizontalBoxLayout; + hbl1.setLeft(50); + hbl1.setTop(48); + hbl1.setRight(335); + hbl1.setWidth(null); + hbl1.setHeight("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.setWidth(20); + t1_1.setHeight(10); + t1_1.setBackgroundColor("green"); + hbl1.add(t1_1); + + t1_1.addEventListener("click", function() { + this.setWidth(this.getWidth() == 20 ? 100 : 20); + }); + + var t1_2 = new qx.ui.basic.Terminator; + t1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + t1_2.setWidth("1*"); + t1_2.setHeight(10); + t1_2.setBackgroundColor("blue"); + hbl1.add(t1_2); + + + + + /* *********************************************** + + EXAMPLE 2: + + *********************************************** */ + + var te2 = new qx.ui.basic.Label("#2"); + te2.setLocation(20, 68); + d.add(te2); + + var hbl2 = new qx.ui.layout.HorizontalBoxLayout; + hbl2.setLeft(50); + hbl2.setTop(68); + hbl2.setRight(335); + hbl2.setWidth(null); + hbl2.setHeight("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.setWidth("1*"); + t2_1.setHeight(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.setWidth("1*"); + t2_2.setHeight(10); + t2_2.setBackgroundColor("blue"); + hbl2.add(t2_2); + + + + + + + /* *********************************************** + + EXAMPLE 3: + + *********************************************** */ + + var te3 = new qx.ui.basic.Label("#3"); + te3.setLocation(20, 88); + d.add(te3); + + var hbl3 = new qx.ui.layout.HorizontalBoxLayout; + hbl3.setLeft(50); + hbl3.setTop(88); + hbl3.setRight(335); + hbl3.setWidth(null); + hbl3.setHeight("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.setWidth("1*"); + t3_1.setHeight(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.setWidth("2*"); + t3_2.setHeight(10); + t3_2.setBackgroundColor("blue"); + hbl3.add(t3_2); + + + + + /* *********************************************** + + EXAMPLE 4: + + *********************************************** */ + + var te4 = new qx.ui.basic.Label("#4"); + te4.setLocation(20, 128); + d.add(te4); + + var hbl4 = new qx.ui.layout.HorizontalBoxLayout; + hbl4.setLeft(50); + hbl4.setTop(128); + hbl4.setRight(335); + hbl4.setWidth(null); + hbl4.setHeight("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.setWidth("1*"); + t4_1.setHeight(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.setWidth("2*"); + t4_2.setHeight(10); + t4_2.setMaxWidth(50); + t4_2.setBackgroundColor("blue"); + hbl4.add(t4_2); + + + + + /* *********************************************** + + EXAMPLE 5: + + *********************************************** */ + + var te5 = new qx.ui.basic.Label("#5"); + te5.setLocation(20, 148); + d.add(te5); + + var hbl5 = new qx.ui.layout.HorizontalBoxLayout; + hbl5.setLeft(50); + hbl5.setTop(148); + hbl5.setRight(335); + hbl5.setWidth(null); + hbl5.setHeight("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.setWidth("1*"); + t5_1.setHeight(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.setWidth("2*"); + t5_2.setHeight(10); + t5_2.setMaxWidth(50); + t5_2.setBackgroundColor("blue"); + hbl5.add(t5_2); + + + + + /* *********************************************** + + EXAMPLE 6: + + *********************************************** */ + + var te6 = new qx.ui.basic.Label("#6"); + te6.setLocation(20, 188); + d.add(te6); + + var hbl6 = new qx.ui.layout.HorizontalBoxLayout; + hbl6.setLeft(50); + hbl6.setTop(188); + hbl6.setRight(335); + hbl6.setWidth(null); + hbl6.setHeight("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.setWidth("1*"); + t6_1.setHeight(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.setWidth("2*"); + t6_2.setHeight(10); + t6_2.setMinWidth(500); + t6_2.setBackgroundColor("blue"); + hbl6.add(t6_2); + + + + + /* *********************************************** + + EXAMPLE 7: + + *********************************************** */ + + var te7 = new qx.ui.basic.Label("#7"); + te7.setLocation(20, 208); + d.add(te7); + + var hbl7 = new qx.ui.layout.HorizontalBoxLayout; + hbl7.setLeft(50); + hbl7.setTop(208); + hbl7.setRight(335); + hbl7.setWidth(null); + hbl7.setHeight("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.setWidth("1*"); + t7_1.setHeight(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.setWidth("2*"); + t7_2.setHeight(10); + t7_2.setMinWidth(500); + t7_2.setBackgroundColor("blue"); + hbl7.add(t7_2); + + + + + /* *********************************************** + + EXAMPLE 8: + + *********************************************** */ + + var te8 = new qx.ui.basic.Label("#8"); + te8.setLocation(20, 248); + d.add(te8); + + var hbl8 = new qx.ui.layout.HorizontalBoxLayout; + hbl8.setLeft(50); + hbl8.setTop(248); + hbl8.setRight(335); + hbl8.setWidth(null); + hbl8.setHeight("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.setWidth("1*"); + t8_1.setHeight(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.setWidth("2*"); + t8_2.setHeight(10); + t8_2.setBackgroundColor("blue"); + t8_2.setMaxWidth(50); + hbl8.add(t8_2); + + var t8_3 = new qx.ui.basic.Terminator; + t8_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + t8_3.setWidth("3*"); + t8_3.setHeight(10); + t8_3.setBackgroundColor("red"); + hbl8.add(t8_3); + + + + /* *********************************************** + + EXAMPLE 9: + + *********************************************** */ + + var te9 = new qx.ui.basic.Label("#9"); + te9.setLocation(20, 268); + d.add(te9); + + var hbl9 = new qx.ui.layout.HorizontalBoxLayout; + hbl9.setLeft(50); + hbl9.setTop(268); + hbl9.setRight(335); + hbl9.setWidth(null); + hbl9.setHeight("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.setWidth("1*"); + t9_1.setHeight(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.setWidth("2*"); + t9_2.setHeight(10); + t9_2.setBackgroundColor("blue"); + t9_2.setMaxWidth(50); + hbl9.add(t9_2); + + var t9_3 = new qx.ui.basic.Terminator; + t9_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + t9_3.setWidth("3*"); + t9_3.setHeight(10); + t9_3.setBackgroundColor("red"); + hbl9.add(t9_3); + + + + + /* *********************************************** + + EXAMPLE 10: + + *********************************************** */ + + var te10 = new qx.ui.basic.Label("#10"); + te10.setLocation(20, 308); + d.add(te10); + + var hbl10 = new qx.ui.layout.HorizontalBoxLayout; + hbl10.setLeft(50); + hbl10.setTop(308); + hbl10.setRight(335); + hbl10.setWidth(null); + hbl10.setHeight("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.setWidth("1*"); + t10_1.setHeight(10); + t10_1.setBackgroundColor("green"); + t10_1.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "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.setWidth("2*"); + t10_2.setHeight(10); + t10_2.setBackgroundColor("blue"); + t10_2.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "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.setWidth("3*"); + t10_3.setHeight(10); + t10_3.setBackgroundColor("red"); + t10_3.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "3*" ? "6*" : "3*"); }); + hbl10.add(t10_3); + + + + + /* *********************************************** + + EXAMPLE 11: + + *********************************************** */ + + var te11 = new qx.ui.basic.Label("#11"); + te11.setLocation(20, 328); + d.add(te11); + + var hbl11 = new qx.ui.layout.HorizontalBoxLayout; + hbl11.setLeft(50); + hbl11.setTop(328); + hbl11.setRight(335); + hbl11.setWidth(null); + hbl11.setHeight("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.setWidth("1*"); + t11_1.setHeight(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.setWidth(80); + t11_2.setHeight(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.setWidth("3*"); + t11_3.setHeight(10); + t11_3.setBackgroundColor("red"); + hbl11.add(t11_3); + + + + + /* *********************************************** + + EXAMPLE 12: + + *********************************************** */ + + var te12 = new qx.ui.basic.Label("#12"); + te12.setLocation(20, 348); + d.add(te12); + + var hbl12 = new qx.ui.layout.HorizontalBoxLayout; + hbl12.setLeft(50); + hbl12.setTop(348); + hbl12.setHeight("auto"); + hbl12.setWidth("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.setWidth("1*"); + t12_1.setHeight(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.setWidth(80); + t12_2.setHeight(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.setWidth("3*"); + t12_3.setHeight(10); + t12_3.setBackgroundColor("red"); + hbl12.add(t12_3); + + + + /* *********************************************** + + EXAMPLE 13: + + *********************************************** */ + + var te13 = new qx.ui.basic.Label("#13"); + te13.setLocation(20, 388); + d.add(te13); + + var hbl13 = new qx.ui.layout.HorizontalBoxLayout; + hbl13.setLeft(50); + hbl13.setTop(388); + hbl13.setRight(335); + hbl13.setWidth(null); + hbl13.setHeight("auto"); + hbl13.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl13.setSpacing(4); + hbl13.setPadding(2); + d.add(hbl13); + + var t13_1 = new qx.ui.basic.Terminator; + t13_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + t13_1.setWidth(200); + t13_1.setHeight(10); + t13_1.setBackgroundColor("green"); + hbl13.add(t13_1); + + var t13_2 = new qx.ui.form.TextField("http://qooxdoo.org"); + t13_2.setWidth("1*"); + t13_2.setStyleProperty("fontSize", "16px"); + hbl13.add(t13_2); + + var t13_3 = new qx.ui.form.Button(null, "icon/16/apply.png"); + hbl13.add(t13_3); + + }); + </script> +</body> +</html>
\ No newline at end of file |