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="demoDescription">
15 <p>Introducing qx.ui.toolbar.CheckBox and qx.ui.toolbar.RadioButton.</p>
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var d = qx.ui.core.ClientDocument.getInstance();
23 function changeLayout(e) {
24 this.setShow(e.getData());
27 function changeSize(e) {
29 var o = v == 22 ? 32 : 22;
31 this.setIcon(this.getIcon().replace(o, v));
34 var tb = new qx.ui.toolbar.ToolBar;
44 var tbp1 = new qx.ui.toolbar.Part;
47 var tbp2 = new qx.ui.toolbar.Part;
50 var tbp3 = new qx.ui.toolbar.Part;
53 var tbp4 = new qx.ui.toolbar.Part;
59 var tbd1 = new qx.ui.toolbar.Button("Default", "icon/22/file-new.png");
61 d.addEventListener("changeLayout", changeLayout, tbd1);
62 d.addEventListener("changeSize", changeSize, tbd1);
66 tbp1.setDisplay(false);
67 tbd1.setDisplay(false);
72 var tbc1 = new qx.ui.toolbar.CheckBox("Check", "icon/22/configure.png", true);
74 d.addEventListener("changeLayout", changeLayout, tbc1);
75 d.addEventListener("changeSize", changeSize, tbc1);
80 var tbr1 = new qx.ui.toolbar.RadioButton("Radio1", "icon/22/view-choose.png");
82 d.addEventListener("changeLayout", changeLayout, tbr1);
83 d.addEventListener("changeSize", changeSize, tbr1);
85 var tbr2 = new qx.ui.toolbar.RadioButton("Radio2", "icon/22/view-detailed.png", true);
87 d.addEventListener("changeLayout", changeLayout, tbr2);
88 d.addEventListener("changeSize", changeSize, tbr2);
90 var tbr3 = new qx.ui.toolbar.RadioButton("Radio3", "icon/22/view-icon.png");
92 d.addEventListener("changeLayout", changeLayout, tbr3);
93 d.addEventListener("changeSize", changeSize, tbr3);
96 var tbr_manager = new qx.manager.selection.RadioManager(null, [tbr1, tbr2, tbr3]);
102 var tbs1 = new qx.ui.toolbar.RadioButton("Radio1", "icon/22/view-choose.png");
104 tbs1.setDisableUncheck(true);
105 d.addEventListener("changeLayout", changeLayout, tbs1);
106 d.addEventListener("changeSize", changeSize, tbs1);
108 var tbs2 = new qx.ui.toolbar.RadioButton("Radio2", "icon/22/view-detailed.png", true);
110 tbs2.setDisableUncheck(true);
111 d.addEventListener("changeLayout", changeLayout, tbs2);
112 d.addEventListener("changeSize", changeSize, tbs2);
114 var tbs3 = new qx.ui.toolbar.RadioButton("Radio3", "icon/22/view-icon.png");
116 tbs3.setDisableUncheck(true);
117 d.addEventListener("changeLayout", changeLayout, tbs3);
118 d.addEventListener("changeSize", changeSize, tbs3);
121 var tbs_manager = new qx.manager.selection.RadioManager(null, [tbs1, tbs2, tbs3]);
126 var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
127 var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
128 var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
149 var rbm = new qx.manager.selection.RadioManager();
155 // beautiful decoupling: radio boxes don't know about toolbar buttons
156 rbm.addEventListener("changeSelected", function(e)
158 d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
161 d.add(rd1, rd2, rd3);
164 // apply default layout
165 rd1.setChecked(true);
172 var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
173 var ra2 = new qx.ui.form.RadioButton("Centered", "center");
174 var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
196 var ram = new qx.manager.selection.RadioManager();
202 d.add(ra1, ra2, ra3);
204 ram.addEventListener("changeSelected", function(e) {
205 tb.setHorizontalChildrenAlign(e.getData().getValue());
212 var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
218 setHorizontalAlign("center");
221 b3.addEventListener("execute", function(e) {
222 d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
225 var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
231 setHorizontalAlign("center");
234 b4.addEventListener("execute", function(e) {
235 d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
245 var chkShowBtn1 = new qx.ui.form.CheckBox("Show First Button");
247 chkShowBtn1.setLocation(20, 500);
248 chkShowBtn1.addEventListener("changeChecked", function(e) {
249 tbd1.setDisplay(e.getData());
252 var chkShowPart1 = new qx.ui.form.CheckBox("Show First Part");
254 chkShowPart1.setLocation(220, 500);
255 chkShowPart1.addEventListener("changeChecked", function(e) {
256 tbp1.setDisplay(e.getData());
259 d.add(chkShowBtn1, chkShowPart1);
263 // Icon & Color Themes
264 qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
265 qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);