swat/apps/qooxdoo-examples/at-a-glance/AtAGlance.js

   1 /* ************************************************************************
   2
   3    qooxdoo - the new era of web development
   4
   5    Copyright:
   6      2004-2006 by 1&1 Internet AG, Germany
   7      http://www.1und1.de | http://www.1and1.com
   8      All rights reserved
   9
  10    License:
  11      LGPL 2.1: http://creativecommons.org/licenses/LGPL/2.1/
  12
  13    Internet:
  14      * http://qooxdoo.org
  15
  16    Authors:
  17      * Sebastian Werner (wpbasti)
  18        <sebastian dot werner at 1und1 dot de>
  19      * Andreas Ecker (ecker)
  20        <andreas dot ecker at 1und1 dot de>
  21      * Til Schneider (til132)
  22        <tilman dot schneider at stz-ida dot de>
  23
  24 ************************************************************************ */
  25
  26 qx.OO.defineClass("AtAGlance", qx.core.Object,
  27 function () {
  28   qx.core.Object.call(this);
  29
  30   var barView = new qx.ui.pageview.buttonview.ButtonView;
  31
  32   barView.setLocation(10, 10);
  33   barView.setRight(10);
  34   barView.setBottom(10);
  35
  36   barView.addToDocument();
  37
  38   this._createPage(barView, "Form",             "icon/32/wordprocessor.png",    this._createFormDemo(), "threedface");
  39   this._createPage(barView, "Tooltip",          "icon/32/run.png",              this._createTooltipDemo());
  40   this._createPage(barView, "Menu and Toolbar", "icon/32/display.png",          this._createToolbarDemo());
  41   this._createPage(barView, "Tab",              "icon/32/contents.png",         this._createTabDemo(), "threedface", true);
  42   this._createPage(barView, "Tree",             "icon/32/view-sidetree.png",    this._createTreeDemo(), "threedface");
  43   this._createPage(barView, "List",             "icon/32/view-detailed.png",    this._createListDemo(), "threedface");
  44   this._createPage(barView, "ListView",         "icon/32/view-multicolumn.png", this._createListViewDemo(), "threedface");
  45   this._createPage(barView, "Table",            "icon/32/view-multicolumn.png", this._createTableDemo(), "threedface", true);
  46   this._createPage(barView, "DateChooser",      "icon/32/date.png",             this._createDateChooserDemo(), "threedface");
  47   this._createPage(barView, "Native Window",    "icon/32/display.png",          this._createNativeWindowDemo(), "threedface");
  48   this._createPage(barView, "Internal Window",  "icon/32/look-and-feel.png",    this._createInternalWindowDemo(), null, true);
  49   this._createPage(barView, "Themes",           "icon/32/style.png",            this._createThemesDemo());
  50 });
  51
  52
  53 qx.Proto._createPage = function(barView, title, iconUrl, widget, backgroundColor, scrolls) {
  54   var bt = new qx.ui.pageview.buttonview.ButtonViewButton(title, iconUrl);
  55   if (barView.getBar().isEmpty()) {
  56     bt.setChecked(true);
  57   }
  58
  59   barView.getBar().add(bt);
  60
  61   var page = new qx.ui.pageview.buttonview.ButtonViewPage(bt);
  62   barView.getPane().add(page);
  63
  64   page.set({ left:0, right:0, top:0, bottom:0 });
  65
  66   widget.setLocation(0, 0);
  67   widget.set({ left:0, right:0, bottom:0, right:0 });
  68   if (!scrolls) {
  69     widget.set({ height:null, width:null, overflow:"auto" });
  70   }
  71
  72   if (backgroundColor) {
  73     page.setBackgroundColor(backgroundColor);
  74   }
  75
  76   page.add(widget);
  77
  78   return page;
  79 }
  80
  81
  82 qx.Proto._createFormDemo = function() {
  83   var main = new qx.ui.layout.VerticalBoxLayout;
  84   main.setPadding(10);
  85
  86   var groupWidth = 285;
  87
  88   // fields
  89   var group1 = new qx.ui.groupbox.GroupBox("Some controls", "icon/16/configure.png");
  90   group1.setDimension("auto", "auto");
  91   main.add(group1);
  92
  93   var gl = new qx.ui.layout.GridLayout;
  94   group1.add(gl);
  95
  96   gl.setDimension(groupWidth - 26, "auto");
  97   gl.setColumnCount(2);
  98   gl.setRowCount(6);
  99   gl.setVerticalSpacing(4);
 100   gl.setHorizontalSpacing(6);
 101
 102   gl.setColumnWidth(0, 70);
 103   gl.setColumnWidth(1, 180);
 104
 105   //gl.setColumnHorizontalAlignment(0, "right");
 106   gl.setColumnVerticalAlignment(0, "middle");
 107
 108   gl.setRowHeight(0, 20);
 109   gl.setRowHeight(1, 20);
 110   gl.setRowHeight(2, 20);
 111   gl.setRowHeight(3, 20);
 112   gl.setRowHeight(4, 70);
 113   gl.setRowHeight(5, 20);
 114
 115   gl.add(new qx.ui.basic.Label("Name"), 0, 0);
 116   gl.add(new qx.ui.form.TextField, 1, 0);
 117   gl.add(new qx.ui.basic.Label("Amount"), 0, 1);
 118   gl.add(new qx.ui.form.Spinner, 1, 1);
 119   gl.add(new qx.ui.basic.Label("Type"), 0, 2);
 120
 121   var combo = new qx.ui.form.ComboBox;
 122   combo.add(new qx.ui.form.ListItem("CD"));    //, "icon/16/cd.png"));
 123   combo.add(new qx.ui.form.ListItem("Clock"));   //, "icon/16/clock.png"));
 124   combo.add(new qx.ui.form.ListItem("Modem"));   //, "icon/16/modem.png"));
 125   combo.add(new qx.ui.form.ListItem("Network")); //, "icon/16/network.png"));
 126   combo.add(new qx.ui.form.ListItem("Sound"));   //, "icon/16/mixer.png"));
 127   combo.add(new qx.ui.form.ListItem("PDA"));   //, "icon/16/pda.png"));
 128   combo.add(new qx.ui.form.ListItem("Printer")); //, "icon/16/printer.png"));
 129   combo.add(new qx.ui.form.ListItem("Scanner")); //, "icon/16/scanner.png"));
 130   combo.add(new qx.ui.form.ListItem("TV"));    //, "icon/16/tv.png"));
 131   gl.add(combo, 1, 2);
 132
 133   gl.add(new qx.ui.basic.Label("E-Mail"), 0, 3);
 134   gl.add(new qx.ui.form.TextField, 1, 3);
 135
 136   var label6 = new qx.ui.basic.Label("Comment");
 137   label6.setVerticalAlign("top");
 138   label6.setVerticalAlign("top");
 139   gl.add(label6, 0, 4);
 140
 141   gl.add(new qx.ui.form.TextArea, 1, 4);
 142
 143   var input7 = new qx.ui.form.Button("Submit", "icon/16/apply.png");
 144   input7.setHorizontalAlign("right");
 145   gl.add(input7, 1, 5);
 146
 147   // Checkboxes
 148   var group2 = new qx.ui.groupbox.GroupBox("Some settings");
 149   group2.setDimension(groupWidth, "auto");
 150   main.add(group2);
 151
 152   var bl = new qx.ui.layout.VerticalBoxLayout;
 153   group2.add(bl);
 154
 155   bl.add(new qx.ui.form.CheckBox("Permit others to view my favorites"));
 156
 157   var chb = new qx.ui.form.CheckBox("Use the very high bitrate");
 158   chb.setChecked(true);
 159   bl.add(chb);
 160
 161   // Radio buttons
 162   var group3 = new qx.ui.groupbox.GroupBox("Network speed", "icon/16/network.png");
 163   group3.setDimension(groupWidth, "auto");
 164   main.add(group3);
 165
 166   var bl = new qx.ui.layout.VerticalBoxLayout;
 167   group3.add(bl);
 168
 169   var radio1 = new qx.ui.form.RadioButton("Modem");
 170   var radio2 = new qx.ui.form.RadioButton("DSL");
 171   var radio3 = new qx.ui.form.RadioButton("Direct link");
 172   radio2.setChecked(true);
 173   bl.add(radio1, radio2, radio3);
 174   new qx.manager.selection.RadioManager("network", [radio1, radio2, radio3]);
 175
 176   return main;
 177 }
 178
 179
 180 qx.Proto._createTooltipDemo = function() {
 181   var main = new qx.ui.layout.HorizontalBoxLayout;
 182   main.setPadding(10);
 183   main.setSpacing(10);
 184
 185   var c1 = new qx.ui.basic.Atom("Hover me", "icon/32/run.png");
 186   c1.setPadding(5);
 187   c1.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 188   c1.setBackgroundColor(new qx.renderer.color.Color("#BDD2EF"));
 189   c1.setToolTip(new qx.ui.popup.ToolTip("Look at this"));
 190   main.add(c1);
 191
 192   var c2 = new qx.ui.basic.Atom("Hover me", "icon/32/toys.png");
 193   c2.setPadding(5);
 194   c2.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 195   c2.setBackgroundColor(new qx.renderer.color.Color("#D1DFAD"));
 196   c2.setToolTip(new qx.ui.popup.ToolTip("Images are also possible", "icon/16/help.png"));
 197   main.add(c2);
 198
 199   var c3 = new qx.ui.basic.Atom("Hover me", "icon/32/penguin.png");
 200   c3.setPadding(5);
 201   c3.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
 202   c3.setBackgroundColor(new qx.renderer.color.Color("#D1A4AD"));
 203   var tip3 = new qx.ui.popup.ToolTip('Such a great tooltip with a show timeout of 50ms.<br>And <b>H</b><span style="color:red">T</span><i>M</i><u>L</u>', "icon/32/penguin.png");
 204   tip3.setShowInterval(50);
 205   c3.setToolTip(tip3);
 206   main.add(c3);
 207
 208   return main;
 209 }
 210
 211
 212 qx.Proto._createToolbarDemo = function() {
 213   var doc = qx.ui.core.ClientDocument.getInstance();
 214
 215   var main = new qx.ui.layout.VerticalBoxLayout;
 216   main.setPadding(10);
 217
 218   // Menu
 219   var m1 = new qx.ui.menu.Menu;
 220   var mb1_01 = new qx.ui.menu.MenuButton("New", "icon/16/file-new.png");
 221   var mb1_02 = new qx.ui.menu.MenuButton("Open", "icon/16/file-open.png");
 222   var mb1_03 = new qx.ui.menu.MenuButton("Save", "icon/16/file-save.png");
 223   var mb1_04 = new qx.ui.menu.MenuButton("Save as", "icon/16/file-save-as.png");
 224   var mb1_05 = new qx.ui.menu.MenuButton("Close", "icon/16/stop.png");
 225   var mb1_06 = new qx.ui.menu.MenuButton("Restore last saved", "icon/16/reload.png");
 226   m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
 227
 228   var m2 = new qx.ui.menu.Menu;
 229   var mb2_01 = new qx.ui.menu.MenuButton("Undo", "icon/16/undo.png");
 230   var mb2_02 = new qx.ui.menu.MenuButton("Redo", "icon/16/redo.png");
 231   var mb2_b1 = new qx.ui.menu.MenuSeparator();
 232   var mb2_03 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png");
 233   var mb2_04 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png");
 234   var mb2_05 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png");
 235   var mb2_06 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png");
 236   var mb2_b2 = new qx.ui.menu.MenuSeparator();
 237   var mb2_07 = new qx.ui.menu.MenuButton("Select All");
 238   var mb2_08 = new qx.ui.menu.MenuButton("Find", "icon/16/find.png");
 239   var mb2_09 = new qx.ui.menu.MenuButton("Find Again");
 240   mb2_05.setEnabled(false);
 241   mb2_06.setEnabled(false);
 242   mb2_09.setEnabled(false);
 243   m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
 244
 245   var m3 = new qx.ui.menu.Menu;
 246   var m3_suba = new qx.ui.menu.Menu;
 247   var m3_subb = new qx.ui.menu.Menu;
 248   var m3_subc = new qx.ui.menu.Menu;
 249   var m3_subd = new qx.ui.menu.Menu;
 250
 251   var mb3_01 = new qx.ui.menu.MenuCheckBox("File List", null, false);
 252   var mb3_02 = new qx.ui.menu.MenuCheckBox("Syntax Highlighting", null, true);
 253   var mb3_03 = new qx.ui.menu.MenuCheckBox("Statusbar", null, true);
 254   var mb3_b1 = new qx.ui.menu.MenuSeparator();
 255   var mb3_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3_suba);
 256   var mb3_05 = new qx.ui.menu.MenuButton("Editor Font", null, null, m3_subb);
 257   var mb3_06 = new qx.ui.menu.MenuButton("Export Font", null, null, m3_subc);
 258   var mb3_b2 = new qx.ui.menu.MenuSeparator();
 259   var mb3_07 = new qx.ui.menu.MenuButton("Advanced", null, null, m3_subd);
 260   m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06, mb3_b2, mb3_07);
 261
 262   var mb3_suba_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt");
 263   var mb3_suba_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt");
 264   var mb3_suba_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt");
 265   var mb3_suba_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt");
 266   var mb3_suba_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt");
 267   m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
 268
 269   var mb3_subb_01 = new qx.ui.menu.MenuButton("Verdana, 11pt");
 270   var mb3_subb_02 = new qx.ui.menu.MenuButton("Verdana, 12pt");
 271   var mb3_subb_03 = new qx.ui.menu.MenuButton("Verdana, 13pt");
 272   var mb3_subb_04 = new qx.ui.menu.MenuButton("Verdana, 14pt");
 273   var mb3_subb_05 = new qx.ui.menu.MenuButton("Verdana, 15pt");
 274   m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
 275
 276   var mb3_subc_01 = new qx.ui.menu.MenuButton("Courier, 11pt");
 277   var mb3_subc_02 = new qx.ui.menu.MenuButton("Courier, 12pt");
 278   var mb3_subc_03 = new qx.ui.menu.MenuButton("Courier, 13pt");
 279   var mb3_subc_04 = new qx.ui.menu.MenuButton("Courier, 14pt");
 280   var mb3_subc_05 = new qx.ui.menu.MenuButton("Courier, 15pt");
 281   m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
 282
 283   var mb3_subd_02_suba = new qx.ui.menu.Menu();
 284   var mb3_subd_02_suba_01 = new qx.ui.menu.MenuButton("First");
 285   var mb3_subd_02_suba_02 = new qx.ui.menu.MenuButton("Second");
 286   var mb3_subd_02_suba_03 = new qx.ui.menu.MenuButton("Third");
 287   mb3_subd_02_suba.add(mb3_subd_02_suba_01, mb3_subd_02_suba_02, mb3_subd_02_suba_03);
 288
 289   var mb3_subd_01 = new qx.ui.menu.MenuButton("First");
 290   var mb3_subd_02 = new qx.ui.menu.MenuButton("Second", null, null, mb3_subd_02_suba);
 291   var mb3_subd_03 = new qx.ui.menu.MenuButton("Third");
 292
 293   m3_subd.add(mb3_subd_01, mb3_subd_02, mb3_subd_03);
 294
 295   var m4 = new qx.ui.menu.Menu;
 296   var m4_suba = new qx.ui.menu.Menu;
 297
 298   var mb4_01 = new qx.ui.menu.MenuButton("View", null, null, m4_suba);
 299   var mb4_b1 = new qx.ui.menu.MenuSeparator();
 300   var mb4_02 = new qx.ui.menu.MenuButton("Editor Preferences...", "icon/16/configure.png");
 301   var mb4_03 = new qx.ui.menu.MenuButton("Editor Extensions", "icon/16/connect-established.png");
 302   var mb4_04 = new qx.ui.menu.MenuButton("Framework Preferences");
 303
 304   m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
 305
 306   var mb4_suba_01 = new qx.ui.menu.MenuButton("New Window");
 307   var mb4_suba_b1 = new qx.ui.menu.MenuSeparator();
 308   var mb4_suba_02 = new qx.ui.menu.MenuRadioButton("Overlapping", null, true);
 309   var mb4_suba_03 = new qx.ui.menu.MenuRadioButton("Split Horizontally");
 310   var mb4_suba_04 = new qx.ui.menu.MenuRadioButton("Split Vertically");
 311   var mb4_suba_b2 = new qx.ui.menu.MenuSeparator();
 312   var mb4_suba_05 = new qx.ui.menu.MenuButton("Next Window");
 313   var mb4_suba_06 = new qx.ui.menu.MenuButton("Previous Window");
 314
 315   m4_suba.add(mb4_suba_01, mb4_suba_b1, mb4_suba_02, mb4_suba_03, mb4_suba_04, mb4_suba_b2, mb4_suba_05, mb4_suba_06);
 316
 317   var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
 318
 319   var m5 = new qx.ui.menu.Menu;
 320   var mb5_01 = new qx.ui.menu.MenuButton("Help", "icon/16/help.png");
 321   var mb5_02 = new qx.ui.menu.MenuButton("About", "icon/16/run.png");
 322   m5.add(mb5_01, mb5_02);
 323
 324   doc.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m3_subd, mb3_subd_02_suba, m4, m4_suba, m5);
 325
 326   var mb1 = new qx.ui.toolbar.ToolBar;
 327   var mbb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1);
 328   var mbb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2);
 329   var mbb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3);
 330   var mbb4 = new qx.ui.toolbar.ToolBarMenuButton("Options", m4);
 331   var mbb5 = new qx.ui.toolbar.ToolBarMenuButton("Help", m5);
 332   mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5);
 333   main.add(mb1);
 334
 335   // Toolbar
 336   function changeLayout(e) {
 337     this.setShow(e.getData());
 338   }
 339
 340   function changeSize(e) {
 341     var v = e.getData();
 342     var o = v == 22 ? 32 : 22;
 343
 344     this.setIcon(this.getIcon().replace(o, v));
 345   }
 346
 347   function createButton(text, icon, clazz, checked) {
 348     if (! clazz) {
 349       clazz = qx.ui.toolbar.ToolBarButton;
 350     }
 351
 352     var button = new clazz(text, "icon/22/" + icon + ".png");
 353     doc.addEventListener("changeLayout", changeLayout, button);
 354     doc.addEventListener("changeSize", changeSize, button);
 355
 356     if (checked) {
 357       button.setChecked(true);
 358     }
 359
 360     return button;
 361   }
 362
 363   var tb = new qx.ui.toolbar.ToolBar;
 364   main.add(tb);
 365
 366   var part = new qx.ui.toolbar.ToolBarPart;
 367   tb.add(part);
 368   part.add(createButton("New", "file-new"));
 369   part.add(new qx.ui.toolbar.ToolBarSeparator);
 370   part.add(createButton("Copy",  "edit-copy"));
 371   part.add(createButton("Cut",   "edit-cut"));
 372   part.add(createButton("Paste", "edit-paste"));
 373
 374   var part = new qx.ui.toolbar.ToolBarPart;
 375   tb.add(part);
 376   part.add(createButton("Check", "configure", qx.ui.toolbar.ToolBarCheckBox, true));
 377
 378   var part = new qx.ui.toolbar.ToolBarPart;
 379   tb.add(part);
 380   var radio1 = createButton("Radio1", "view-choose", qx.ui.toolbar.ToolBarRadioButton);
 381   var radio2 = createButton("Radio2", "view-detailed", qx.ui.toolbar.ToolBarRadioButton, true);
 382   var radio3 = createButton("Radio3", "view-icon", qx.ui.toolbar.ToolBarRadioButton);
 383   part.add(radio1, radio2, radio3);
 384   new qx.manager.selection.RadioManager(null, [radio1, radio2, radio3]);
 385
 386   // Toolbar manipulation
 387   var hor = new qx.ui.layout.HorizontalBoxLayout;
 388   hor.setDimension("auto", "auto");
 389   hor.set({ spacing:10, marginTop:20 });
 390   main.add(hor);
 391
 392   var vert = new qx.ui.layout.VerticalBoxLayout;
 393   vert.setDimension("auto", "auto");
 394   hor.add(vert);
 395
 396   var radio1 = new qx.ui.form.RadioButton("Show Icons and Label", "both");
 397   var radio2 = new qx.ui.form.RadioButton("Show Icons", "icon");
 398   var radio3 = new qx.ui.form.RadioButton("Show Label", "label");
 399   radio1.setChecked(true);
 400   vert.add(radio1, radio2, radio3);
 401   var rbm = new qx.manager.selection.RadioManager(null, [radio1, radio2, radio3]);
 402   rbm.addEventListener("changeSelected", function(e) {
 403     doc.dispatchEvent( new qx.event.type.DataEvent("changeLayout", e.getData().getValue() ) );
 404   });
 405
 406   // Alignment
 407   var vert = new qx.ui.layout.VerticalBoxLayout;
 408   vert.setDimension("auto", "auto");
 409   hor.add(vert);
 410
 411   var radio1 = new qx.ui.form.RadioButton("Left Aligned", "left");
 412   var radio2 = new qx.ui.form.RadioButton("Centered", "center");
 413   var radio3 = new qx.ui.form.RadioButton("Right Aligned", "right");
 414   radio1.setChecked(true);
 415   vert.add(radio1, radio2, radio3);
 416   var rbm = new qx.manager.selection.RadioManager(null, [radio1, radio2, radio3]);
 417   rbm.addEventListener("changeSelected", function(e) {
 418     tb.setHorizontalChildrenAlign(e.getData().getValue());
 419   });
 420
 421   // Icon Sizes
 422   var vert = new qx.ui.layout.VerticalBoxLayout;
 423   vert.setDimension("auto", "auto");
 424   hor.add(vert);
 425
 426   var button = new qx.ui.form.Button("Icons: 22 Pixel", "icon/16/colors.png");
 427   button.setHorizontalAlign("center");
 428   button.addEventListener("execute", function(e) {
 429     doc.dispatchEvent(new qx.event.type.DataEvent("changeSize", 22));
 430   });
 431   vert.add(button);
 432
 433   var button = new qx.ui.form.Button("Icons: 32 Pixel", "icon/16/colors.png");
 434   button.setHorizontalAlign("center");
 435   button.addEventListener("execute", function(e) {
 436     doc.dispatchEvent(new qx.event.type.DataEvent("changeSize", 32));
 437   });
 438   vert.add(button);
 439
 440   return main;
 441 }
 442
 443
 444 qx.Proto._createTabDemo = function() {
 445   var main = new qx.ui.layout.HorizontalBoxLayout;
 446   main.setPadding(10);
 447   main.set({ width:"100%", height:"100%", spacing:10 });
 448
 449   // Tab view
 450   var tf1 = new qx.ui.pageview.tabview.TabView;
 451   tf1.set({ width:qx.constant.Core.FLEX });
 452   main.add(tf1);
 453
 454   var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Edit");
 455   var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Find");
 456   var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Backup");
 457   t1_1.setChecked(true);
 458   tf1.getBar().add(t1_1, t1_2, t1_3);
 459
 460   var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
 461   var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
 462   var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
 463   tf1.getPane().add(p1_1, p1_2, p1_3);
 464
 465   p1_2.add(new qx.ui.form.TextField("Find Anywhere"));
 466   p1_3.add(new qx.ui.form.TextField("Backup Input"));
 467
 468   var c1 = new qx.ui.form.CheckBox("Place bar on top");
 469   var c2 = new qx.ui.form.CheckBox("Align tabs to left");
 470
 471   c1.setTop(0);
 472   c1.setChecked(true);
 473
 474   c2.setTop(20);
 475   c2.setChecked(true);
 476
 477   p1_1.add(c1, c2);
 478
 479   c1.addEventListener("changeChecked", function(e) {
 480     tf1.setPlaceBarOnTop(e.getData());
 481   });
 482
 483   c2.addEventListener("changeChecked", function(e) {
 484     tf1.setAlignTabsToLeft(e.getData());
 485   });
 486
 487   // Inner tab view
 488   var tf2 = new qx.ui.pageview.tabview.TabView;
 489   tf2.set({ left: 0, top: 50, right: 0, bottom: 0 });
 490   p1_2.add(tf2);
 491
 492   var t2_1 = new qx.ui.pageview.tabview.TabViewButton("Search for Files", "icon/16/file-open.png");
 493   var t2_2 = new qx.ui.pageview.tabview.TabViewButton("Search the Web",   "icon/16/network.png");
 494   var t2_3 = new qx.ui.pageview.tabview.TabViewButton("Search in Mails",  "icon/16/mail.png");
 495   t2_1.setChecked(true);
 496   tf2.getBar().add(t2_1, t2_2, t2_3);
 497
 498   var p2_1 = new qx.ui.pageview.tabview.TabViewPage(t2_1);
 499   var p2_2 = new qx.ui.pageview.tabview.TabViewPage(t2_2);
 500   var p2_3 = new qx.ui.pageview.tabview.TabViewPage(t2_3);
 501   tf2.getPane().add(p2_1, p2_2, p2_3);
 502
 503   var t2_1 = new qx.ui.form.TextField("Files...");
 504   var t2_2 = new qx.ui.form.TextField("Web...");
 505   var t2_3 = new qx.ui.form.TextField("Mails...");
 506
 507   t2_1.set({ top: 2, left: 0, width: 140 });
 508   t2_2.set({ top: 2, left: 0, width: 140 });
 509   t2_3.set({ top: 2, left: 0, width: 140 });
 510
 511   p2_1.add(t2_1);
 512   p2_2.add(t2_2);
 513   p2_3.add(t2_3);
 514
 515   var b2_1 = new qx.ui.form.Button("Search", "icon/16/search.png");
 516   var b2_2 = new qx.ui.form.Button("Search", "icon/16/search.png");
 517   var b2_3 = new qx.ui.form.Button("Search", "icon/16/search.png");
 518
 519   b2_1.set({ top: 0, left: 150 });
 520   b2_2.set({ top: 0, left: 150 });
 521   b2_3.set({ top: 0, left: 150 });
 522
 523   p2_1.add(b2_1);
 524   p2_2.add(b2_2);
 525   p2_3.add(b2_3);
 526
 527   function dosearch(e) {
 528     alert("Searching...");
 529   }
 530
 531   b2_1.addEventListener("click", dosearch);
 532   b2_2.addEventListener("click", dosearch);
 533   b2_3.addEventListener("click", dosearch);
 534
 535   // Bar view
 536   var bs = new qx.ui.pageview.buttonview.ButtonView;
 537   bs.set({ width:qx.constant.Core.FLEX, barPosition:"left" });
 538   main.add(bs);
 539
 540   var bsb1 = new qx.ui.pageview.buttonview.ButtonViewButton("Display", "icon/16/display.png");
 541   var bsb2 = new qx.ui.pageview.buttonview.ButtonViewButton("Colorize", "icon/16/colors.png");
 542   var bsb3 = new qx.ui.pageview.buttonview.ButtonViewButton("Icons", "icon/16/icons.png");
 543   var bsb4 = new qx.ui.pageview.buttonview.ButtonViewButton("Applications", "icon/16/run.png");
 544   var bsb5 = new qx.ui.pageview.buttonview.ButtonViewButton("System", "icon/16/display.png");
 545
 546   bsb1.setChecked(true);
 547
 548   bsb1.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
 549   bsb2.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
 550   bsb3.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
 551   bsb4.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
 552   bsb5.set({ iconPosition: "left", horizontalChildrenAlign: "left" });
 553
 554   bs.getBar().add(bsb1, bsb2, bsb3, bsb4, bsb5);
 555   bs.getBar().setHorizontalChildrenAlign("center");
 556   bs.getBar().setVerticalChildrenAlign("bottom");
 557
 558   var p1 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb1);
 559   var p2 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb2);
 560   var p3 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb3);
 561   var p4 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb4);
 562   var p5 = new qx.ui.pageview.buttonview.ButtonViewPage(bsb5);
 563   bs.getPane().add(p1, p2, p3, p4, p5);
 564
 565   p1.add(new qx.ui.form.TextField("Display Input"));
 566   p2.add(new qx.ui.form.TextField("Paint Input"));
 567   p3.add(new qx.ui.form.TextField("Icons Input"));
 568   p4.add(new qx.ui.form.TextField("Applications Input"));
 569   p5.add(new qx.ui.form.TextField("System Input"));
 570
 571   var r1 = new qx.ui.form.RadioButton("Top", "top");
 572   var r2 = new qx.ui.form.RadioButton("Right", "right");
 573   var r3 = new qx.ui.form.RadioButton("Bottom", "bottom");
 574   var r4 = new qx.ui.form.RadioButton("Left", "left", null, true);
 575
 576   r1.setTop(50);
 577   r2.setTop(70);
 578   r3.setTop(90);
 579   r4.setTop(110);
 580
 581   p1.add(r1, r2, r3, r4);
 582
 583   var rm = new qx.manager.selection.RadioManager(null, [r1, r2, r3, r4]);
 584
 585   rm.addEventListener("changeSelected", function(e) {
 586     bs.setBarPosition(e.getData().getValue());
 587   });
 588
 589   return main;
 590 }
 591
 592
 593 qx.Proto._createTreeDemo = function() {
 594   var main = new qx.ui.layout.HorizontalBoxLayout;
 595   main.setPadding(10);
 596   main.set({ width:"auto", height:"100%", spacing:10 });
 597
 598   // Workaround: qx.ui.tree.Tree causes an exception when added to a qx.ui.core.Parent that
 599   //       has no qx.ui.core.Parent. -> So we give the parent a pseudo parent
 600   var workaround = new qx.ui.layout.HorizontalBoxLayout;
 601   workaround.add(main);
 602
 603   var t = new qx.ui.tree.Tree("Root");
 604   t.set({ backgroundColor:255, border:qx.renderer.border.BorderPresets.getInstance().inset,
 605     overflow:"scrollY", height:"100%", width:200 });
 606   main.add(t);
 607
 608   var te1 = new qx.ui.tree.TreeFolder("Desktop", "icon/16/home.png", "icon/16/home.png");
 609   t.add(te1);
 610
 611   var te1_1 = new qx.ui.tree.TreeFolder("Files");
 612   var te1_2 = new qx.ui.tree.TreeFolder("Workspace");
 613   var te1_3 = new qx.ui.tree.TreeFolder("Network");
 614   var te1_4 = new qx.ui.tree.TreeFolder("Trash");
 615   te1.add(te1_1, te1_2, te1_3, te1_4);
 616   var te1_2_1 = new qx.ui.tree.TreeFile("Windows (C:)", "icon/16/harddrive.png");
 617   var te1_2_2 = new qx.ui.tree.TreeFile("Documents (D:)", "icon/16/harddrive.png");
 618   te1_2.add(te1_2_1, te1_2_2);
 619
 620   var te2 = new qx.ui.tree.TreeFolder("Inbox");
 621   t.add(te2);
 622
 623   var te2_1 = new qx.ui.tree.TreeFolder("Presets");
 624   var te2_2 = new qx.ui.tree.TreeFolder("Sent");
 625   var te2_3 = new qx.ui.tree.TreeFolder("Trash", "icon/16/trash.png", "icon/16/trash.png");
 626   var te2_4 = new qx.ui.tree.TreeFolder("Data");
 627   var te2_5 = new qx.ui.tree.TreeFolder("Edit");
 628
 629   var te2_5_1 = new qx.ui.tree.TreeFolder("Chat");
 630   var te2_5_2 = new qx.ui.tree.TreeFolder("Pustefix");
 631   var te2_5_3 = new qx.ui.tree.TreeFolder("TINC");
 632   te2_5.add(te2_5_1, te2_5_2, te2_5_3);
 633
 634   var te2_5_3_1 = new qx.ui.tree.TreeFolder("Announce");
 635   var te2_5_3_2 = new qx.ui.tree.TreeFolder("Devel");
 636   te2_5_3.add(te2_5_3_1, te2_5_3_2);
 637
 638   var te2_6 = new qx.ui.tree.TreeFolder("Lists");
 639
 640   var te2_6_1 = new qx.ui.tree.TreeFolder("Relations");
 641   var te2_6_2 = new qx.ui.tree.TreeFolder("Company");
 642   var te2_6_3 = new qx.ui.tree.TreeFolder("Questions");
 643   var te2_6_4 = new qx.ui.tree.TreeFolder("Internal");
 644   var te2_6_5 = new qx.ui.tree.TreeFolder("Products");
 645   var te2_6_6 = new qx.ui.tree.TreeFolder("Press");
 646   var te2_6_7 = new qx.ui.tree.TreeFolder("Development");
 647   var te2_6_8 = new qx.ui.tree.TreeFolder("Competition");
 648
 649   te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
 650
 651   var te2_7 = new qx.ui.tree.TreeFolder("Personal");
 652
 653   var te2_7_1 = new qx.ui.tree.TreeFolder("Bugs");
 654   var te2_7_2 = new qx.ui.tree.TreeFolder("Family");
 655   var te2_7_3 = new qx.ui.tree.TreeFolder("Projects");
 656   var te2_7_4 = new qx.ui.tree.TreeFolder("Holiday");
 657
 658   te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
 659
 660   var te2_8 = new qx.ui.tree.TreeFolder("Big");
 661
 662   for (var i = 0; i < 50; i++) {
 663     te2_8.add(new qx.ui.tree.TreeFolder("Item " + i));
 664   }
 665
 666   var te2_9 = new qx.ui.tree.TreeFolder("Spam");
 667
 668   te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
 669
 670   // Command frame
 671   var commandFrame = new qx.ui.groupbox.GroupBox("Control");
 672   commandFrame.set({ width:"auto", height:"auto" });
 673   main.add(commandFrame);
 674
 675   var command = new qx.ui.layout.VerticalBoxLayout;
 676   command.set({ width:"auto", height:"auto", paddingRight:12 });
 677   commandFrame.add(command);
 678
 679   var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
 680   command.add(tCurrentLabel);
 681
 682   var tCurrentInput = new qx.ui.form.TextField;
 683   tCurrentInput.set({ readOnly:true, marginBottom:20 });
 684   command.add(tCurrentInput);
 685
 686   t.getManager().addEventListener("changeSelection", function(e) {
 687     tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 688   });
 689
 690   var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 691   tDoubleClick.addEventListener("changeChecked", function(e) {
 692     t.setUseDoubleClick(e.getData());
 693   });
 694   command.add(tDoubleClick);
 695
 696   var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 697   tTreeLines.setChecked(true);
 698   tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 699   command.add(tTreeLines);
 700
 701   return main;
 702 }
 703
 704
 705 qx.Proto._createListDemo = function() {
 706   var main = new qx.ui.layout.HorizontalBoxLayout;
 707   main.setPadding(10);
 708   main.set({ width:"auto", height:"100%", spacing:10 });
 709
 710   // List
 711   var list = new qx.ui.form.List;
 712   list.set({ height:"100%", width:150, overflow:"scrollY" });
 713   main.add(list)
 714
 715   var item;
 716   for(var i = 1; i <= 35; i++) {
 717     var iconName;
 718     switch (parseInt(Math.random() * 5)) {
 719       case 0: iconName = "folder.png"; break;
 720       case 1: iconName = "harddrive.png"; break;
 721       case 2: iconName = "penguin.png"; break;
 722       case 3: iconName = "pda.png"; break;
 723       case 4: iconName = "bell.png"; break;
 724     }
 725     item = new qx.ui.form.ListItem("Item No " + i, "icon/" + ((i % 4) ? "16" : "48") + "/" + iconName);
 726
 727     if (!(i % 9)) (item.setEnabled(false));
 728
 729     list.add(item);
 730   }
 731
 732   // Control
 733   var control = new qx.ui.layout.VerticalBoxLayout;
 734   control.set({ width:"auto", height:"auto" });
 735   main.add(control);
 736
 737   var c1 = new qx.ui.form.CheckBox("Enable Multi-Selection");
 738   var c2 = new qx.ui.form.CheckBox("Enable Drag-Selection");
 739   var c3 = new qx.ui.form.CheckBox("Allow Deselection");
 740   var c4 = new qx.ui.form.CheckBox("Enable Inline Find");
 741   control.add(c1, c2, c3, c4);
 742
 743   c1.setChecked(true);
 744   c2.setChecked(true);
 745   c3.setChecked(true);
 746   c4.setChecked(true);
 747
 748   c1.addEventListener("changeChecked", function(e) {
 749     list.getManager().setMultiSelection(e.getData());
 750   });
 751   c2.addEventListener("changeChecked", function(e) {
 752     list.getManager().setDragSelection(e.getData());
 753   });
 754   c3.addEventListener("changeChecked", function(e) {
 755     list.getManager().setCanDeselect(e.getData());
 756   });
 757   c4.addEventListener("changeChecked", function(e) {
 758     list.setEnableInlineFind(e.getData());
 759   });
 760
 761   var rd1 = new qx.ui.form.RadioButton("Show Label", "label");
 762   var rd2 = new qx.ui.form.RadioButton("Show Icon", "icon");
 763   var rd3 = new qx.ui.form.RadioButton("Show Both", "both");
 764   rd3.setChecked(true);
 765   control.add(rd1, rd2, rd3);
 766   var rbm = new qx.manager.selection.RadioManager( name, [rd1, rd2, rd3]);
 767
 768   rbm.addEventListener("changeSelected", function(e) {
 769     for (var i = 0; i < list.getChildrenLength(); i++) {
 770       list.getChildren()[i].setShow(e.getData().getValue());
 771     }
 772   });
 773
 774   return main;
 775 }
 776
 777
 778 qx.Proto._createListViewDemo = function() {
 779   var main = new qx.ui.layout.HorizontalBoxLayout;
 780   main.setPadding(10);
 781   main.set({ width:"auto", height:"100%", spacing:10 });
 782
 783   var ld = [];
 784   var lt = [ "Image", "Text", "PDF", "Illustration", "Document" ];
 785
 786   for (var i = 0, t; i < 1000; i++) {
 787     t = Math.round(Math.random() * 4);
 788     ld.push({ name : { html : "E-Mail " + i, icon : "icon/16/email.png", iconWidth : 16, iconHeight : 16 }, size : { text : Math.round(Math.random()*100) + "kb" }, type : { text : lt[t] }, modified : { text : "Nov " + Math.round(Math.random() * 30 + 1) + " 2005" }, rights: { text : "-rw-r--r--" }, open : { uri : "http://www.google.com/search?q=" + i, html : "Open " + i }});
 789   }
 790
 791   var lc = {
 792     name : { label : "Name", width : 120, type : "iconHtml" },
 793     size: { label : "Size", width : 50, type : "text", align : "right" },
 794     type : { label : "Type", width : 80, type : "text" },
 795     modified : { label : "Last Modified", width : 150, type : "text" },
 796     rights : { label : "Rights", width: 80, type : "text" }
 797   }
 798
 799   var lv = new qx.ui.listview.ListView(ld, lc);
 800   main.add(lv);
 801
 802   lv.setBorder(qx.renderer.border.BorderPresets.getInstance().shadow);
 803   lv.setBackgroundColor("white");
 804   lv.setWidth(600);
 805   lv.setHeight(350);
 806
 807   return main;
 808 }
 809
 810
 811 qx.Proto._createTableDemo = function() {
 812   // table model
 813   var tableModel = new qx.ui.table.SimpleTableModel();
 814   tableModel.setColumns([ "ID", "A number", "A date", "Boolean test" ]);
 815   var rowData = [];
 816   var now = new Date().getTime();
 817   var dateRange = 400 * 24 * 60 * 60 * 1000; // 400 days
 818   for (var row = 0; row < 100; row++) {
 819     var date = new Date(now + Math.random() * dateRange - dateRange / 2);
 820     rowData.push([ row, Math.random() * 10000, date, (Math.random() > 0.5) ]);
 821   }
 822   tableModel.setData(rowData);
 823   tableModel.setColumnEditable(1, true);
 824   tableModel.setColumnEditable(2, true);
 825
 826   // table
 827   var table = new qx.ui.table.Table(tableModel);
 828   with (table) {
 829     set({ width:"100%", height:"100%" });
 830     setMetaColumnCounts([1, -1]);
 831     getSelectionModel().setSelectionMode(qx.ui.table.SelectionModel.MULTIPLE_INTERVAL_SELECTION);
 832     getTableColumnModel().setDataCellRenderer(3, new qx.ui.table.BooleanDataCellRenderer());
 833   }
 834
 835   return table;
 836 }
 837
 838
 839 qx.Proto._createDateChooserDemo = function() {
 840   var main = new qx.ui.layout.VerticalBoxLayout;
 841
 842   var chooser = new qx.ui.component.DateChooser;
 843   chooser.setLocation(10, 10);
 844   chooser.setWidth("auto");
 845   chooser.setHeight("auto");
 846   main.add(chooser);
 847
 848   return main;
 849 }
 850
 851
 852 qx.Proto._createNativeWindowDemo = function() {
 853   var main = new qx.ui.layout.VerticalBoxLayout;
 854   main.setPadding(10);
 855   main.set({ width:"auto", height:"auto", spacing:5 });
 856
 857   var win = new qx.client.NativeWindow("http://www.google.com");
 858   win.setDimension(600, 400);
 859
 860   var openBt = new qx.ui.form.Button("Open Native Window", "icon/16/wizard.png");
 861   openBt.addEventListener("click", function() { win.open(); } );
 862   main.add(openBt);
 863
 864   // Initial Settings
 865   var fs1 = new qx.ui.groupbox.GroupBox("Initial Settings");
 866   fs1.set({ width:250, height:"auto" });
 867   main.add(fs1);
 868
 869   var vert = new qx.ui.layout.VerticalBoxLayout;
 870   vert.set({ width:"auto", height:"auto" });
 871   fs1.add(vert);
 872
 873   var chk1 = new qx.ui.form.CheckBox("Resizeable");
 874   chk1.setChecked(true);
 875   chk1.addEventListener("changeChecked", function(e) {
 876     win.setResizeable(e.getData());
 877   });
 878
 879   var chk2 = new qx.ui.form.CheckBox("Show Statusbar");
 880   chk2.setChecked(false);
 881   chk2.addEventListener("changeChecked", function(e) {
 882     win.setShowStatusbar(e.getData());
 883   });
 884
 885   var chk3 = new qx.ui.form.CheckBox("Show Menubar");
 886   chk3.setChecked(false);
 887   chk3.addEventListener("changeChecked", function(e) {
 888     win.setShowMenubar(e.getData());
 889   });
 890
 891   var chk4 = new qx.ui.form.CheckBox("Show Location");
 892   chk4.setChecked(false);
 893   chk4.addEventListener("changeChecked", function(e) {
 894     win.setShowLocation(e.getData());
 895   });
 896
 897   var chk5 = new qx.ui.form.CheckBox("Show Toolbar");
 898   chk5.setChecked(false);
 899   chk5.addEventListener("changeChecked", function(e) {
 900     win.setShowToolbar(e.getData());
 901   });
 902
 903   var chk6 = new qx.ui.form.CheckBox("Allow Scrollbars");
 904   chk6.setChecked(true);
 905   chk6.addEventListener("changeChecked", function(e) {
 906     win.setAllowScrollbars(e.getData());
 907   });
 908
 909   var chk7 = new qx.ui.form.CheckBox("Modal");
 910   chk7.setChecked(false);
 911   chk7.addEventListener("changeChecked", function(e) {
 912     win.setModal(e.getData());
 913   });
 914
 915   var chk8 = new qx.ui.form.CheckBox("Dependent");
 916   chk8.setChecked(true);
 917   chk8.addEventListener("changeChecked", function(e) {
 918     win.setDependent(e.getData());
 919   });
 920
 921   vert.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8);
 922
 923   // Runtime Settings
 924   var fs2 = new qx.ui.groupbox.GroupBox("Runtime Settings");
 925   fs2.set({ width:250, height:"auto" });
 926   main.add(fs2);
 927
 928   var vert = new qx.ui.layout.VerticalBoxLayout;
 929   vert.set({ width:"auto", height:"auto", spacing:2 });
 930   fs2.add(vert);
 931
 932   var tf1 = new qx.ui.form.TextField("http://www.google.com");
 933   tf1.setWidth(150);
 934
 935   var setUrlBt = new qx.ui.form.Button("Set Url", "icon/16/ok.png");
 936   setUrlBt.addEventListener("click", function() {
 937     win.setUrl(tf1.getValue());
 938   });
 939
 940   var hor = new qx.ui.layout.HorizontalBoxLayout;
 941   hor.set({ width:"auto", height:"auto", spacing:5,
 942     verticalChildrenAlign:"middle", marginBottom:10 });
 943   vert.add(hor);
 944   hor.add(tf1, setUrlBt);
 945
 946
 947   var tf2 = new qx.ui.form.TextField("600");
 948   tf2.setWidth(50);
 949
 950   var btn2 = new qx.ui.form.Button("Set Width", "icon/16/ok.png");
 951   btn2.addEventListener("click", function() {
 952     win.setWidth(parseInt(tf2.getValue()));
 953   });
 954
 955   var hor = new qx.ui.layout.HorizontalBoxLayout;
 956   hor.set({ width:"auto", height:"auto", spacing:5,
 957     verticalChildrenAlign:"middle" });
 958   vert.add(hor);
 959   hor.add(tf2, btn2);
 960
 961
 962   var tf3 = new qx.ui.form.TextField("400");
 963   tf3.setWidth(50);
 964
 965   var btn3 = new qx.ui.form.Button("Set Height", "icon/16/ok.png");
 966   btn3.addEventListener("click", function() {
 967     win.setHeight(parseInt(tf3.getValue()));
 968   });
 969
 970   var hor = new qx.ui.layout.HorizontalBoxLayout;
 971   hor.set({ width:"auto", height:"auto", spacing:5,
 972     verticalChildrenAlign:"middle", marginBottom:10 });
 973   vert.add(hor);
 974   hor.add(tf3, btn3);
 975
 976
 977   var btn4 = new qx.ui.form.Button("Center to screen", "icon/16/display.png");
 978   btn4.setWidth("100%");
 979   btn4.addEventListener("click", function() {
 980     win.centerToScreen()
 981   });
 982
 983   var btn5 = new qx.ui.form.Button("Center to screen area", "icon/16/display.png");
 984   btn5.setWidth("100%");
 985   btn5.addEventListener("click", function() {
 986     win.centerToScreenArea()
 987   });
 988
 989   var btn6 = new qx.ui.form.Button("Center to opener", "icon/16/display.png");
 990   btn6.setWidth("100%");
 991   btn6.addEventListener("click", function() {
 992     win.centerToOpener()
 993   });
 994
 995   vert.add(btn4, btn5, btn6);
 996
 997   return main;
 998 }
 999
