<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="testCommand" class="manualFrame">
<style type="text/css">
#testCommand{
position: absolute;
right: 335px;
bottom: 48px;
width: 350px;
}
.setform select{
font-size: 11px;
min-width: 75px;
}
.setform button{
font-size: 11px;
}
</style>
<table class="setform"><tbody>
<tr>
<td>
<label for="sel_orientation">Orientation:</label>
</td>
<td>
<select id="sel_orientation">
<option selected="selected">horizontal</option>
<option>vertical</option>
</select>
</td>
</tr>
<tr>
<td>Width/Height:</td>
<td>
<select id="sel_width">
<option>100</option>
<option selected="selected">250</option>
<option>500</option>
<option>auto</option>
</select>
<select id="sel_height">
<option>100</option>
<option selected="selected">250</option>
<option>500</option>
<option>auto</option>
</select>
</td>
</tr>
<tr>
<td>Spacing/Padding:</td>
<td>
<select id="sel_spacing">
<option selected="selected">0</option>
<option>2</option>
<option>4</option>
<option>8</option>
</select>
<select id="sel_padding">
<option selected="selected">0</option>
<option>2</option>
<option>4</option>
<option>8</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="sel_order">Order/Stretching:</label>
</td>
<td>
<select id="sel_order">
<option selected="selected">default</option>
<option>reverse</option>
</select>
<select id="sel_stretch">
<option selected="selected">enabled</option>
<option>disabled</option>
</select>
</td>
</tr>
<tr>
<td>Horizontal/Vertical Align:</td>
<td>
<select id="sel_horalg">
<option selected="selected">left</option>
<option>center</option>
<option>right</option>
</select>
<select id="sel_veralg">
<option selected="selected">top</option>
<option>middle</option>
<option>bottom</option>
</select>
</td>
</tr>
<tr>
<td> </td>
<td>
<button id="btn_save">Apply</button>
</td>
</tr>
</tbody></table>
<p><b>Tests</b></p>
<ul>
<li><a href="javascript:test1()">Test 1: Remove blue widget</a></li>
<li><a href="javascript:test2()">Test 2: Add blue widget</a></li>
<li><a href="javascript:test3()">Test 3: Add blue widget at position 2</a></li>
<li><a href="javascript:test4()">Test 4: Add blue widget at position 4</a></li>
<li><a href="javascript:test5()">Test 5: Add green widget at before the cdrom</a></li>
<li><a href="javascript:test6()">Test 6: Add green widget at after the color palette</a></li>
<li><a href="javascript:test7()">Test 7: Add new widget to layout</a></li>
</ul>
</div>
<div id="demoDescription">
<p>Now something more complex. Try to configure multiple things and then press <apply>.</p>
</div>
<script type="text/javascript">
var bl, w1, w2, w3, w4, w5, w6, w7, w8;
var _b = document.getElementById("btn_save");
var _t = document.getElementById("sel_orientation");
var _w = document.getElementById("sel_width");
var _h = document.getElementById("sel_height");
var _s = document.getElementById("sel_spacing");
var _p = document.getElementById("sel_padding");
var _o = document.getElementById("sel_order");
var _r = document.getElementById("sel_stretch");
var _l = document.getElementById("sel_horalg");
var _v = document.getElementById("sel_veralg");
function save()
{
var vt = _t.options[_t.selectedIndex].firstChild.nodeValue;
var vw = _w.options[_w.selectedIndex].firstChild.nodeValue;
var vh = _h.options[_h.selectedIndex].firstChild.nodeValue;
var vs = _s.options[_s.selectedIndex].firstChild.nodeValue;
var vp = _p.options[_p.selectedIndex].firstChild.nodeValue;
var vo = _o.options[_o.selectedIndex].firstChild.nodeValue;
var vr = _r.options[_r.selectedIndex].firstChild.nodeValue;
var vl = _l.options[_l.selectedIndex].firstChild.nodeValue;
var vv = _v.options[_v.selectedIndex].firstChild.nodeValue;
bl.setOrientation(vt);
bl.setWidth(vw == "auto" ? vw : parseInt(vw));
bl.setHeight(vh == "auto" ? vh : parseInt(vh));
bl.setSpacing(parseInt(vs));
bl.setPadding(parseInt(vp));
bl.setReverseChildrenOrder(vo == "reverse");
bl.setStretchChildrenOrthogonalAxis(vr == "enabled");
bl.setHorizontalChildrenAlign(vl);
bl.setVerticalChildrenAlign(vv);
};
if (_b.attachEvent)
_b.attachEvent("onclick", save);
else if (_b.addEventListener)
_b.addEventListener("click", save, false);
function test1()
{
bl.remove(w2);
qx.ui.core.Widget.flushGlobalQueues();
};
function test2()
{
bl.add(w2);
qx.ui.core.Widget.flushGlobalQueues();
};
function test3()
{
bl.addAt(w2, 2);
qx.ui.core.Widget.flushGlobalQueues();
};
function test4()
{
bl.addAt(w2, 4);
qx.ui.core.Widget.flushGlobalQueues();
};
function test5()
{
bl.addBefore(w3, w7);
qx.ui.core.Widget.flushGlobalQueues();
};
function test6()
{
bl.addAfter(w3, w4);
qx.ui.core.Widget.flushGlobalQueues();
};
function test7()
{
bl.addAt(w8, 1);
qx.ui.core.Widget.flushGlobalQueues();
};
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
bl = new qx.ui.layout.BoxLayout("horizontal");
bl.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
bl.setBackgroundColor(new qx.renderer.color.Color("white"));
bl.setWidth(250);
bl.setHeight(250);
bl.setTop(48);
bl.setLeft(20);
w1 = new qx.ui.layout.CanvasLayout;
w1.setBackgroundColor(new qx.renderer.color.Color("orange"));
w1.setMinWidth(20);
w1.setMinHeight(20);
w1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
w2 = new qx.ui.layout.CanvasLayout;
w2.setBackgroundColor(new qx.renderer.color.Color("blue"));
w2.setMinWidth(20);
w2.setMinHeight(20);
w2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
w3 = new qx.ui.layout.CanvasLayout;
w3.setBackgroundColor(new qx.renderer.color.Color("green"));
w3.setMinWidth(20);
w3.setMinHeight(20);
w3.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
w4 = new qx.ui.basic.Image("icon/32/colors.png");
w5 = new qx.ui.layout.CanvasLayout;
w5.setBackgroundColor(new qx.renderer.color.Color("yellow"));
w5.setMinWidth(20);
w5.setMinHeight(20);
w5.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
w6 = new qx.ui.layout.CanvasLayout;
w6.setBackgroundColor(new qx.renderer.color.Color("red"));
w6.setMinWidth(20);
w6.setMinHeight(20);
w6.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
w7 = new qx.ui.basic.Image("icon/64/cdrom.png");
w8 = new qx.ui.layout.CanvasLayout;
w8.setBackgroundColor(new qx.renderer.color.Color("fuchsia"));
w8.setMinWidth(20);
w8.setMinHeight(20);
w8.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
bl.add(w1, w2, w3, w4, w5, w6, w7);
d.add(bl);
});
</script>
</body>
</html>