swat/apps/qooxdoo-examples/example/ToolBar_1.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>Introduce all classes needed for creating real qx.ui.toolbar.ToolBars. This includes qx.ui.toolbar.ToolBars,
  16     qx.ui.toolbar.ToolBarParts, qx.ui.toolbar.ToolBarSeparator and qx.ui.toolbar.ToolBarButtons.</p>
  17
  18     <p>The qx.ui.toolbar.ToolBarButtons and QxRadioButtons in this example are beautifully
  19     decoupled by "global" qx.event.type.DataEvent.</p>
  20   </div>
  21
  22   <script type="text/javascript">
  23     qx.core.Init.getInstance().defineMain(function()
  24     {
  25       var d = qx.ui.core.ClientDocument.getInstance();
  26
  27       var tb = new qx.ui.toolbar.ToolBar;
  28       with(tb)
  29       {
  30         setTop(48);
  31         setLeft(20);
  32         setRight(335);
  33
  34         // setWidth("auto");
  35       };
  36
  37       var btns1 = [
  38         { type : "button", icon : "file-new", text : "New" },
  39         { type : "separator" },
  40         { type : "button", icon : "edit-copy", text : "Copy" },
  41         { type : "button", icon : "edit-cut", text : "Cut" },
  42         { type : "button", icon : "edit-paste", text : "Paste" }
  43       ];
  44
  45       var btns2 = [
  46         { type : "button", icon : "up", text : "Upload" },
  47         { type : "button", icon : "down", text : "Download" }
  48       ];
  49
  50       var btns3 = [
  51         { type : "button", icon : "help", text : "Help" }
  52       ];
  53
  54       var bars = [ btns1, btns2, btns3 ];
  55
  56       function changeLayout(e) {
  57         this.setShow(e.getData());
  58       };
  59
  60       function changeSize(e) {
  61         var v = e.getData();
  62         var o = v == 22 ? 32 : 22;
  63
  64         this.setIcon(this.getIcon().replace(o, v));
  65       };
  66
  67       function buttonExecute() { this.debug("Executed: " + this.getLabel()); };
  68
  69       var useParts = true;
  70
  71
  72       for (var j=0; j<bars.length; j++)
  73       {
  74         var btns = bars[j];
  75
  76         if (useParts) {
  77           var tbp = new qx.ui.toolbar.ToolBarPart;
  78         };
  79
  80         for (var i=0; i<btns.length; i++)
  81         {
  82           var btn = btns[i];
  83
  84           switch(btn.type)
  85           {
  86             case "separator":
  87               var o = new qx.ui.toolbar.ToolBarSeparator;
  88               break;
  89
  90             case "button":
  91               var o = new qx.ui.toolbar.ToolBarButton(btn.text, "icon/22/" + btn.icon + ".png");
  92
  93               // beautiful decoupling: toolbar buttons don't know about radio boxes
  94
  95               d.addEventListener("changeLayout", changeLayout, o);
  96               d.addEventListener("changeSize", changeSize, o);
  97
  98               o.addEventListener("execute", buttonExecute);
  99               break;
 100           };
 101
 102           if (useParts)
 103           {
 104             tbp.add(o);
 105           }
 106           else
 107           {
 108             tb.add(o);
 109           };
 110         };
 111
 112         if (useParts) {
 113           tb.add(tbp);
 114         };
 115       };
 116
 117       d.add(tb);
 118
 119
 120
 121
 122
 123
 124       var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
 125       var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
 126       var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
 127
 128       with(rd1)
 129       {
 130         setTop(140);
 131         setLeft(20);
 132         setChecked(true);
 133       };
 134
 135       with(rd2)
 136       {
 137         setTop(160);
 138         setLeft(20);
 139       };
 140
 141       with(rd3)
 142       {
 143         setTop(180);
 144         setLeft(20);
 145       };
 146
 147
 148       var rbm = new qx.manager.selection.RadioManager();
 149
 150       rbm.add(rd1);
 151       rbm.add(rd2);
 152       rbm.add(rd3);
 153
 154
 155       // beautiful decoupling: radio boxes don't know about toolbar buttons
 156       rbm.addEventListener("changeSelected", function(e) {
 157         d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
 158       });
 159
 160       d.add(rd1, rd2, rd3);
 161
 162
 163
 164       // Alignment
 165       var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
 166       var ra2 = new qx.ui.form.RadioButton("Centered", "center");
 167       var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
 168
 169       with(ra1)
 170       {
 171         setTop(140);
 172         setLeft(220);
 173         setChecked(true);
 174       };
 175
 176       with(ra2)
 177       {
 178         setTop(160);
 179         setLeft(220);
 180       };
 181
 182       with(ra3)
 183       {
 184         setTop(180);
 185         setLeft(220);
 186       };
 187
 188
 189       var ram = new qx.manager.selection.RadioManager();
 190
 191       ram.add(ra1);
 192       ram.add(ra2);
 193       ram.add(ra3);
 194
 195       d.add(ra1, ra2, ra3);
 196
 197       ram.addEventListener("changeSelected", function(e) {
 198         tb.setHorizontalChildrenAlign(e.getData().getValue());
 199       });
 200
 201
 202
 203
 204       // Icon Sizes
 205       var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
 206
 207       with(b3)
 208       {
 209         setTop(140);
 210         setLeft(420);
 211         setHorizontalAlign("center");
 212       };
 213
 214       b3.addEventListener("execute", function(e) {
 215         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
 216       });
 217
 218       var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
 219
 220       with(b4)
 221       {
 222         setTop(170);
 223         setLeft(420);
 224         setHorizontalAlign("center");
 225       };
 226
 227       b4.addEventListener("execute", function(e) {
 228         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
 229       });
 230
 231       d.add(b3, b4);
 232
 233
 234
 235
 236
 237       // Icon & Color Themes
 238       qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
 239       qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
 240
 241
 242
 243       /*
 244       Test for cloning support
 245
 246       tb2 = tb.clone(true);
 247       tb2.setTop(400);
 248       */
 249     });
 250   </script>
 251 </body>
 252 </html>