r19141: add a reasonable subset of the qooxdoo runtime environment, and example applications

(This used to be commit ff28ab7314ff1eebcd62f387678b816091af8121)
author: Derrell Lipman <derrell@samba.org> 2006-10-06 15:40:18 +0000
committer: Gerald (Jerry) Carter <jerry@samba.org> 2007-10-10 14:20:40 -0500
commit: 10c06a1968dbf39d8a3790077a3537b8323f36ff (patch)
tree: f7389aac531dfe7c0d538879bdbd15cca33156e4 /swat/apps/qooxdoo-examples/test/VerticalBoxLayout_2.html
parent: 77fc14c0818498e277a79196fa4f6e15f4b607b1 (diff)
download: samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.gz
samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.bz2
samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.zip
1 files changed, 1227 insertions, 0 deletions
diff --git a/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_2.html b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_2.html
new file mode 100644
index 0000000000..9a8781e312
--- /dev/null
+++ b/swat/apps/qooxdoo-examples/test/VerticalBoxLayout_2.html
@@ -0,0 +1,1227 @@
+<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.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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth(80);
+          break;
+          
+        case 2:
+          this.setWidth("auto");
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth(80);
+          break;
+          
+        case 2:
+          this.setWidth("auto");
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth(80);
+          break;
+          
+        case 2:
+          this.setWidth("auto");
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth("auto");
+          break;
+          
+        case 2:
+          this.setWidth(80);
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth("auto");
+          break;
+          
+        case 2:
+          this.setWidth(80);
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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("15%");
+    // 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.setWidth(30);
+          break;
+        
+        case 1:
+          this.setWidth("auto");
+          break;
+          
+        case 2:
+          this.setWidth(80);
+          break;
+          
+        case 3:
+          this.setHeight(200);
+          break;
+          
+        case 4:
+          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
author	Derrell Lipman <derrell@samba.org>	2006-10-06 15:40:18 +0000
committer	Gerald (Jerry) Carter <jerry@samba.org>	2007-10-10 14:20:40 -0500
commit	10c06a1968dbf39d8a3790077a3537b8323f36ff (patch)
tree	f7389aac531dfe7c0d538879bdbd15cca33156e4 /swat/apps/qooxdoo-examples/test/VerticalBoxLayout_2.html
parent	77fc14c0818498e277a79196fa4f6e15f4b607b1 (diff)
download	samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.gz samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.tar.bz2 samba-10c06a1968dbf39d8a3790077a3537b8323f36ff.zip