diff options
Diffstat (limited to 'swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_1.html')
| -rw-r--r-- | swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_1.html | 1261 |
1 files changed, 0 insertions, 1261 deletions
diff --git a/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_1.html b/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_1.html deleted file mode 100644 index af7f60e6f8..0000000000 --- a/swat/apps/qooxdoo-examples/test/HorizontalBoxLayout_1.html +++ /dev/null @@ -1,1261 +0,0 @@ -<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. - </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: - LEFT ALIGN - - *********************************************** */ - - var hbl1 = new qx.ui.layout.HorizontalBoxLayout; - - hbl1.setTop(48); - hbl1.setLeft(20); - hbl1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl1.setHeight("auto"); - hbl1.setRight(335); - - hbl1.setSpacing(4); - hbl1.setPadding(8); - - hbl1.setVerticalChildrenAlign("bottom"); - - - var w1_1 = new qx.ui.layout.CanvasLayout; - w1_1.setWidth(25); - w1_1.setHeight(25); - w1_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w1_1.setBackgroundColor(cl_white); - // w1_1.setMaxHeight(40); - - var w1_2 = new qx.ui.layout.CanvasLayout; - w1_2.setWidth(25); - w1_2.setHeight(25); - w1_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w1_2.setBackgroundColor(cl_blue); - w1_2.setBottom(10); - - var w1_3 = new qx.ui.layout.CanvasLayout; - w1_3.setWidth(25); - w1_3.setHeight("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.setWidth(25); - w1_4.setHeight(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.setWidth(40); - // w1_5.setHeight(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.setWidth(25); - w1_6.setHeight(25); - w1_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w1_6.setBackgroundColor(cl_purple); - w1_6.setTop(15); - w1_6.setLeft(-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.setWidth(25); - w1_9.setHeight(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.setWidth(25); - w1_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight(80); - break; - - case 3: - this.setHeight("auto"); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl1_click = 0; - return; - }; - - hbl1_click++; - }); - - w1_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w1_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w1_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w1_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w1_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w1_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w1_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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: - RIGHT ALIGN - - *********************************************** */ - - var hbl2 = new qx.ui.layout.HorizontalBoxLayout; - - hbl2.setTop(138); - hbl2.setLeft(20); - hbl2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl2.setHeight("auto"); - hbl2.setRight(335); - - hbl2.setSpacing(4); - hbl2.setPadding(8); - - hbl2.setHorizontalChildrenAlign("right"); - hbl2.setVerticalChildrenAlign("middle"); - - - var w2_1 = new qx.ui.layout.CanvasLayout; - w2_1.setWidth(25); - w2_1.setHeight(25); - w2_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w2_1.setBackgroundColor(cl_white); - // w2_1.setMaxHeight(40); - - var w2_2 = new qx.ui.layout.CanvasLayout; - w2_2.setWidth(25); - w2_2.setHeight(25); - w2_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w2_2.setBackgroundColor(cl_blue); - w2_2.setBottom(10); - - var w2_3 = new qx.ui.layout.CanvasLayout; - w2_3.setWidth(25); - w2_3.setHeight("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.setWidth(25); - w2_4.setHeight(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.setWidth(40); - // w2_5.setHeight(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.setWidth(25); - w2_6.setHeight(25); - w2_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w2_6.setBackgroundColor(cl_purple); - w2_6.setTop(15); - w2_6.setLeft(-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.setWidth(25); - w2_9.setHeight(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.setWidth(25); - w2_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight(80); - break; - - case 3: - this.setHeight("auto"); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl2_click = 0; - return; - }; - - hbl2_click++; - }); - - w2_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w2_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w2_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w2_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w2_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w2_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w2_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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.HorizontalBoxLayout; - - hbl3.setTop(228); - hbl3.setLeft(20); - hbl3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl3.setHeight("auto"); - hbl3.setRight(335); - - hbl3.setSpacing(4); - hbl3.setPadding(8); - - hbl3.setHorizontalChildrenAlign("center"); - - - - var w3_1 = new qx.ui.layout.CanvasLayout; - w3_1.setWidth(25); - w3_1.setHeight(25); - w3_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w3_1.setBackgroundColor(cl_white); - // w3_1.setMaxHeight(40); - - var w3_2 = new qx.ui.layout.CanvasLayout; - w3_2.setWidth(25); - w3_2.setHeight(25); - w3_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w3_2.setBackgroundColor(cl_blue); - w3_2.setBottom(10); - - var w3_3 = new qx.ui.layout.CanvasLayout; - w3_3.setWidth(25); - w3_3.setHeight("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.setWidth(25); - w3_4.setHeight(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.setWidth(40); - // w3_5.setHeight(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.setWidth(25); - w3_6.setHeight(25); - w3_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w3_6.setBackgroundColor(cl_purple); - w3_6.setTop(15); - w3_6.setLeft(-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.setWidth(25); - w3_9.setHeight(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.setWidth(25); - w3_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight(80); - break; - - case 3: - this.setHeight("auto"); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl3_click = 0; - return; - }; - - hbl3_click++; - }); - - w3_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w3_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w3_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w3_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w3_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w3_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w3_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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: - LEFT ALIGN, REVERTED CHILDREN ORDER - - *********************************************** */ - - var hbl4 = new qx.ui.layout.HorizontalBoxLayout; - - hbl4.setTop(318); - hbl4.setLeft(20); - hbl4.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl4.setWidth(null); - hbl4.setRight(335); - - hbl4.setSpacing(4); - hbl4.setPadding(8); - hbl4.setReverseChildrenOrder(true); - hbl4.setVerticalChildrenAlign("bottom"); - - hbl4.setHeight(80); - - - - var w4_1 = new qx.ui.layout.CanvasLayout; - w4_1.setWidth(25); - w4_1.setHeight(25); - w4_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w4_1.setBackgroundColor(cl_white); - // w4_1.setMaxHeight(40); - - var w4_2 = new qx.ui.layout.CanvasLayout; - w4_2.setWidth(25); - w4_2.setHeight(25); - w4_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w4_2.setBackgroundColor(cl_blue); - w4_2.setBottom(10); - - var w4_3 = new qx.ui.layout.CanvasLayout; - w4_3.setWidth(25); - w4_3.setHeight("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.setWidth(25); - w4_4.setHeight(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.setWidth(40); - // w4_5.setHeight(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.setWidth(25); - w4_6.setHeight(25); - w4_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w4_6.setBackgroundColor(cl_purple); - w4_6.setTop(15); - w4_6.setLeft(-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.setWidth(25); - w4_9.setHeight(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.setWidth(25); - w4_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight("auto"); - break; - - case 3: - this.setHeight(80); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl4_click = 0; - return; - }; - - hbl4_click++; - }); - - w4_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w4_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w4_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w4_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w4_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w4_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w4_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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: - RIGHT ALIGN, REVERTED CHILDREN ORDER - - *********************************************** */ - - var hbl5 = new qx.ui.layout.HorizontalBoxLayout; - - hbl5.setTop(408); - hbl5.setLeft(20); - hbl5.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl5.setWidth(null); - hbl5.setRight(335); - - hbl5.setSpacing(4); - hbl5.setPadding(8); - - hbl5.setHorizontalChildrenAlign("right"); - hbl5.setReverseChildrenOrder(true); - hbl5.setVerticalChildrenAlign("middle"); - - hbl5.setHeight(80); - - - var w5_1 = new qx.ui.layout.CanvasLayout; - w5_1.setWidth(25); - w5_1.setHeight(25); - w5_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w5_1.setBackgroundColor(cl_white); - // w5_1.setMaxHeight(40); - - var w5_2 = new qx.ui.layout.CanvasLayout; - w5_2.setWidth(25); - w5_2.setHeight(25); - w5_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w5_2.setBackgroundColor(cl_blue); - w5_2.setBottom(10); - - var w5_3 = new qx.ui.layout.CanvasLayout; - w5_3.setWidth(25); - w5_3.setHeight("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.setWidth(25); - w5_4.setHeight(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.setWidth(40); - // w5_5.setHeight(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.setWidth(25); - w5_6.setHeight(25); - w5_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w5_6.setBackgroundColor(cl_purple); - w5_6.setTop(15); - w5_6.setLeft(-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.setWidth(25); - w5_9.setHeight(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.setWidth(25); - w5_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight("auto"); - break; - - case 3: - this.setHeight(80); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl5_click = 0; - return; - }; - - hbl5_click++; - }); - - w5_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w5_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w5_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w5_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w5_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w5_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w5_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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.HorizontalBoxLayout; - - hbl6.setTop(498); - hbl6.setLeft(20); - hbl6.setBorder(qx.renderer.border.BorderPresets.getInstance().outset); - hbl6.setWidth(null); - hbl6.setRight(335); - - hbl6.setSpacing(4); - hbl6.setPadding(8); - - hbl6.setHorizontalChildrenAlign("center"); - hbl6.setReverseChildrenOrder(true); - hbl6.setHeight(80); - - - var w6_1 = new qx.ui.layout.CanvasLayout; - w6_1.setWidth(25); - w6_1.setHeight(25); - w6_1.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w6_1.setBackgroundColor(cl_white); - // w6_1.setMaxHeight(40); - - var w6_2 = new qx.ui.layout.CanvasLayout; - w6_2.setWidth(25); - w6_2.setHeight(25); - w6_2.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w6_2.setBackgroundColor(cl_blue); - w6_2.setBottom(10); - - var w6_3 = new qx.ui.layout.CanvasLayout; - w6_3.setWidth(25); - w6_3.setHeight("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.setWidth(25); - w6_4.setHeight(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.setWidth(40); - // w6_5.setHeight(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.setWidth(25); - w6_6.setHeight(25); - w6_6.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - w6_6.setBackgroundColor(cl_purple); - w6_6.setTop(15); - w6_6.setLeft(-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.setWidth(25); - w6_9.setHeight(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.setWidth(25); - w6_10.setHeight(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.setRight(null); - this.setWidth("auto"); - break; - - case 1: - this.setHeight(30); - break; - - case 2: - this.setHeight("auto"); - break; - - case 3: - this.setHeight(80); - break; - - case 4: - this.setWidth(200); - break; - - case 5: - this.setWidth(null); - this.setRight(335); - hbl6_click = 0; - return; - }; - - hbl6_click++; - }); - - w6_1.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(65); - this.setHeight(65); - this.setBorder(new qx.renderer.border.Border(6, "double", "black")); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setBorder(qx.renderer.border.BorderPresets.getInstance().black); - }; - }); - - w6_2.addEventListener("click", function(e) { - this.getMarginRight() == 0 ? this.setMarginRight(10) : this.setMarginRight(0); - }); - - w6_3.addEventListener("click", function(e) { - this.getMinWidth() == -Infinity ? this.setMinWidth(100) : this.setMinWidth(-Infinity); - }); - - w6_4.addEventListener("click", function(e) { - this.getWidth() == 25 ? this.setWidth(50) : this.setWidth(25); - }); - - w6_5.addEventListener("click", function(e) { - this.getWidth() == 40 ? this.setWidth(80) : this.setWidth(40); - }); - - w6_6.addEventListener("click", function(e) { - this.getLeft() == -25 ? this.setLeft(25) : this.setLeft(-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.getTop() == null) - { - this.setTop(20); - this.setLeft(-10); - } - else - { - this.setTop(null); - this.setLeft(null); - }; - }); - - w6_10.addEventListener("click", function(e) - { - if (this.getWidth() == 25) - { - this.setWidth(10); - this.setHeight(10); - this.setLeft(-5); - this.setBottom(15); - } - else - { - this.setWidth(25); - this.setHeight(25); - this.setLeft(null); - this.setBottom(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 |