swat/apps/qooxdoo-examples/example/Window_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   <script type="text/javascript">
  15   qx.core.Init.getInstance().defineMain(function()
  16   {
  17     var d = qx.ui.core.ClientDocument.getInstance();
  18
  19     var w1 = new qx.ui.window.Window("First Window", "icon/16/bell.png");
  20     w1.setSpace(20, 400, 48, 250);
  21     d.add(w1);
  22
  23     var w2 = new qx.ui.window.Window("Second Window", "icon/16/colors.png");
  24     w2.setSpace(250, "auto", 120, "auto");
  25     d.add(w2);
  26
  27     var w3 = new qx.ui.window.Window("Third Window", "icon/16/network.png");
  28     w3.setSpace(100, 300, 200, 300);
  29     w3.setMaxWidth(450);
  30     w3.setMaxHeight(400);
  31     d.add(w3);
  32
  33     var wm1 = new qx.ui.window.Window("First Modal Dialog");
  34     wm1.setSpace(150, 200, 150, 200);
  35     wm1.setModal(true);
  36     d.add(wm1);
  37
  38     var wm2 = new qx.ui.window.Window("Second Modal Dialog");
  39     wm2.setSpace(100, 200, 100, 150);
  40     wm2.setModal(true);
  41     wm2.setShowClose(false);
  42     d.add(wm2);
  43
  44
  45
  46
  47     var a1 = new qx.ui.basic.Atom("Welcome to your first own Window.<br/>Have fun!", "icon/32/chart.png");
  48     a1.set({ top: 4, left: 4 });
  49     w1.add(a1);
  50
  51
  52
  53
  54     var tf1 = new qx.ui.pageview.tabview.TabView;
  55     tf1.set({ left: 10, top: 52, right: 10, bottom: 10 });
  56
  57     var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Explore");
  58     var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Internet");
  59     var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Future");
  60
  61     t1_1.setChecked(true);
  62
  63     tf1.getBar().add(t1_1, t1_2, t1_3);
  64
  65     var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
  66     var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
  67     var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
  68
  69     tf1.getPane().add(p1_1, p1_2, p1_3);
  70
  71     w1.add(tf1);
  72
  73
  74
  75     var at1 = new qx.ui.basic.Atom("Your second window", "icon/22/find.png");
  76     at1.setLocation(8, 8);
  77     w2.add(at1);
  78
  79
  80
  81
  82     var btn1 = new qx.ui.form.Button("Open Modal Dialog 1", "icon/16/control-center.png");
  83     btn1.setLocation(4, 4);
  84     w3.add(btn1);
  85
  86     btn1.addEventListener("execute", function(e) {
  87       wm1.open();
  88     });
  89
  90
  91     var btn2 = new qx.ui.form.Button("Open Modal Dialog 2", "icon/16/control-center.png");
  92     btn2.setLocation(4, 4);
  93     wm1.add(btn2);
  94
  95     btn2.addEventListener("execute", function(e) {
  96       wm2.open();
  97     });
  98
  99
 100     var chkm1 = new qx.ui.form.CheckBox("Modal", null, null, true);
 101     chkm1.setLocation(4, 50);
 102     wm1.add(chkm1);
 103
 104     chkm1.addEventListener("changeChecked", function(e) {
 105       wm1.setModal(e.getData());
 106     });
 107
 108
 109
 110     var fs1 = new qx.ui.groupbox.GroupBox("Settings");
 111     fs1.setLocation(4, 40);
 112     fs1.setRight(4);
 113     fs1.setBottom(4);
 114
 115
 116     var chk1 = new qx.ui.form.CheckBox("Show Icon");
 117     chk1.setLocation(0, 0);
 118     chk1.setChecked(true);
 119     chk1.addEventListener("changeChecked", function(e) {
 120       w2.setShowIcon(e.getData());
 121     });
 122
 123     var chk2 = new qx.ui.form.CheckBox("Show Caption");
 124     chk2.setLocation(0, 20);
 125     chk2.setChecked(true);
 126     chk2.addEventListener("changeChecked", function(e) {
 127       w2.setShowCaption(e.getData());
 128     });
 129
 130
 131
 132     var chk3 = new qx.ui.form.CheckBox("Resizeable");
 133     chk3.setLocation(0, 50);
 134     chk3.setChecked(true);
 135     chk3.addEventListener("changeChecked", function(e) {
 136       w2.setResizeable(e.getData());
 137     });
 138
 139     var chk4 = new qx.ui.form.CheckBox("Moveable");
 140     chk4.setLocation(0, 70);
 141     chk4.setChecked(true);
 142     chk4.addEventListener("changeChecked", function(e) {
 143       w2.setMoveable(e.getData());
 144     });
 145
 146
 147
 148     var chk5 = new qx.ui.form.CheckBox("Show Close");
 149     chk5.setLocation(140, 0);
 150     chk5.setChecked(true);
 151     chk5.addEventListener("changeChecked", function(e) {
 152       w2.setShowClose(e.getData());
 153     });
 154
 155     var chk6 = new qx.ui.form.CheckBox("Show Maximize/Restore");
 156     chk6.setLocation(140, 20);
 157     chk6.setChecked(true);
 158     chk6.addEventListener("changeChecked", function(e) {
 159       w2.setShowMaximize(e.getData());
 160     });
 161
 162     var chk7 = new qx.ui.form.CheckBox("Show Minimize");
 163     chk7.setLocation(140, 40);
 164     chk7.setChecked(true);
 165     chk7.addEventListener("changeChecked", function(e) {
 166       w2.setShowMinimize(e.getData());
 167     });
 168
 169
 170
 171     var chk8 = new qx.ui.form.CheckBox("Allow Close");
 172     chk8.setLocation(140, 70);
 173     chk8.setChecked(true);
 174     chk8.addEventListener("changeChecked", function(e) {
 175       w2.setAllowClose(e.getData());
 176     });
 177
 178     var chk9 = new qx.ui.form.CheckBox("Allow Maximize");
 179     chk9.setLocation(140, 90);
 180     chk9.setChecked(true);
 181     chk9.addEventListener("changeChecked", function(e) {
 182       w2.setAllowMaximize(e.getData());
 183     });
 184
 185     var chk10 = new qx.ui.form.CheckBox("Allow Minimize");
 186     chk10.setLocation(140, 110);
 187     chk10.setChecked(true);
 188     chk10.addEventListener("changeChecked", function(e) {
 189       w2.setAllowMinimize(e.getData());
 190     });
 191
 192
 193
 194
 195     var l1 = new qx.ui.basic.Atom("Move Method", "icon/16/misc.png");
 196     l1.setLocation(0, 100);
 197
 198     var rb1 = new qx.ui.form.RadioButton("Frame", "frame");
 199     rb1.setLocation(0, 120);
 200
 201     var rb2 = new qx.ui.form.RadioButton("Opaque", "opaque");
 202     rb2.setLocation(0, 140);
 203     rb2.setChecked(true);
 204
 205     var rb3 = new qx.ui.form.RadioButton("Translucent", "translucent");
 206     rb3.setLocation(0, 160);
 207
 208     var rbm1 = new qx.manager.selection.RadioManager("move", [rb1, rb2, rb3]);
 209
 210     rbm1.addEventListener("changeSelected", function(e) {
 211       w2.setMoveMethod(e.getData().getValue());
 212     });
 213
 214
 215
 216
 217     var l2 = new qx.ui.basic.Atom("Resize Method", "icon/16/misc.png");
 218     l2.setLocation(0, 190);
 219
 220     var rb4 = new qx.ui.form.RadioButton("Frame", "frame");
 221     rb4.setLocation(0, 210);
 222     rb4.setChecked(true);
 223
 224     var rb5 = new qx.ui.form.RadioButton("Opaque", "opaque");
 225     rb5.setLocation(0, 230);
 226
 227     var rb6 = new qx.ui.form.RadioButton("Lazy Opaque", "lazyopaque");
 228     rb6.setLocation(0, 250);
 229
 230     var rb7 = new qx.ui.form.RadioButton("Translucent", "translucent");
 231     rb7.setLocation(0, 270);
 232
 233     var rbm2 = new qx.manager.selection.RadioManager("resize", [rb4, rb5, rb6, rb7]);
 234
 235     rbm2.addEventListener("changeSelected", function(e) {
 236       w2.setResizeMethod(e.getData().getValue());
 237     });
 238
 239
 240
 241
 242     var chk11 = new qx.ui.form.CheckBox("Show Statusbar");
 243     chk11.setLocation(140, 140);
 244     chk11.setChecked(false);
 245     chk11.addEventListener("changeChecked", function(e) {
 246       w2.setShowStatusbar(e.getData());
 247     });
 248
 249
 250
 251
 252     var btnpack = new qx.ui.form.Button("Pack Window", "icon/16/cdrom.png");
 253     btnpack.setLocation(140, 170);
 254     btnpack.addEventListener("execute", function(e) {
 255       w2.pack();
 256     });
 257
 258
 259     fs1.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8, chk9, chk10, l1, rb1, rb2, rb3, l2, rb4, rb5, rb6, rb7, chk11, btnpack);
 260     w2.add(fs1);
 261
 262
 263     var icon1 = new qx.ui.basic.Image("icon/32/error.png");
 264     var warn1 = new qx.ui.basic.Label("Do you want to delete<br/>all your personal data?");
 265
 266     icon1.setTop(10);
 267     icon1.setLeft(10);
 268
 269     warn1.setTop(10);
 270     warn1.setLeft(48);
 271
 272     var btn3 = new qx.ui.form.Button("Yes", "icon/16/button-ok.png");
 273     var btn4 = new qx.ui.form.Button("No", "icon/16/button-cancel.png");
 274
 275     btn3.addEventListener("execute", function(e) {
 276       alert("Thank you!");
 277       wm2.close();
 278     });
 279
 280     btn4.addEventListener("execute", function(e) {
 281       alert("Sorry, please click 'Yes'!");
 282     });
 283
 284     btn3.set({ bottom : 10, right : 10 });
 285     btn4.set({ bottom : 10, left : 10 });
 286
 287     wm2.add(btn3, btn4, icon1, warn1);
 288
 289
 290
 291     // Icon & Color Themes
 292     //qx.manager.object.ImageManager.getInstance().createThemeList(w3, 20, 248);
 293     qx.manager.object.ColorManager.getInstance().createThemeList(w3, 4, 58);
 294
 295
 296
 297
 298     w1.open();
 299     w2.open();
 300     w3.open();
 301   });
 302   </script>
 303
 304   <div id="demoDescription">
 305     <p>This is the qx.ui.window.Window widget. These should emulate the default look and behaviour of the application windows running under Microsoft Windows(TM).</p>
 306   </div>
 307 </body>
 308 </html>