swat.obsolete/apps/qooxdoo-examples/test/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 qx.ui.menu.Menu which opens on qx.ui.toolbar.ToolBarMenuButtons.</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       var tb = new qx.ui.toolbar.ToolBar;
  24       with(tb)
  25       {
  26         setTop(48);
  27         setLeft(20);
  28         setRight(335);
  29       };
  30
  31       var m1 = new qx.ui.menu.Menu;
  32
  33       var mb1 = new qx.ui.menu.MenuButton("Folder");
  34       var ms1 = new qx.ui.menu.MenuSeparator;
  35       var mb2 = new qx.ui.menu.MenuButton("Word Document");
  36       var mb3 = new qx.ui.menu.MenuButton("Text File");
  37       var mb4 = new qx.ui.menu.MenuButton("Image");
  38
  39       m1.add(mb1, ms1, mb2, mb3, mb4);
  40       d.add(m1);
  41
  42
  43       var m2 = new qx.ui.menu.Menu;
  44
  45       var mb5 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png");
  46       var mb6 = new qx.ui.menu.MenuButton("Move", "icon/16/edit-cut.png");
  47       var mb7 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png");
  48
  49       m2.add(mb5, mb6, mb7);
  50       d.add(m2);
  51
  52
  53
  54
  55       var btns1 = [
  56         { type : "menu", icon : "file-new", label : "New", menu : m1 },
  57         { type : "menu", icon : "edit", label : "Edit", menu : m2 }
  58       ];
  59
  60       var btns2 = [
  61         { type : "button", icon : "up", label : "Upload" },
  62         { type : "button", icon : "down", label : "Download" }
  63       ];
  64
  65       var btns3 = [
  66         { type : "button", icon : "idea", label : "Tip" },
  67         { type : "button", icon : "help", label : "Help" }
  68       ];
  69
  70       var bars = [ btns1, btns2, btns3 ];
  71
  72       function changeLayout(e) {
  73         this.setShow(e.getData());
  74       };
  75
  76       var useParts = true;
  77
  78
  79       for (var j=0; j<bars.length; j++)
  80       {
  81         var btns = bars[j];
  82
  83         if (useParts) {
  84           var tbp = new qx.ui.toolbar.ToolBarPart;
  85         };
  86
  87         for (var i=0; i<btns.length; i++)
  88         {
  89           var btn = btns[i];
  90
  91           switch(btn.type)
  92           {
  93             case "separator":
  94               var o = new qx.ui.toolbar.ToolBarSeparator;
  95               break;
  96
  97             case "menu":
  98               var o = new qx.ui.toolbar.ToolBarMenuButton(btn.label, btn.menu, "icon/22/" + btn.icon + ".png", 22, 22);
  99
 100               // beautiful decoupling: toolbar buttons don't know about radio boxes
 101
 102               // uncomment this to omit changes on one button
 103               // if (btn.icon != "upload")
 104               d.addEventListener("changeLayout", changeLayout, o );
 105               break;
 106
 107             case "button":
 108               var o = new qx.ui.toolbar.ToolBarButton(btn.label, "icon/22/" + btn.icon + ".png");
 109
 110               // beautiful decoupling: toolbar buttons don't know about radio boxes
 111
 112               // uncomment this to omit changes on one button
 113               // if (btn.icon != "upload")
 114               d.addEventListener("changeLayout", changeLayout, o );
 115               break;
 116           };
 117
 118           if (useParts)
 119           {
 120             tbp.add(o);
 121           }
 122           else
 123           {
 124             tb.add(o);
 125           };
 126         };
 127
 128         if (useParts) {
 129           tb.add(tbp);
 130         };
 131       };
 132
 133       d.add(tb);
 134
 135
 136       var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
 137       var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
 138       var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
 139
 140       with(rd1)
 141       {
 142         setTop(140);
 143         setLeft(20);
 144         setChecked(true);
 145       };
 146
 147       with(rd2)
 148       {
 149         setTop(160);
 150         setLeft(20);
 151       };
 152
 153       with(rd3)
 154       {
 155         setTop(180);
 156         setLeft(20);
 157       };
 158
 159
 160       var rbm = new qx.manager.selection.RadioManager();
 161
 162       rbm.add(rd1);
 163       rbm.add(rd2);
 164       rbm.add(rd3);
 165
 166
 167       // beautiful decoupling: radio boxes don't know about toolbar buttons
 168       rbm.addEventListener("changeSelected", function(e) {
 169         d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
 170       });
 171
 172       d.add(rd1, rd2, rd3);
 173
 174
 175
 176
 177
 178       // Alignment
 179       var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
 180       var ra2 = new qx.ui.form.RadioButton("Centered", "center");
 181       var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
 182
 183       with(ra1)
 184       {
 185         setTop(140);
 186         setLeft(220);
 187         setChecked(true);
 188       };
 189
 190       with(ra2)
 191       {
 192         setTop(160);
 193         setLeft(220);
 194       };
 195
 196       with(ra3)
 197       {
 198         setTop(180);
 199         setLeft(220);
 200       };
 201
 202
 203       var ram = new qx.manager.selection.RadioManager();
 204
 205       ram.add(ra1);
 206       ram.add(ra2);
 207       ram.add(ra3);
 208
 209       d.add(ra1, ra2, ra3);
 210
 211       ram.addEventListener("changeSelected", function(e) {
 212         tb.setHorizontalChildrenAlign(e.getData().getValue());
 213       });
 214
 215
 216
 217
 218
 219
 220
 221       // Icon & Color Themes
 222       qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 248);
 223       qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 248);
 224     });
 225   </script>
 226 </body>
 227 </html>