summaryrefslogtreecommitdiff
path: root/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html
diff options
context:
space:
mode:
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html')
-rw-r--r--swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html594
1 files changed, 594 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html b/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html
new file mode 100644
index 0000000000..1d6ae2e945
--- /dev/null
+++ b/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_3.html
@@ -0,0 +1,594 @@
+<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.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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ t10_1.setHeight(10);
+ t10_1.setBackgroundColor("green");
+ t10_1.addEventListener("click", function(e) { this.setWidth(this.getWidth() == 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.setWidth("2*");
+ t10_2.setHeight(10);
+ t10_2.setBackgroundColor("blue");
+ t10_2.addEventListener("click", function(e) { this.setWidth(this.getWidth() == "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.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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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(qx.constant.Core.FLEX);
+ 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