3 <meta http-equiv=
"Content-Type" content=
"text/html; charset=utf-8" />
4 <title>qooxdoo
» Demo
</title>
5 <link type=
"text/css" rel=
"stylesheet" href=
"../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type=
"text/javascript" src=
"../../script/qx.js"></script>
12 <script type=
"text/javascript" src=
"../../script/layout.js"></script>
14 <div id=
"testCommand" class=
"manualFrame">
15 <style type=
"text/css">
33 <table class=
"setform"><tbody>
37 <label for=
"sel_orientation">Orientation:
</label>
40 <select id=
"sel_orientation">
41 <option selected=
"selected">horizontal
</option>
42 <option>vertical
</option>
48 <td>Width/Height:
</td>
50 <select id=
"sel_width">
52 <option selected=
"selected">250</option>
56 <select id=
"sel_height">
58 <option selected=
"selected">250</option>
66 <td>Spacing/Padding:
</td>
68 <select id=
"sel_spacing">
69 <option selected=
"selected">0</option>
74 <select id=
"sel_padding">
75 <option selected=
"selected">0</option>
85 <label for=
"sel_order">Order/Stretching:
</label>
88 <select id=
"sel_order">
89 <option selected=
"selected">default
</option>
90 <option>reverse
</option>
92 <select id=
"sel_stretch">
93 <option selected=
"selected">enabled
</option>
94 <option>disabled
</option>
100 <td>Horizontal/Vertical Align:
</td>
102 <select id=
"sel_horalg">
103 <option selected=
"selected">left
</option>
104 <option>center
</option>
105 <option>right
</option>
107 <select id=
"sel_veralg">
108 <option selected=
"selected">top
</option>
109 <option>middle
</option>
110 <option>bottom
</option>
118 <button id=
"btn_save">Apply
</button>
126 <li><a href=
"javascript:test1()">Test
1: Remove blue widget
</a></li>
127 <li><a href=
"javascript:test2()">Test
2: Add blue widget
</a></li>
128 <li><a href=
"javascript:test3()">Test
3: Add blue widget at position
2</a></li>
129 <li><a href=
"javascript:test4()">Test
4: Add blue widget at position
4</a></li>
130 <li><a href=
"javascript:test5()">Test
5: Add green widget at before the cdrom
</a></li>
131 <li><a href=
"javascript:test6()">Test
6: Add green widget at after the color palette
</a></li>
132 <li><a href=
"javascript:test7()">Test
7: Add new widget to layout
</a></li>
136 <div id=
"demoDescription">
137 <p>Now something more complex. Try to configure multiple things and then press
<apply
>.
</p>
140 <script type=
"text/javascript">
142 var bl
, w1
, w2
, w3
, w4
, w5
, w6
, w7
, w8
;
144 var _b
= document
.getElementById("btn_save");
145 var _t
= document
.getElementById("sel_orientation");
146 var _w
= document
.getElementById("sel_width");
147 var _h
= document
.getElementById("sel_height");
148 var _s
= document
.getElementById("sel_spacing");
149 var _p
= document
.getElementById("sel_padding");
150 var _o
= document
.getElementById("sel_order");
151 var _r
= document
.getElementById("sel_stretch");
152 var _l
= document
.getElementById("sel_horalg");
153 var _v
= document
.getElementById("sel_veralg");
157 var vt
= _t
.options
[_t
.selectedIndex
].firstChild
.nodeValue
;
158 var vw
= _w
.options
[_w
.selectedIndex
].firstChild
.nodeValue
;
159 var vh
= _h
.options
[_h
.selectedIndex
].firstChild
.nodeValue
;
160 var vs
= _s
.options
[_s
.selectedIndex
].firstChild
.nodeValue
;
161 var vp
= _p
.options
[_p
.selectedIndex
].firstChild
.nodeValue
;
162 var vo
= _o
.options
[_o
.selectedIndex
].firstChild
.nodeValue
;
163 var vr
= _r
.options
[_r
.selectedIndex
].firstChild
.nodeValue
;
164 var vl
= _l
.options
[_l
.selectedIndex
].firstChild
.nodeValue
;
165 var vv
= _v
.options
[_v
.selectedIndex
].firstChild
.nodeValue
;
167 bl
.setOrientation(vt
);
168 bl
.setWidth(vw
== "auto" ? vw
: parseInt(vw
));
169 bl
.setHeight(vh
== "auto" ? vh
: parseInt(vh
));
170 bl
.setSpacing(parseInt(vs
));
171 bl
.setPadding(parseInt(vp
));
172 bl
.setReverseChildrenOrder(vo
== "reverse");
173 bl
.setStretchChildrenOrthogonalAxis(vr
== "enabled");
174 bl
.setHorizontalChildrenAlign(vl
);
175 bl
.setVerticalChildrenAlign(vv
);
179 _b
.attachEvent("onclick", save
);
180 else if (_b
.addEventListener
)
181 _b
.addEventListener("click", save
, false);
187 qx
.ui
.core
.Widget
.flushGlobalQueues();
193 qx
.ui
.core
.Widget
.flushGlobalQueues();
199 qx
.ui
.core
.Widget
.flushGlobalQueues();
205 qx
.ui
.core
.Widget
.flushGlobalQueues();
210 bl
.addBefore(w3
, w7
);
211 qx
.ui
.core
.Widget
.flushGlobalQueues();
217 qx
.ui
.core
.Widget
.flushGlobalQueues();
223 qx
.ui
.core
.Widget
.flushGlobalQueues();
226 qx
.core
.Init
.getInstance().defineMain(function()
228 var d
= qx
.ui
.core
.ClientDocument
.getInstance();
230 bl
= new qx
.ui
.layout
.BoxLayout("horizontal");
231 bl
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
232 bl
.setBackgroundColor(new qx
.renderer
.color
.Color("white"));
238 w1
= new qx
.ui
.layout
.CanvasLayout
;
239 w1
.setBackgroundColor(new qx
.renderer
.color
.Color("orange"));
242 w1
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
244 w2
= new qx
.ui
.layout
.CanvasLayout
;
245 w2
.setBackgroundColor(new qx
.renderer
.color
.Color("blue"));
248 w2
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
250 w3
= new qx
.ui
.layout
.CanvasLayout
;
251 w3
.setBackgroundColor(new qx
.renderer
.color
.Color("green"));
254 w3
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
256 w4
= new qx
.ui
.basic
.Image("icon/32/colors.png");
258 w5
= new qx
.ui
.layout
.CanvasLayout
;
259 w5
.setBackgroundColor(new qx
.renderer
.color
.Color("yellow"));
262 w5
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
264 w6
= new qx
.ui
.layout
.CanvasLayout
;
265 w6
.setBackgroundColor(new qx
.renderer
.color
.Color("red"));
268 w6
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
270 w7
= new qx
.ui
.basic
.Image("icon/64/cdrom.png");
272 w8
= new qx
.ui
.layout
.CanvasLayout
;
273 w8
.setBackgroundColor(new qx
.renderer
.color
.Color("fuchsia"));
276 w8
.setBorder(qx
.renderer
.border
.BorderPresets
.getInstance().black
);
278 bl
.add(w1
, w2
, w3
, w4
, w5
, w6
, w7
);