webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/NativeWindow_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>Native Windows. Could be understood as an enhanced window.open with some additional options like to create modal windows.</p>
  16   </div>
  17
  18   <script type="text/javascript">
  19   qx.core.Init.getInstance().defineMain(function()
  20   {
  21     var w1 = new qx.client.NativeWindow("http://www.google.com");
  22
  23     w1.setDimension(600, 400);
  24
  25
  26     w1.addEventListener("load", function(e) {
  27       this.debug("Content loaded: " + this.isLoaded());
  28     });
  29
  30     w1.addEventListener("close", function(e) {
  31       this.debug("Window closed: " + this.isClosed());
  32     });
  33
  34
  35
  36
  37     var d = qx.ui.core.ClientDocument.getInstance();
  38
  39     var btn1 = new qx.ui.form.Button("Open Native Window", "icon/16/appearance.png");
  40     with(btn1)
  41     {
  42       setTop(48);
  43       setLeft(20);
  44
  45       addEventListener("click", function() { w1.open(); } );
  46     };
  47
  48     d.add(btn1);
  49
  50
  51
  52
  53
  54     var l = new qx.ui.layout.VerticalBoxLayout;
  55     l.setLocation(20, 96);
  56     l.setWidth("auto");
  57     l.setHeight("auto");
  58     d.add(l);
  59
  60     var fs1 = new qx.ui.groupbox.GroupBox("Initial Settings");
  61     fs1.setHeight("auto");
  62     l.add(fs1);
  63
  64
  65     var chk1 = new qx.ui.form.CheckBox("Resizeable");
  66     chk1.setLocation(0, 0);
  67     chk1.setChecked(true);
  68     chk1.addEventListener("changeChecked", function(e) {
  69       w1.setResizeable(e.getData());
  70     });
  71
  72     var chk2 = new qx.ui.form.CheckBox("Show Statusbar");
  73     chk2.setLocation(0, 20);
  74     chk2.setChecked(false);
  75     chk2.addEventListener("changeChecked", function(e) {
  76       w1.setShowStatusbar(e.getData());
  77     });
  78
  79     var chk3 = new qx.ui.form.CheckBox("Show Menubar");
  80     chk3.setLocation(0, 40);
  81     chk3.setChecked(false);
  82     chk3.addEventListener("changeChecked", function(e) {
  83       w1.setShowMenubar(e.getData());
  84     });
  85
  86     var chk4 = new qx.ui.form.CheckBox("Show Location");
  87     chk4.setLocation(0, 60);
  88     chk4.setChecked(false);
  89     chk4.addEventListener("changeChecked", function(e) {
  90       w1.setShowLocation(e.getData());
  91     });
  92
  93     var chk5 = new qx.ui.form.CheckBox("Show Toolbar");
  94     chk5.setLocation(0, 80);
  95     chk5.setChecked(false);
  96     chk5.addEventListener("changeChecked", function(e) {
  97       w1.setShowToolbar(e.getData());
  98     });
  99
 100     var chk6 = new qx.ui.form.CheckBox("Allow Scrollbars");
 101     chk6.setLocation(0, 100);
 102     chk6.setChecked(true);
 103     chk6.addEventListener("changeChecked", function(e) {
 104       w1.setAllowScrollbars(e.getData());
 105     });
 106
 107     var chk7 = new qx.ui.form.CheckBox("Modal");
 108     chk7.setLocation(0, 120);
 109     chk7.setChecked(false);
 110     chk7.addEventListener("changeChecked", function(e) {
 111       w1.setModal(e.getData());
 112     });
 113
 114     var chk8 = new qx.ui.form.CheckBox("Dependent");
 115     chk8.setLocation(0, 140);
 116     chk8.setChecked(true);
 117     chk8.addEventListener("changeChecked", function(e) {
 118       w1.setDependent(e.getData());
 119     });
 120
 121     fs1.add(chk1, chk2, chk3, chk4, chk5, chk6, chk7, chk8);
 122
 123
 124
 125
 126
 127
 128
 129
 130     var fs2 = new qx.ui.groupbox.GroupBox("Runtime Settings");
 131     fs2.setHeight("auto");
 132     l.add(fs2);
 133
 134
 135
 136     var tf1 = new qx.ui.form.TextField("http://www.google.com");
 137     tf1.setLocation(0, 2);
 138     tf1.setWidth(150);
 139
 140     var btn1 = new qx.ui.form.Button("Set Url", "icon/16/button-ok.png");
 141     btn1.setLocation(155, 0);
 142     btn1.addEventListener("click", function() {
 143       w1.setUrl(tf1.getValue());
 144     });
 145
 146
 147
 148
 149     var tf2 = new qx.ui.form.TextField("600");
 150     tf2.setLocation(0, 42);
 151     tf2.setWidth(50);
 152
 153     var btn2 = new qx.ui.form.Button("Set Width", "icon/16/button-ok.png");
 154     btn2.setLocation(55, 40);
 155     btn2.addEventListener("click", function() {
 156       w1.setWidth(parseInt(tf2.getValue()));
 157     });
 158
 159
 160
 161
 162     var tf3 = new qx.ui.form.TextField("400");
 163     tf3.setLocation(0, 72);
 164     tf3.setWidth(50);
 165
 166     var btn3 = new qx.ui.form.Button("Set Height", "icon/16/button-ok.png");
 167     btn3.setLocation(55, 70);
 168     btn3.addEventListener("click", function() {
 169       w1.setHeight(parseInt(tf3.getValue()));
 170     });
 171
 172
 173
 174     var btn4 = new qx.ui.form.Button("Center to screen", "icon/16/paint.png");
 175     btn4.setLocation(0, 110);
 176     btn4.addEventListener("click", function() {
 177       w1.centerToScreen()
 178     });
 179
 180     var btn5 = new qx.ui.form.Button("Center to screen area", "icon/16/paint.png");
 181     btn5.setLocation(0, 140);
 182     btn5.addEventListener("click", function() {
 183       w1.centerToScreenArea()
 184     });
 185
 186     var btn6 = new qx.ui.form.Button("Center to opener", "icon/16/paint.png");
 187     btn6.setLocation(0, 170);
 188     btn6.addEventListener("click", function() {
 189       w1.centerToOpener()
 190     });
 191
 192
 193
 194     fs2.add(tf1, btn1, tf2, btn2, tf3, btn3, btn4, btn5, btn6);
 195   });
 196   </script>
 197 </body>
 198 </html>