diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/VerticalBoxLayout_1.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/VerticalBoxLayout_1.html | 1257 |
1 files changed, 0 insertions, 1257 deletions
diff --git a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/VerticalBoxLayout_1.html b/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/VerticalBoxLayout_1.html deleted file mode 100644 index 5c820b0bda..0000000000 --- a/webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/VerticalBoxLayout_1.html +++ /dev/null @@ -1,1257 +0,0 @@ -<html> -<head> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <title>qooxdoo » Demo » Sample</title> - <link type="text/css" rel="stylesheet" href="../../css/layout.css"/> - <!--[if IE]> - <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/> - <![endif]--> - <script type="text/javascript" src="../../script/sample.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/apps/accessories-clock.png"); - - var w1_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w1_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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/apps/accessories-clock.png"); - - var w2_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w2_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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/apps/accessories-clock.png"); - - var w3_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w3_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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/apps/accessories-clock.png"); - - var w4_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w4_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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/apps/accessories-clock.png"); - - var w5_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w5_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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/apps/accessories-clock.png"); - - var w6_8 = new qx.ui.basic.Image("icon/32/actions/format-color.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/apps/accessories-clock.png" ? this.setSource("icon/64/apps/accessories-clock.png") : this.setSource("icon/32/apps/accessories-clock.png"); - }); - - w6_8.addEventListener("click", function(e) { - this.getSource() == "icon/32/actions/format-color.png" ? this.setSource("icon/16/actions/format-color.png") : this.setSource("icon/32/actions/format-color.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 |