1000
1001 qx.Proto._createInternalWindowDemo = function() {
1002   var doc = qx.ui.core.ClientDocument.getInstance();
1003
1004   var main = new qx.ui.layout.CanvasLayout;
1005   main.setOverflow("hidden");
1006
1007   // Create the windows
1008   var w1 = new qx.ui.window.Window("First Window", "icon/16/bell.png");
1009   w1.setSpace(20, 400, 48, 250);
1010   main.add(w1);
1011
1012   var w2 = new qx.ui.window.Window("Second Window", "icon/16/colors.png");
1013   w2.setSpace(250, "auto", 120, "auto");
1014   main.add(w2);
1015
1016   var w3 = new qx.ui.window.Window("Third Window", "icon/16/network.png");
1017   w3.setSpace(100, "auto", 200, "auto");
1018   w3.set({ maxWidth:450, maxHeight:400 });
1019   main.add(w3);
1020
1021   var wm1 = new qx.ui.window.Window("First Modal Dialog");
1022   wm1.setSpace(150, 200, 150, 200);
1023   wm1.setModal(true);
1024   doc.add(wm1);
1025
1026   var wm2 = new qx.ui.window.Window("Second Modal Dialog");
1027   wm2.setSpace(100, 200, 100, 150);
1028   wm2.set({ modal:true, showClose:false });
1029   doc.add(wm2);
1030
1031   // Fill window 1
1032   var a1 = new qx.ui.basic.Atom("Welcome to your first own Window.<br/>Have fun!", "icon/32/chart.png");
1033   a1.set({ top: 4, left: 4 });
1034   w1.add(a1);
1035
1036   var tf1 = new qx.ui.pageview.tabview.TabView;
1037   tf1.set({ left: 10, top: 52, right: 10, bottom: 10 });
1038
1039   var t1_1 = new qx.ui.pageview.tabview.TabViewButton("Explore");
1040   var t1_2 = new qx.ui.pageview.tabview.TabViewButton("Internet");
1041   var t1_3 = new qx.ui.pageview.tabview.TabViewButton("Future");
1042
1043   t1_1.setChecked(true);
1044
1045   tf1.getBar().add(t1_1, t1_2, t1_3);
1046
1047   var p1_1 = new qx.ui.pageview.tabview.TabViewPage(t1_1);
1048   var p1_2 = new qx.ui.pageview.tabview.TabViewPage(t1_2);
1049   var p1_3 = new qx.ui.pageview.tabview.TabViewPage(t1_3);
1050
1051   tf1.getPane().add(p1_1, p1_2, p1_3);
1052
1053   w1.add(tf1);
1054
1055   // Fill window 2
1056   var at1 = new qx.ui.basic.Atom("Your second window", "icon/22/find.png");
1057   at1.setLocation(8, 8);
1058   w2.add(at1);
1059
1060   var fs1 = new qx.ui.groupbox.GroupBox("Settings");
1061   fs1.set({ left:4, top:40, right:4, bottom:4 });
1062
1063   var chk1 = new qx.ui.form.CheckBox("Show Icon");
1064   chk1.set({ left:0, top:0, checked:true });
1065   chk1.addEventListener("changeChecked", function(e) {
1066     w2.setShowIcon(e.getData());
1067   });
1068
1069   var chk2 = new qx.ui.form.CheckBox("Show Caption");
1070   chk2.set({ left:0, top:20, checked:true });
1071   chk2.addEventListener("changeChecked", function(e) {
1072     w2.setShowCaption(e.getData());
1073   });
1074
1075   var chk3 = new qx.ui.form.CheckBox("Resizeable");
1076   chk3.set({ left:0, top:50, checked:true });
1077   chk3.addEventListener("changeChecked", function(e) {
1078     w2.setResizeable(e.getData());
1079   });
1080
1081   var chk4 = new qx.ui.form.CheckBox("Moveable");
1082   chk4.set({ left:0, top:70, checked:true });
1083   chk4.addEventListener("changeChecked", function(e) {
1084     w2.setMoveable(e.getData());
1085   });
1086
1087   var chk5 = new qx.ui.form.CheckBox("Show Close");
1088   chk5.set({ left:140, top:0, checked:true });
1089   chk5.addEventListener("changeChecked", function(e) {
1090     w2.setShowClose(e.getData());
1091   });
1092
1093   var chk6 = new qx.ui.form.CheckBox("Show Maximize/Restore");
1094   chk6.set({ left:140, top:20, checked:true });
1095   chk6.addEventListener("changeChecked", function(e) {
1096     w2.setShowMaximize(e.getData());
1097   });
1098
1099   var chk7 = new qx.ui.form.CheckBox("Show Minimize");
1100   chk7.set({ left:140, top:40, checked:true });
1101   chk7.addEventListener("changeChecked", function(e) {
1102     w2.setShowMinimize(e.getData());
1103   });
1104
1105   var chk8 = new qx.ui.form.CheckBox("Allow Close");
1106   chk8.set({ left:140, top:70, checked:true });
1107   chk8.addEventListener("changeChecked", function(e) {
1108     w2.setAllowClose(e.getData());
1109   });
1110
1111   var chk9 = new qx.ui.form.CheckBox("Allow Maximize");
1112   chk9.set({ left:140, top:90, checked:true });
1113   chk9.addEventListener("changeChecked", function(e) {
1114     w2.setAllowMaximize(e.getData());
1115   });
1116
1117   var chk10 = new qx.ui.form.CheckBox("Allow Minimize");
1118   chk10.set({ left:140, top:110, checked:true });
1119   chk10.addEventListener("changeChecked", function(e) {
1120     w2.setAllowMinimize(e.getData());
1121   });
1122
1123   var l1 = new qx.ui.basic.Atom("Move Method", "icon/16/info.png");
1124   l1.setLocation(0, 100);
1125
1126   var rb1 = new qx.ui.form.RadioButton("Frame", "frame");
1127   rb1.setLocation(0, 120);
1128
1129   var rb2 = new qx.ui.form.RadioButton("Opaque", "opaque");
1130   rb2.setLocation(0, 140);
1131   rb2.setChecked(true);
1132
1133   var rb3 = new qx.ui.form.RadioButton("Translucent", "translucent");
1134   rb3.setLocation(0, 160);
1135
1136   var rbm1 = new qx.manager.selection.RadioManager("move", [rb1, rb2, rb3]);
1137
1138   rbm1.addEventListener("changeSelected", function(e) {
1139     w2.setMoveMethod(e.getData().getValue());
1140   });
1141
1142   var l2 = new qx.ui.basic.Atom("Resize Method", "icon/16/info.png");
1143   l2.setLocation(0, 190);
1144
1145   var rb4 = new qx.ui.form.RadioButton("Frame", "frame");
1146   rb4.setLocation(0, 210);
1147   rb4.setChecked(true);
1148
1149   var rb5 = new qx.ui.form.RadioButton("Opaque", "opaque");
1150   rb5.setLocation(0, 230);
1151
1152   var rb6 = new qx.ui.form.RadioButton("Lazy Opaque", "lazyopaque");
1153   rb6.setLocation(0, 250);
1154
1155   var rb7 = new qx.ui.form.RadioButton("Translucent", "translucent");
1156   rb7.setLocation(0, 270);
1157
1158   var rbm2 = new qx.manager.selection.RadioManager("resize", [rb4, rb5, rb6, rb7]);
1159
1160   rbm2.addEventListener("changeSelected", function(e) {
1161     w2.setResizeMethod(e.getData().getValue());
1162   });
1163
1164   var chk11 = new qx.ui.form.CheckBox("Show Statusbar");
1165   chk11.setLocation(140, 140);
1166   chk11.setChecked(false);
1167   chk11.addEventListener("changeChecked", function(e) {
1168     w2.setShowStatusbar(e.getData());
1169   });
1170
1171   var btnpack = new qx.ui.form.Button("Pack Window", "icon/16/cdrom.png");
1172   btnpack.setLocation(140, 170);
1173   btnpack.addEventListener("execute", function(e) {
1174     w2.pack();
1175   });
1176
1177   fs1.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8, chk9, chk10, l1, rb1, rb2, rb3, l2, rb4, rb5, rb6, rb7, chk11, btnpack);
1178   w2.add(fs1);
1179
1180   // Fill window 3
1181   var btn1 = new qx.ui.form.Button("Open Modal Dialog 1", "icon/16/launch.png");
1182   btn1.setLocation(4, 4);
1183   w3.add(btn1);
1184
1185   btn1.addEventListener("execute", function(e) {
1186     wm1.open();
1187   });
1188
1189   // Fill modal window 1
1190   var btn2 = new qx.ui.form.Button("Open Modal Dialog 2", "icon/16/launch.png");
1191   btn2.setLocation(4, 4);
1192   wm1.add(btn2);
1193
1194   btn2.addEventListener("execute", function(e) {
1195     wm2.open();
1196   });
1197
1198   var chkm1 = new qx.ui.form.CheckBox("Modal", null, null, true);
1199   chkm1.setLocation(4, 50);
1200   wm1.add(chkm1);
1201
1202   chkm1.addEventListener("changeChecked", function(e) {
1203     wm1.setModal(e.getData());
1204   });
1205
1206   // Fill modal window 2
1207   var icon1 = new qx.ui.basic.Image("icon/32/error.png");
1208   var warn1 = new qx.ui.basic.Label("Do you want to delete<br/>all your personal data?");
1209
1210   icon1.setTop(10);
1211   icon1.setLeft(10);
1212
1213   warn1.setTop(10);
1214   warn1.setLeft(48);
1215
1216   var btn3 = new qx.ui.form.Button("Yes", "icon/16/button-ok.png");
1217   var btn4 = new qx.ui.form.Button("No", "icon/16/button-cancel.png");
1218
1219   btn3.addEventListener("execute", function(e) {
1220     alert("Thank you!");
1221     wm2.close();
1222   });
1223
1224   btn4.addEventListener("execute", function(e) {
1225     alert("Sorry, please click 'Yes'!");
1226   });
1227
1228   btn3.set({ bottom : 10, right : 10 });
1229   btn4.set({ bottom : 10, left : 10 });
1230
1231   wm2.add(btn3, btn4, icon1, warn1);
1232
1233   // Icon & Color Themes
1234   //qx.manager.object.ImageManager.getInstance().createThemeList(w3, 20, 248);
1235   //qx.manager.object.ColorManager.getInstance().createThemeList(w3, 4, 58);
1236
1237   w1.open();
1238   w2.open();
1239   w3.open();
1240
1241   return main;
1242 }
1243
1244
1245 qx.Proto._createThemesDemo = function() {
1246   var doc = qx.ui.core.ClientDocument.getInstance();
1247
1248   // Theming window
1249   var win = new qx.ui.window.Window("Theming window", "icon/16/style.png");
1250   //win.set({ width:"auto", height:"auto" });
1251   doc.add(win);
1252
1253   var vert = new qx.ui.layout.VerticalBoxLayout;
1254   vert.set({ width:"auto", height:"auto", spacing:5, left:0, top:0, right:0, bottom:0 });
1255   vert.setPadding(10);
1256   win.add(vert);
1257
1258   var info = new qx.ui.basic.Atom("Click on one of the buttons and then view the "
1259     + "other tabs to see the changes", "icon/32/run.png");
1260   //info.set({ border:qx.renderer.border.BorderPresets.getInstance().inset, backgroundColor:"white" });
1261   info.setPadding(5);
1262   vert.add(info);
1263
1264   var hor = new qx.ui.layout.HorizontalBoxLayout;
1265   hor.set({ width:"auto", height:"auto", spacing:5 });
1266   vert.add(hor);
1267
1268   var can = new qx.ui.layout.CanvasLayout;
1269   can.set({ width:"auto", height:"auto" });
1270   hor.add(can);
1271   qx.manager.object.ImageManager.getInstance().createThemeList(can, 0, 0);
1272
1273   var can = new qx.ui.layout.CanvasLayout;
1274   can.set({ width:"auto", height:"auto" });
1275   hor.add(can);
1276   qx.manager.object.ColorManager.getInstance().createThemeList(can, 0, 0);
1277
1278   // Put the window in lower right corner
1279   win.set({ width:"auto", height:"auto" });
1280
1281   // Open button
1282   var main = new qx.ui.layout.VerticalBoxLayout;
1283   main.setPadding(10);
1284   main.set({ width:"auto", height:"auto" });
1285
1286   var openThemeWinBt = new qx.ui.form.Button("Open theming window", "icon/16/launch.png");
1287   openThemeWinBt.addEventListener("execute", function(e) {
1288     win.open();
1289
1290     // the following breaks in the current layouter
1291     /*
1292     win.setLeft(doc.getClientWidth() - win.getBoxWidth() - 5);
1293     win.setTop(doc.getClientHeight() - win.getBoxHeight() - 5);
1294     */
1295
1296     win.setLeft(doc.getClientWidth() - 500);
1297     win.setTop(doc.getClientHeight() - 300);
1298   });
1299   main.add(openThemeWinBt);
1300
1301   return main;
1302 }
1303