diff options
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/VerticalBoxLayout_1.html')
| -rw-r--r-- | swat/apps/qooxdoo-examples/test/VerticalBoxLayout_1.html | 1257 |
1 files changed, 1257 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_1.html b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_1.html new file mode 100644 index 0000000000..97031e2549 --- /dev/null +++ b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_1.html @@ -0,0 +1,1257 @@ +<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. + </div> + + <script type="text/javascript"> + qx.core.Init.getInstance().defineMain(function() + { + var d = qx.ui.core.ClientDocument.getInstance(); + + var cl_white = new qx.renderer.color.Color("white"); + var cl_blue = new qx.renderer.color.Color("blue"); + var cl_yellow = new qx.renderer.color.Color("yellow"); + var cl_green = new qx.renderer.color.Color("green"); + var cl_orange = new qx.renderer.color.Color("orange"); + var cl_purple = new qx.renderer.color.Color("purple"); + var cl_aqua = new qx.renderer.color.Color("aqua"); + var cl_fuchsia = new qx.renderer.color.Color("fuchsia"); + + /* *********************************************** + + EXAMPLE ONE: + TOP ALIGN + + *********************************************** */ + + var hbl1 = new qx.ui.layout.VerticalBoxLayout; + + hbl1.setTop(48); + hbl1.setLeft(20); + hbl1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl1.setWidth("auto") + hbl1.setBottom(48); + + hbl1.setSpacing(4); + hbl1.setPadding(8); + + hbl1.setHorizontalChildrenAlign("right"); + + + var w1_1 = new qx.ui.layout.CanvasLayout; + w1_1.setHeight(25); + w1_1.setWidth(25); + w1_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_1.setBackgroundColor(cl_white); + // w1_1.setMaxWidth(40); + + var w1_2 = new qx.ui.layout.CanvasLayout; + w1_2.setHeight(25); + w1_2.setWidth(25); + w1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_2.setBackgroundColor(cl_blue); + w1_2.setRight(10); + + var w1_3 = new qx.ui.layout.CanvasLayout; + w1_3.setHeight(25); + w1_3.setWidth("100%"); + w1_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_3.setBackgroundColor(cl_yellow); + + var w1_4 = new qx.ui.layout.CanvasLayout; + w1_4.setHeight(25); + w1_4.setWidth(25); + w1_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_4.setBackgroundColor(cl_green); + + var w1_5 = new qx.ui.layout.CanvasLayout; + w1_5.setHeight(40); + // w1_5.setWidth(25); + w1_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_5.setBackgroundColor(cl_orange); + + var w1_6 = new qx.ui.layout.CanvasLayout; + w1_6.setHeight(25); + w1_6.setWidth(25); + w1_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_6.setBackgroundColor(cl_purple); + w1_6.setLeft(15); + w1_6.setTop(-25); + + var w1_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w1_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w1_9 = new qx.ui.layout.CanvasLayout; + w1_9.setHeight(25); + w1_9.setWidth(25); + w1_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_9.setBackgroundColor(cl_aqua); + + var w1_10 = new qx.ui.layout.CanvasLayout; + w1_10.setHeight(25); + w1_10.setWidth(25); + w1_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w1_10.setBackgroundColor(cl_fuchsia); + + var hbl1_click = 0; + hbl1.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl1_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth(80); + break; + + case 3: + this.setWidth("auto"); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl1_click = 0; + return; + }; + + hbl1_click++; + }); + + w1_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w1_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w1_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w1_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w1_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w1_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w1_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w1_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w1_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w1_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl1.add(w1_1, w1_2, w1_3, w1_4, w1_5, w1_6, w1_7, w1_8, w1_9, w1_10); + d.add(hbl1); + + + + + + /* *********************************************** + + EXAMPLE TWO: + BOTTOM ALIGN + + *********************************************** */ + + var hbl2 = new qx.ui.layout.VerticalBoxLayout; + + hbl2.setLeft(110); + hbl2.setTop(48); + hbl2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl2.setWidth("auto"); + hbl2.setBottom(48); + + hbl2.setSpacing(4); + hbl2.setPadding(8); + + hbl2.setVerticalChildrenAlign("bottom"); + hbl2.setHorizontalChildrenAlign("center"); + + + var w2_1 = new qx.ui.layout.CanvasLayout; + w2_1.setHeight(25); + w2_1.setWidth(25); + w2_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_1.setBackgroundColor(cl_white); + // w2_1.setMaxWidth(40); + + var w2_2 = new qx.ui.layout.CanvasLayout; + w2_2.setHeight(25); + w2_2.setWidth(25); + w2_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_2.setBackgroundColor(cl_blue); + w2_2.setRight(10); + + var w2_3 = new qx.ui.layout.CanvasLayout; + w2_3.setHeight(25); + w2_3.setWidth("100%"); + w2_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_3.setBackgroundColor(cl_yellow); + + var w2_4 = new qx.ui.layout.CanvasLayout; + w2_4.setHeight(25); + w2_4.setWidth(25); + w2_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_4.setBackgroundColor(cl_green); + + var w2_5 = new qx.ui.layout.CanvasLayout; + w2_5.setHeight(40); + // w2_5.setWidth(25); + w2_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_5.setBackgroundColor(cl_orange); + + var w2_6 = new qx.ui.layout.CanvasLayout; + w2_6.setHeight(25); + w2_6.setWidth(25); + w2_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_6.setBackgroundColor(cl_purple); + w2_6.setLeft(15); + w2_6.setTop(-25); + + var w2_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w2_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w2_9 = new qx.ui.layout.CanvasLayout; + w2_9.setHeight(25); + w2_9.setWidth(25); + w2_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_9.setBackgroundColor(cl_aqua); + + var w2_10 = new qx.ui.layout.CanvasLayout; + w2_10.setHeight(25); + w2_10.setWidth(25); + w2_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w2_10.setBackgroundColor(cl_fuchsia); + w2_10.foo = true; + + + var hbl2_click = 0; + hbl2.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl2_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth(80); + break; + + case 3: + this.setWidth("auto"); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl2_click = 0; + return; + }; + + hbl2_click++; + }); + + w2_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w2_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w2_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w2_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w2_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w2_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w2_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w2_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w2_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w2_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl2.add(w2_1, w2_2, w2_3, w2_4, w2_5, w2_6, w2_7, w2_8, w2_9, w2_10); + d.add(hbl2); + + + /* *********************************************** + + EXAMPLE THREE: + CENTER ALIGN + + *********************************************** */ + + var hbl3 = new qx.ui.layout.VerticalBoxLayout; + + hbl3.setLeft(200); + hbl3.setTop(48); + hbl3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl3.setWidth("auto"); + hbl3.setBottom(48); + + hbl3.setSpacing(4); + hbl3.setPadding(8); + + hbl3.setVerticalChildrenAlign("middle"); + + + + var w3_1 = new qx.ui.layout.CanvasLayout; + w3_1.setHeight(25); + w3_1.setWidth(25); + w3_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_1.setBackgroundColor(cl_white); + // w3_1.setMaxWidth(40); + + var w3_2 = new qx.ui.layout.CanvasLayout; + w3_2.setHeight(25); + w3_2.setWidth(25); + w3_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_2.setBackgroundColor(cl_blue); + w3_2.setRight(10); + + var w3_3 = new qx.ui.layout.CanvasLayout; + w3_3.setHeight(25); + w3_3.setWidth("100%"); + w3_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_3.setBackgroundColor(cl_yellow); + + var w3_4 = new qx.ui.layout.CanvasLayout; + w3_4.setHeight(25); + w3_4.setWidth(25); + w3_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_4.setBackgroundColor(cl_green); + + var w3_5 = new qx.ui.layout.CanvasLayout; + w3_5.setHeight(40); + // w3_5.setWidth(25); + w3_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_5.setBackgroundColor(cl_orange); + + var w3_6 = new qx.ui.layout.CanvasLayout; + w3_6.setHeight(25); + w3_6.setWidth(25); + w3_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_6.setBackgroundColor(cl_purple); + w3_6.setLeft(15); + w3_6.setTop(-25); + + var w3_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w3_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w3_9 = new qx.ui.layout.CanvasLayout; + w3_9.setHeight(25); + w3_9.setWidth(25); + w3_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_9.setBackgroundColor(cl_aqua); + + var w3_10 = new qx.ui.layout.CanvasLayout; + w3_10.setHeight(25); + w3_10.setWidth(25); + w3_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w3_10.setBackgroundColor(cl_fuchsia); + + + var hbl3_click = 0; + hbl3.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl3_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth(80); + break; + + case 3: + this.setWidth("auto"); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl3_click = 0; + return; + }; + + hbl3_click++; + }); + + w3_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w3_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w3_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w3_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w3_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w3_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w3_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w3_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w3_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w3_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl3.add(w3_1, w3_2, w3_3, w3_4, w3_5, w3_6, w3_7, w3_8, w3_9, w3_10); + d.add(hbl3); + + + + + /* *********************************************** + + EXAMPLE FOUR: + TOP ALIGN, REVERTED CHILDREN ORDER + + *********************************************** */ + + var hbl4 = new qx.ui.layout.VerticalBoxLayout; + + hbl4.setLeft(290); + hbl4.setTop(48); + hbl4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl4.setHeight(null); + hbl4.setBottom(48); + + hbl4.setSpacing(4); + hbl4.setPadding(8); + hbl4.setReverseChildrenOrder(true); + hbl4.setHorizontalChildrenAlign("right"); + + hbl4.setWidth(80); + + + + var w4_1 = new qx.ui.layout.CanvasLayout; + w4_1.setHeight(25); + w4_1.setWidth(25); + w4_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_1.setBackgroundColor(cl_white); + // w4_1.setMaxWidth(40); + + var w4_2 = new qx.ui.layout.CanvasLayout; + w4_2.setHeight(25); + w4_2.setWidth(25); + w4_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_2.setBackgroundColor(cl_blue); + w4_2.setRight(10); + + var w4_3 = new qx.ui.layout.CanvasLayout; + w4_3.setHeight(25); + w4_3.setWidth("100%"); + w4_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_3.setBackgroundColor(cl_yellow); + + var w4_4 = new qx.ui.layout.CanvasLayout; + w4_4.setHeight(25); + w4_4.setWidth(25); + w4_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_4.setBackgroundColor(cl_green); + + var w4_5 = new qx.ui.layout.CanvasLayout; + w4_5.setHeight(40); + // w4_5.setWidth(25); + w4_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_5.setBackgroundColor(cl_orange); + + var w4_6 = new qx.ui.layout.CanvasLayout; + w4_6.setHeight(25); + w4_6.setWidth(25); + w4_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_6.setBackgroundColor(cl_purple); + w4_6.setLeft(15); + w4_6.setTop(-25); + + var w4_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w4_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w4_9 = new qx.ui.layout.CanvasLayout; + w4_9.setHeight(25); + w4_9.setWidth(25); + w4_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_9.setBackgroundColor(cl_aqua); + + var w4_10 = new qx.ui.layout.CanvasLayout; + w4_10.setHeight(25); + w4_10.setWidth(25); + w4_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w4_10.setBackgroundColor(cl_fuchsia); + + + var hbl4_click = 0; + hbl4.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl4_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth("auto"); + break; + + case 3: + this.setWidth(80); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl4_click = 0; + return; + }; + + hbl4_click++; + }); + + w4_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w4_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w4_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w4_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w4_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w4_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w4_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w4_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w4_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w4_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl4.add(w4_1, w4_2, w4_3, w4_4, w4_5, w4_6, w4_7, w4_8, w4_9, w4_10); + d.add(hbl4); + + + + + /* *********************************************** + + EXAMPLE FIVE: + BOTTOM ALIGN, REVERTED CHILDREN ORDER + + *********************************************** */ + + var hbl5 = new qx.ui.layout.VerticalBoxLayout; + + hbl5.setLeft(380); + hbl5.setTop(48); + hbl5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl5.setHeight(null); + hbl5.setBottom(48); + + hbl5.setSpacing(4); + hbl5.setPadding(8); + + hbl5.setVerticalChildrenAlign("bottom"); + hbl5.setReverseChildrenOrder(true); + hbl5.setHorizontalChildrenAlign("center"); + + hbl5.setWidth(80); + + + var w5_1 = new qx.ui.layout.CanvasLayout; + w5_1.setHeight(25); + w5_1.setWidth(25); + w5_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_1.setBackgroundColor(cl_white); + // w5_1.setMaxWidth(40); + + var w5_2 = new qx.ui.layout.CanvasLayout; + w5_2.setHeight(25); + w5_2.setWidth(25); + w5_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_2.setBackgroundColor(cl_blue); + w5_2.setRight(10); + + var w5_3 = new qx.ui.layout.CanvasLayout; + w5_3.setHeight(25); + w5_3.setWidth("100%"); + w5_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_3.setBackgroundColor(cl_yellow); + + var w5_4 = new qx.ui.layout.CanvasLayout; + w5_4.setHeight(25); + w5_4.setWidth(25); + w5_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_4.setBackgroundColor(cl_green); + + var w5_5 = new qx.ui.layout.CanvasLayout; + w5_5.setHeight(40); + // w5_5.setWidth(25); + w5_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_5.setBackgroundColor(cl_orange); + + var w5_6 = new qx.ui.layout.CanvasLayout; + w5_6.setHeight(25); + w5_6.setWidth(25); + w5_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_6.setBackgroundColor(cl_purple); + w5_6.setLeft(15); + w5_6.setTop(-25); + + var w5_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w5_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w5_9 = new qx.ui.layout.CanvasLayout; + w5_9.setHeight(25); + w5_9.setWidth(25); + w5_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_9.setBackgroundColor(cl_aqua); + + var w5_10 = new qx.ui.layout.CanvasLayout; + w5_10.setHeight(25); + w5_10.setWidth(25); + w5_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w5_10.setBackgroundColor(cl_fuchsia); + + + var hbl5_click = 0; + hbl5.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl5_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth("auto"); + break; + + case 3: + this.setWidth(80); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl5_click = 0; + return; + }; + + hbl5_click++; + }); + + w5_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w5_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w5_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w5_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w5_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w5_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w5_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w5_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w5_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w5_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl5.add(w5_1, w5_2, w5_3, w5_4, w5_5, w5_6, w5_7, w5_8, w5_9, w5_10); + d.add(hbl5); + + + + + + + + + /* *********************************************** + + EXAMPLE SIX: + CENTER ALIGN, REVERTED CHILDREN ORDER + + *********************************************** */ + + var hbl6 = new qx.ui.layout.VerticalBoxLayout; + + hbl6.setLeft(470); + hbl6.setTop(48); + hbl6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); + hbl6.setHeight(null); + hbl6.setBottom(48); + + hbl6.setSpacing(4); + hbl6.setPadding(8); + + hbl6.setVerticalChildrenAlign("middle"); + hbl6.setReverseChildrenOrder(true); + hbl6.setWidth(80); + + + var w6_1 = new qx.ui.layout.CanvasLayout; + w6_1.setHeight(25); + w6_1.setWidth(25); + w6_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_1.setBackgroundColor(cl_white); + // w6_1.setMaxWidth(40); + + var w6_2 = new qx.ui.layout.CanvasLayout; + w6_2.setHeight(25); + w6_2.setWidth(25); + w6_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_2.setBackgroundColor(cl_blue); + w6_2.setRight(10); + + var w6_3 = new qx.ui.layout.CanvasLayout; + w6_3.setHeight(25); + w6_3.setWidth("100%"); + w6_3.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_3.setBackgroundColor(cl_yellow); + + var w6_4 = new qx.ui.layout.CanvasLayout; + w6_4.setHeight(25); + w6_4.setWidth(25); + w6_4.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_4.setBackgroundColor(cl_green); + + var w6_5 = new qx.ui.layout.CanvasLayout; + w6_5.setHeight(40); + // w6_5.setWidth(25); + w6_5.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_5.setBackgroundColor(cl_orange); + + var w6_6 = new qx.ui.layout.CanvasLayout; + w6_6.setHeight(25); + w6_6.setWidth(25); + w6_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_6.setBackgroundColor(cl_purple); + w6_6.setLeft(15); + w6_6.setTop(-25); + + var w6_7 = new qx.ui.basic.Image("icon/32/clock.png"); + + var w6_8 = new qx.ui.basic.Image("icon/32/colors.png"); + + var w6_9 = new qx.ui.layout.CanvasLayout; + w6_9.setHeight(25); + w6_9.setWidth(25); + w6_9.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_9.setBackgroundColor(cl_aqua); + + var w6_10 = new qx.ui.layout.CanvasLayout; + w6_10.setHeight(25); + w6_10.setWidth(25); + w6_10.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + w6_10.setBackgroundColor(cl_fuchsia); + + + var hbl6_click = 0; + hbl6.addEventListener("click", function(e) + { + if (e.getTarget()!=this) { + return; + }; + + switch(hbl6_click) + { + case 0: + this.setBottom(null); + this.setHeight("auto"); + break; + + case 1: + this.setWidth(30); + break; + + case 2: + this.setWidth("auto"); + break; + + case 3: + this.setWidth(80); + break; + + case 4: + this.setHeight(200); + break; + + case 5: + this.setHeight(null); + this.setBottom(48); + hbl6_click = 0; + return; + }; + + hbl6_click++; + }); + + w6_1.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(65); + this.setWidth(65); + this.setBorder(new qx.renderer.border.Border(6, "double", "black")); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); + }; + }); + + w6_2.addEventListener("click", function(e) { + this.getMarginBottom() == 0 ? this.setMarginBottom(10) : this.setMarginBottom(0); + }); + + w6_3.addEventListener("click", function(e) { + this.getMinHeight() == -Infinity ? this.setMinHeight(100) : this.setMinHeight(-Infinity); + }); + + w6_4.addEventListener("click", function(e) { + this.getHeight() == 25 ? this.setHeight(50) : this.setHeight(25); + }); + + w6_5.addEventListener("click", function(e) { + this.getHeight() == 40 ? this.setHeight(80) : this.setHeight(40); + }); + + w6_6.addEventListener("click", function(e) { + this.getTop() == -25 ? this.setTop(25) : this.setTop(-25); + }); + + w6_7.addEventListener("click", function(e) { + this.getSource() == "icon/32/clock.png" ? this.setSource("icon/64/clock.png") : this.setSource("icon/32/clock.png"); + }); + + w6_8.addEventListener("click", function(e) { + this.getSource() == "icon/32/colors.png" ? this.setSource("icon/16/colors.png") : this.setSource("icon/32/colors.png"); + }); + + w6_9.addEventListener("click", function(e) + { + if (this.getLeft() == null) + { + this.setLeft(20); + this.setTop(-10); + } + else + { + this.setLeft(null); + this.setTop(null); + }; + }); + + w6_10.addEventListener("click", function(e) + { + if (this.getHeight() == 25) + { + this.setHeight(10); + this.setWidth(10); + this.setTop(-5); + this.setRight(15); + } + else + { + this.setHeight(25); + this.setWidth(25); + this.setTop(null); + this.setRight(null); + }; + }); + + + + hbl6.add(w6_1, w6_2, w6_3, w6_4, w6_5, w6_6, w6_7, w6_8, w6_9, w6_10); + d.add(hbl6); + }); + </script> +</body> +</html>
\ No newline at end of file |