webapps/qooxdoo-0.6.5-sdk/frontend/application/sample/source/html/test/DockLayout_2.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo &raquo; Sample</title>
   5   <link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/sample.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     The next generation of table-less layouts ;)
  16   </div>
  17
  18   <script type="text/javascript">
  19   function selfRemove() {
  20     this.getParent().remove(this);
  21   };
  22
  23   qx.core.Init.getInstance().defineMain(function()
  24   {
  25     var d = qx.ui.core.ClientDocument.getInstance();
  26
  27     var dl1 = new qx.ui.layout.DockLayout;
  28
  29     dl1.setTop(48);
  30     dl1.setLeft(20);
  31     dl1.setRight(335);
  32     dl1.setBottom(120);
  33     dl1.setMinWidth(400);
  34     dl1.setMinHeight(300);
  35
  36     dl1.setBorder(2, "outset");
  37     dl1.setBackgroundColor("white");
  38
  39     d.add(dl1);
  40
  41
  42
  43     var t1 = new qx.ui.basic.Terminator;
  44     t1.setHeight(50);
  45     t1.setBackgroundColor("red");
  46     t1.setVerticalAlign("top");
  47     t1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  48     t1.addEventListener("click", selfRemove);
  49
  50     var t2 = new qx.ui.basic.Terminator;
  51     // t2.setWidth(150);
  52     t2.setWidth("20%");
  53     t2.setBackgroundColor("gray");
  54     t2.setHorizontalAlign("left");
  55     t2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  56     t2.addEventListener("click", selfRemove);
  57
  58     var t3 = new qx.ui.basic.Terminator;
  59     t3.setHeight(100);
  60     t3.setBackgroundColor("yellow");
  61     t3.setVerticalAlign("top");
  62     t3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  63     t3.addEventListener("click", selfRemove);
  64
  65     var t4 = new qx.ui.basic.Terminator;
  66     t4.setWidth(40);
  67     t4.setBackgroundColor("orange");
  68     t4.setHorizontalAlign("right");
  69     t4.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  70     t4.addEventListener("click", selfRemove);
  71
  72     var t5 = new qx.ui.basic.Terminator;
  73     t5.setHeight(80);
  74     t5.setBackgroundColor("blue");
  75     t5.setVerticalAlign("bottom");
  76     t5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  77     t5.addEventListener("click", selfRemove);
  78
  79     var t6 = new qx.ui.basic.Terminator;
  80     t6.setBackgroundColor("green");
  81     t6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
  82     t6.addEventListener("click", selfRemove);
  83
  84     dl1.add(t1, t2, t3, t4, t5, t6);
  85
  86
  87
  88
  89
  90
  91
  92
  93
  94     var l1 = new qx.ui.basic.Label("Mode:");
  95     l1.setWidth(50);
  96
  97     var btn1_1 = new qx.ui.form.Button("Vertical", "icon/16/actions/dialog-ok.png");
  98     var btn1_2 = new qx.ui.form.Button("Horizontal", "icon/16/actions/dialog-ok.png");
  99     var btn1_3 = new qx.ui.form.Button("Ordered", "icon/16/actions/dialog-ok.png");
 100
 101     btn1_1.addEventListener("click", function(e) {
 102       dl1.setMode("vertical");
 103     });
 104
 105     btn1_2.addEventListener("click", function(e) {
 106       dl1.setMode("horizontal");
 107     });
 108
 109     btn1_3.addEventListener("click", function(e) {
 110       dl1.setMode("ordered");
 111     });
 112
 113     var h1 = new qx.ui.layout.HorizontalBoxLayout;
 114     h1.setVerticalChildrenAlign("middle");
 115     h1.add(l1, btn1_1, btn1_2, btn1_3);
 116     h1.setBottom(78);
 117     h1.setLeft(20);
 118     d.add(h1);
 119
 120
 121
 122
 123
 124
 125
 126
 127
 128     var l2 = new qx.ui.basic.Label("Children:");
 129     l2.setWidth(50);
 130
 131     var btn2_1 = new qx.ui.form.Button("Remove First", "icon/16/actions/dialog-ok.png");
 132     var btn2_2 = new qx.ui.form.Button("Remove Last", "icon/16/actions/dialog-ok.png");
 133     var btn2_3 = new qx.ui.form.Button("Add Top", "icon/16/actions/dialog-ok.png");
 134     var btn2_4 = new qx.ui.form.Button("Add Right", "icon/16/actions/dialog-ok.png");
 135     var btn2_5 = new qx.ui.form.Button("Add Bottom", "icon/16/actions/dialog-ok.png");
 136     var btn2_6 = new qx.ui.form.Button("Add Left", "icon/16/actions/dialog-ok.png");
 137     var btn2_7 = new qx.ui.form.Button("Add Auto", "icon/16/actions/dialog-ok.png");
 138
 139     btn2_1.addEventListener("execute", function(e)
 140     {
 141       var c = dl1.getFirstChild();
 142       if (c) {
 143         dl1.remove(c);
 144       };
 145     });
 146
 147     btn2_2.addEventListener("execute", function(e)
 148     {
 149       var c = dl1.getLastChild();
 150       if (c) {
 151         dl1.remove(c);
 152       };
 153     });
 154
 155     btn2_3.addEventListener("execute", function(e)
 156     {
 157       var t = new qx.ui.basic.Terminator();
 158
 159       t.setBackgroundColor(qx.renderer.color.Color.fromRandom());
 160       t.setHeight(2+Math.round(Math.random()*50));
 161       t.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 162       t.addEventListener("click", selfRemove);
 163
 164       dl1.addTop(t);
 165     });
 166
 167     btn2_4.addEventListener("execute", function(e)
 168     {
 169       var t = new qx.ui.basic.Terminator();
 170
 171       t.setBackgroundColor(qx.renderer.color.Color.fromRandom());
 172       t.setWidth(2+Math.round(Math.random()*50));
 173       t.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 174       t.addEventListener("click", selfRemove);
 175
 176       dl1.addRight(t);
 177     });
 178
 179     btn2_5.addEventListener("execute", function(e)
 180     {
 181       var t = new qx.ui.basic.Terminator();
 182
 183       t.setBackgroundColor(qx.renderer.color.Color.fromRandom());
 184       t.setHeight(2+Math.round(Math.random()*50));
 185       t.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 186       t.addEventListener("click", selfRemove);
 187
 188       dl1.addBottom(t);
 189     });
 190
 191     btn2_6.addEventListener("execute", function(e)
 192     {
 193       var t = new qx.ui.basic.Terminator();
 194
 195       t.setBackgroundColor(qx.renderer.color.Color.fromRandom());
 196       t.setWidth(2+Math.round(Math.random()*50));
 197       t.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 198       t.addEventListener("click", selfRemove);
 199
 200       dl1.addLeft(t);
 201     });
 202
 203     btn2_7.addEventListener("execute", function(e)
 204     {
 205       var t = new qx.ui.basic.Terminator();
 206
 207       t.setBackgroundColor(qx.renderer.color.Color.fromRandom());
 208       t.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
 209       t.addEventListener("click", selfRemove);
 210
 211       dl1.add(t);
 212     });
 213
 214
 215     var h2 = new qx.ui.layout.HorizontalBoxLayout;
 216     h2.setVerticalChildrenAlign("middle");
 217     h2.add(l2, btn2_1, btn2_2, btn2_3, btn2_4, btn2_5, btn2_6, btn2_7);
 218     h2.setBottom(48);
 219     h2.setLeft(20);
 220     d.add(h2);
 221   });
 222   </script>
 223 </body>
 224 </html>