swat/apps/qooxdoo-examples/test/Window_5.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>Some tests for zIndex handling for different widgets.</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
  24     var btnaler = new qx.ui.form.Button("Open Alert", "icon/16/error.png");
  25     btnaler.setLocation(450, 50);
  26     qx.ui.core.ClientDocument.getInstance().add(btnaler);
  27
  28
  29     var aler = new qx.ui.popup.PopupAtom("Attention", "icon/128/error.png");
  30     aler.setLocation(40, 70);
  31     aler.setBackgroundColor("yellow");
  32     aler.setOpacity(0.5);
  33     qx.ui.core.ClientDocument.getInstance().add(aler);
  34
  35     btnaler.addEventListener("execute", function(e)
  36     {
  37       aler.show();
  38     });
  39
  40
  41
  42     var bar = new qx.ui.basic.Terminator;
  43     bar.setLocation(0, 0);
  44     bar.setWidth(50);
  45     bar.setBottom(0);
  46     bar.setBackgroundColor("black");
  47     bar.setOpacity(0.5);
  48     bar.setZIndex(1e7);
  49     qx.ui.core.ClientDocument.getInstance().add(bar);
  50
  51
  52
  53
  54     var w1 = new qx.ui.window.Window("Application Window");
  55     w1.setSpace(20, 400, 48, 250);
  56     d.add(w1);
  57
  58
  59
  60     var m1 = new qx.ui.menu.Menu;
  61
  62     var mb11 = new qx.ui.menu.MenuButton("Open");
  63     var mb12 = new qx.ui.menu.MenuButton("Save");
  64     var mb13 = new qx.ui.menu.MenuButton("Close");
  65     var mb14 = new qx.ui.menu.MenuButton("Exit");
  66
  67     m1.add(mb11, mb12, mb13, mb14);
  68
  69     var m2 = new qx.ui.menu.Menu;
  70
  71     var mb21 = new qx.ui.menu.MenuButton("Cut");
  72     var mb22 = new qx.ui.menu.MenuButton("Copy");
  73     var mb23 = new qx.ui.menu.MenuButton("Paste");
  74
  75     m2.add(mb21, mb22, mb23);
  76
  77     var m3 = new qx.ui.menu.Menu;
  78
  79     var mb31 = new qx.ui.menu.MenuButton("Toolbars");
  80     var mb32 = new qx.ui.menu.MenuButton("Options");
  81
  82     m3.add(mb31, mb32);
  83
  84     var m4 = new qx.ui.menu.Menu;
  85
  86     var mb41 = new qx.ui.menu.MenuButton("Help");
  87     var mb42 = new qx.ui.menu.MenuButton("Info");
  88
  89     m4.add(mb41, mb42);
  90
  91     qx.ui.core.ClientDocument.getInstance().add(m1, m2, m3, m4);
  92
  93
  94
  95
  96
  97
  98
  99     var t1 = new qx.ui.toolbar.ToolBar;
 100
 101     t1.setLocation(0, 0);
 102     t1.setRight(0);
 103
 104     var tb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1);
 105     var tb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2);
 106     var tb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3);
 107     var tb4 = new qx.ui.toolbar.ToolBarMenuButton("Help", m4);
 108
 109     t1.add(tb1, tb2, tb3, tb4);
 110
 111     w1.add(t1);
 112
 113     var tt1 = new qx.ui.popup.ToolTip("File Menu Button");
 114     var tt2 = new qx.ui.popup.ToolTip("Edit Menu Button");
 115     var tt3 = new qx.ui.popup.ToolTip("View Menu Button");
 116     var tt4 = new qx.ui.popup.ToolTip("Help Menu Button");
 117
 118     tb1.setToolTip(tt1);
 119     tb2.setToolTip(tt2);
 120     tb3.setToolTip(tt3);
 121     tb4.setToolTip(tt4);
 122
 123     qx.ui.core.ClientDocument.getInstance().add(tt1, tt2, tt3, tt4);
 124
 125
 126
 127
 128
 129
 130
 131
 132     var c1 = new qx.ui.form.ComboBox;
 133
 134     c1.setLocation(0, 35);
 135
 136     c1.getList().add(new qx.ui.form.ListItem("Item 1"));
 137     c1.getList().add(new qx.ui.form.ListItem("Item 2"));
 138     c1.getList().add(new qx.ui.form.ListItem("Item 3"));
 139     c1.getList().add(new qx.ui.form.ListItem("Item 4"));
 140     c1.getList().add(new qx.ui.form.ListItem("Item 5"));
 141
 142     w1.add(c1);
 143
 144
 145
 146
 147
 148     var square = new qx.ui.basic.Terminator;
 149     square.setDimension(50, 50);
 150     square.setLocation(0, 70);
 151     square.setBackgroundColor("blue");
 152     w1.add(square);
 153
 154
 155     var p1 = new qx.ui.popup.PopupAtom("Hello World");
 156     p1.setBorder(4, "solid", "red");
 157     p1.setBackgroundColor("yellow");
 158     p1.setLocation(0, 70);
 159     p1.setAutoHide(false);
 160     w1.add(p1);
 161
 162     var p2 = new qx.ui.popup.PopupAtom("Hello World");
 163     p2.setBorder(4, "solid", "yellow");
 164     p2.setBackgroundColor("red");
 165     p2.setLocation(30, 70);
 166     p2.setAutoHide(false);
 167     w1.add(p2);
 168
 169
 170     var btn1 = new qx.ui.form.Button("Show1");
 171     btn1.setLocation(140, 70);
 172     w1.add(btn1);
 173
 174     var btn2 = new qx.ui.form.Button("Hide1");
 175     btn2.setLocation(190, 70);
 176     w1.add(btn2);
 177
 178     btn1.addEventListener("execute", function(e) {
 179       p1.show();
 180     });
 181
 182     btn2.addEventListener("execute", function(e) {
 183       p1.hide();
 184     });
 185
 186
 187
 188     var btn3 = new qx.ui.form.Button("Show2");
 189     btn3.setLocation(250, 70);
 190     w1.add(btn3);
 191
 192     var btn4 = new qx.ui.form.Button("Hide2");
 193     btn4.setLocation(300, 70);
 194     w1.add(btn4);
 195
 196     btn3.addEventListener("execute", function(e) {
 197       p2.show();
 198     });
 199
 200     btn4.addEventListener("execute", function(e) {
 201       p2.hide();
 202     });
 203
 204
 205
 206     w1.open();
 207
 208
 209
 210
 211
 212     var w2 = new qx.ui.window.Window("Test 2");
 213     w2.setDimension(400, 200);
 214     w2.setLocation(200, 200);
 215     qx.ui.core.ClientDocument.getInstance().add(w2);
 216     w2.show();
 217
 218   });
 219   </script>
 220 </body>
 221 </html>