swat/apps/qooxdoo-examples/test/Pollution_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>Test global namespace pollution through qooxdoo.</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         // setWidth("auto");
  31       };
  32
  33       var btns1 = [
  34         { type : "button", icon : "file-new", text : "New" },
  35         { type : "separator" },
  36         { type : "button", icon : "edit-copy", text : "Copy" },
  37         { type : "button", icon : "edit-cut", text : "Cut" },
  38         { type : "button", icon : "edit-paste", text : "Paste" }
  39       ];
  40
  41       var btns2 = [
  42         { type : "button", icon : "up", text : "Upload" },
  43         { type : "button", icon : "down", text : "Download" }
  44       ];
  45
  46       var btns3 = [
  47         { type : "button", icon : "help", text : "Help" }
  48       ];
  49
  50       var bars = [ btns1, btns2, btns3 ];
  51
  52       function changeLayout(e) {
  53         this.setShow(e.getData());
  54       };
  55
  56       function changeSize(e) {
  57         var v = e.getData();
  58         var o = v == 22 ? 32 : 22;
  59
  60         this.setIcon(this.getIcon().replace(o, v));
  61       };
  62
  63       function buttonExecute() { this.debug("Executed: " + this.getLabel()); };
  64
  65       var useParts = true;
  66
  67
  68       for (var j=0; j<bars.length; j++)
  69       {
  70         var btns = bars[j];
  71
  72         if (useParts) {
  73           var tbp = new qx.ui.toolbar.ToolBarPart;
  74         };
  75
  76         for (var i=0; i<btns.length; i++)
  77         {
  78           var btn = btns[i];
  79
  80           switch(btn.type)
  81           {
  82             case "separator":
  83               var o = new qx.ui.toolbar.ToolBarSeparator;
  84               break;
  85
  86             case "button":
  87               var o = new qx.ui.toolbar.ToolBarButton(btn.text, "icon/22/" + btn.icon + ".png");
  88
  89               // beautiful decoupling: toolbar buttons don't know about radio boxes
  90
  91               d.addEventListener("changeLayout", changeLayout, o);
  92               d.addEventListener("changeSize", changeSize, o);
  93
  94               o.addEventListener("execute", buttonExecute);
  95               break;
  96           };
  97
  98           if (useParts)
  99           {
 100             tbp.add(o);
 101           }
 102           else
 103           {
 104             tb.add(o);
 105           };
 106         };
 107
 108         if (useParts) {
 109           tb.add(tbp);
 110         };
 111       };
 112
 113       d.add(tb);
 114
 115
 116
 117
 118
 119
 120       var rd1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
 121       var rd2 = new qx.ui.form.RadioButton("Show Icons", "icon");
 122       var rd3 = new qx.ui.form.RadioButton("Show Label", "label");
 123
 124       with(rd1)
 125       {
 126         setTop(140);
 127         setLeft(20);
 128         setChecked(true);
 129       };
 130
 131       with(rd2)
 132       {
 133         setTop(160);
 134         setLeft(20);
 135       };
 136
 137       with(rd3)
 138       {
 139         setTop(180);
 140         setLeft(20);
 141       };
 142
 143
 144       var rbm = new qx.manager.selection.RadioManager();
 145
 146       rbm.add(rd1);
 147       rbm.add(rd2);
 148       rbm.add(rd3);
 149
 150
 151       // beautiful decoupling: radio boxes don't know about toolbar buttons
 152       rbm.addEventListener("changeSelected", function(e) {
 153         d.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
 154       });
 155
 156       d.add(rd1, rd2, rd3);
 157
 158
 159
 160       // Alignment
 161       var ra1 = new qx.ui.form.RadioButton("Left Aligned", "left");
 162       var ra2 = new qx.ui.form.RadioButton("Centered", "center");
 163       var ra3 = new qx.ui.form.RadioButton("Right Aligned", "right");
 164
 165       with(ra1)
 166       {
 167         setTop(140);
 168         setLeft(220);
 169         setChecked(true);
 170       };
 171
 172       with(ra2)
 173       {
 174         setTop(160);
 175         setLeft(220);
 176       };
 177
 178       with(ra3)
 179       {
 180         setTop(180);
 181         setLeft(220);
 182       };
 183
 184
 185       var ram = new qx.manager.selection.RadioManager();
 186
 187       ram.add(ra1);
 188       ram.add(ra2);
 189       ram.add(ra3);
 190
 191       d.add(ra1, ra2, ra3);
 192
 193       ram.addEventListener("changeSelected", function(e) {
 194         tb.setHorizontalChildrenAlign(e.getData().getValue());
 195       });
 196
 197
 198
 199
 200       // Icon Sizes
 201       var b3 = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
 202
 203       with(b3)
 204       {
 205         setTop(140);
 206         setLeft(420);
 207         setHorizontalAlign("center");
 208       };
 209
 210       b3.addEventListener("execute", function(e) {
 211         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
 212       });
 213
 214       var b4 = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
 215
 216       with(b4)
 217       {
 218         setTop(170);
 219         setLeft(420);
 220         setHorizontalAlign("center");
 221       };
 222
 223       b4.addEventListener("execute", function(e) {
 224         d.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
 225       });
 226
 227       d.add(b3, b4);
 228
 229
 230
 231
 232
 233       var pollTxt = new qx.ui.embed.HtmlEmbed;
 234       pollTxt.setLocation(20, 300);
 235       pollTxt.setRight(450);
 236       pollTxt.setBottom(48);
 237       pollTxt.setOverflow("auto");
 238       pollTxt.setBorder("1px solid black");
 239       pollTxt.setBackgroundColor("white");
 240       qx.ui.core.ClientDocument.getInstance().add(pollTxt);
 241
 242       var pollWinBtn = new qx.ui.form.Button("Print Window");
 243       pollWinBtn.setTop(300);
 244       pollWinBtn.setRight(335);
 245       qx.ui.core.ClientDocument.getInstance().add(pollWinBtn);
 246
 247       var pollDocBtn = new qx.ui.form.Button("Print Document");
 248       pollDocBtn.setTop(330);
 249       pollDocBtn.setRight(335);
 250       qx.ui.core.ClientDocument.getInstance().add(pollDocBtn);
 251
 252       var pollBodyBtn = new qx.ui.form.Button("Print Body");
 253       pollBodyBtn.setTop(360);
 254       pollBodyBtn.setRight(335);
 255       qx.ui.core.ClientDocument.getInstance().add(pollBodyBtn);
 256
 257       pollWinBtn.addEventListener("execute", function(e) {
 258         pollTxt.setHtml(qx.dev.Pollution.getHtmlTable("window"));
 259       });
 260
 261       pollDocBtn.addEventListener("execute", function(e) {
 262         pollTxt.setHtml(qx.dev.Pollution.getHtmlTable("document"));
 263       });
 264
 265       pollBodyBtn.addEventListener("execute", function(e) {
 266         pollTxt.setHtml(qx.dev.Pollution.getHtmlTable("body"));
 267       });
 268     });
 269   </script>
 270 </body>
 271 </html>