swat.obsolete/apps/qooxdoo-examples/example/ToolBar_2.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10 </head>
  11 <body>
  12   <script type="text/javascript" src="../../script/layout.js"></script>
  13
  14   <div id="demoDescription">
  15     <p>Introducing qx.ui.toolbar.ToolBarCheckBox and qx.ui.toolbar.ToolBarRadioButton.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19     qx.core.Init.getInstance().defineMain(function()
  20     {
  21       var d = qx.ui.core.ClientDocument.getInstance();
  22
  23       function changeLayout(e) {
  24         this.setShow(e.getData());
  25       };
  26
  27       function changeSize(e) {
  28         var v = e.getData();
  29         var o = v == 22 ? 32 : 22;
  30
  31         this.setIcon(this.getIcon().replace(o, v));
  32       };
  33
  34       var tb = new qx.ui.toolbar.ToolBar;
  35       with(tb)
  36       {
  37         setTop(48);
  38         setLeft(20);
  39         setRight(335);
  40         setParent(d);
  41       };
  42
  43
  44       var tbp1 = new qx.ui.toolbar.ToolBarPart;
  45       tb.add(tbp1);
  46
  47       var tbp2 = new qx.ui.toolbar.ToolBarPart;
  48       tb.add(tbp2);
  49
  50       var tbp3 = new qx.ui.toolbar.ToolBarPart;
  51       tb.add(tbp3);
  52
  53       var tbp4 = new qx.ui.toolbar.ToolBarPart;
  54       tb.add(tbp4);
  55
  56
  57
  58       // Default
  59       var tbd1 = new qx.ui.toolbar.ToolBarButton("Default", "icon/22/file-new.png");
  60       tbp1.add(tbd1);
  61       d.addEventListener("changeLayout", changeLayout, tbd1);
  62       d.addEventListener("changeSize", changeSize, tbd1);
  63
  64       tbd1._marker = true;
  65
  66       tbp1.setDisplay(false);
  67       tbd1.setDisplay(false);
  68
  69
  70
  71       // Checkbox
  72       var tbc1 = new qx.ui.toolbar.ToolBarCheckBox("Check", "icon/22/configure.png", true);
  73       tbp2.add(tbc1);
  74       d.addEventListener("changeLayout", changeLayout, tbc1);
  75       d.addEventListener("changeSize", changeSize, tbc1);
  76
  77
  78
  79       // Radio
  80       var tbr1 = new qx.ui.toolbar.ToolBarRadioButton("Radio1", "icon/22/view-choose.png");
  81       tbp3.add(tbr1);
  82       d.addEventListener("changeLayout", changeLayout, tbr1);
  83       d.addEventListener("changeSize", changeSize, tbr1);
  84
  85       var tbr2 = new qx.ui.toolbar.ToolBarRadioButton("Radio2", "icon/22/view-detailed.png", true);
  86       tbp3.add(tbr2);
  87       d.addEventListener("changeLayout", changeLayout, tbr2);
  88       d.addEventListener("changeSize", changeSize, tbr2);
  89
  90       var tbr3 = new qx.ui.toolbar.ToolBarRadioButton("Radio3", "icon/22/view-icon.png");
  91       tbp3.add(tbr3);
  92       d.addEventListener("changeLayout", changeLayout, tbr3);
  93       d.addEventListener("changeSize", changeSize, tbr3);
  94
  95       // Radio Mananger
  96       var tbr_manager = new qx.manager.selection.RadioManager(null, [tbr1, tbr2, tbr3]);
  97
  98
  99
 100
 101       // Radio
 102       var tbs1 = new qx.ui.toolbar.ToolBarRadioButton("Radio1", "icon/22/view-choose.png");
 103       tbp4.add(tbs1);
 104       tbs1.setDisableUncheck(true);
 105       d.addEventListener("changeLayout", changeLayout, tbs1);
 106       d.addEventListener("changeSize", changeSize, tbs1);
 107
 108       var tbs2 = new qx.ui.toolbar.ToolBarRadioButton("Radio2", "icon/22/view-detailed.png", true);
 109       tbp4.add(tbs2);
 110       tbs2.setDisableUncheck(true);
 111       d.addEventListener("changeLayout", changeLayout, tbs2);
 112       d.addEventListener("changeSize", changeSize, tbs2);
 113
 114       var tbs3 = new qx.ui.toolbar.ToolBarRadioButton("Radio3", "icon/22/view-icon.png");
 115       tbp4.add(tbs3);
 116       tbs3.setDisableUncheck(true);
 117       d.addEventListener("changeLayout", changeLayout, tbs3);
 118       d.addEventListener("changeSize", changeSize, tbs3);
 119
 120       // Radio Mananger
 121       var tbs_manager = new qx.manager.selection.RadioManager(null, [tbs1, tbs2, tbs3]);
 122
 123
 124
 125
 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");
 129
 130       with(rd1)
 131       {
 132         setTop(140);
 133         setLeft(20);
 134       };
 135
 136       with(rd2)
 137       {
 138         setTop(160);
 139         setLeft(20);
 140       };
 141
 142       with(rd3)
 143       {
 144         setTop(180);
 145         setLeft(20);
 146       };
 147
 148
 149       var rbm = new qx.manager.selection.RadioManager();
 150
 151       rbm.add(rd1);
 152       rbm.add(rd2);
 153       rbm.add(rd3);
 154
 155       // beautiful decoupling: radio boxes don't know about toolbar buttons
 156       rbm.addEventListener("changeSelected", function(e)
 157       {
 158         d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
 159       });
 160
 161       d.add(rd1, rd2, rd3);
 162
 163
 164       // apply default layout
 165       rd1.setChecked(true);
 166
 167
 168
 169
 170
 171       // Alignment
 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");
 175
 176       with(ra1)
 177       {
 178         setTop(140);
 179         setLeft(220);
 180         setChecked(true);
 181       };
 182
 183       with(ra2)
 184       {
 185         setTop(160);
 186         setLeft(220);
 187       };
 188
 189       with(ra3)
 190       {
 191         setTop(180);
 192         setLeft(220);
 193       };
 194
 195
 196       var ram = new qx.manager.selection.RadioManager();
 197
 198       ram.add(ra1);
 199       ram.add(ra2);
 200       ram.add(ra3);
 201
 202       d.add(ra1, ra2, ra3);
 203
 204       ram.addEventListener("changeSelected", function(e) {
 205         tb.setHorizontalChildrenAlign(e.getData().getValue());
 206       });
 207
 208
 209
 210
 211       // Icon Sizes
 212       var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
 213
 214       with(b3)
 215       {
 216         setTop(140);
 217         setLeft(420);
 218         setHorizontalAlign("center");
 219       };
 220
 221       b3.addEventListener("execute", function(e) {
 222         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
 223       });
 224
 225       var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
 226
 227       with(b4)
 228       {
 229         setTop(170);
 230         setLeft(420);
 231         setHorizontalAlign("center");
 232       };
 233
 234       b4.addEventListener("execute", function(e) {
 235         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
 236       });
 237
 238       d.add(b3, b4);
 239
 240
 241
 242
 243
 244
 245       var chkShowBtn1 = new qx.ui.form.CheckBox("Show First Button");
 246
 247       chkShowBtn1.setLocation(20, 500);
 248       chkShowBtn1.addEventListener("changeChecked", function(e) {
 249         tbd1.setDisplay(e.getData());
 250       });
 251
 252       var chkShowPart1 = new qx.ui.form.CheckBox("Show First Part");
 253
 254       chkShowPart1.setLocation(220, 500);
 255       chkShowPart1.addEventListener("changeChecked", function(e) {
 256         tbp1.setDisplay(e.getData());
 257       });
 258
 259       d.add(chkShowBtn1, chkShowPart1);
 260
 261
 262
 263       // Icon & Color Themes
 264       qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
 265       qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
 266     });
 267   </script>
 268 </body>
 269 </html>