webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Inline_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>Inline widget.</p><p>Application layout is disabled by using qx.core.Settings. Scrollbars appear, if the content is bigger than the window.</p>
  16   </div>
  17
  18   <div id="iframe1" class="manualFrame" style="overflow:hidden;position:static;margin-top:38px;margin-left:10px">
  19     Inline Frame #1
  20   </div>
  21
  22   <div id="iframe2" class="manualFrame" style="overflow:hidden;position:static;margin-top:20px;margin-left:10px">
  23     Inline Frame #2
  24   </div>
  25
  26   <script type="text/javascript">
  27   qx.core.Init.getInstance().defineMain(function()
  28   {
  29     var d = qx.ui.core.ClientDocument.getInstance();
  30
  31     var inlineWidget = new qx.ui.basic.Inline("iframe1");
  32
  33     inlineWidget.setHeight("auto");
  34     inlineWidget.setWidth("auto");
  35
  36     var fieldSet = new qx.ui.groupbox.GroupBox("My first inline fieldset");
  37
  38     with(fieldSet)
  39     {
  40       // setWidth("auto");
  41       // setWidth("100%");
  42
  43       setLeft(0);
  44       setRight(0);
  45
  46       setHeight("auto");
  47     };
  48
  49     inlineWidget.add(fieldSet);
  50
  51     d.add(inlineWidget);
  52
  53
  54
  55     var atom1 = new qx.ui.basic.Atom("Name");
  56     var textfield1 = new qx.ui.form.TextField;
  57
  58     with(atom1)
  59     {
  60       setLeft(0);
  61       setTop(3);
  62     };
  63
  64     with(textfield1)
  65     {
  66       setLeft(80);
  67       setRight(0);
  68       setTop(0);
  69     };
  70
  71     fieldSet.add(atom1, textfield1);
  72
  73
  74
  75     var atom2 = new qx.ui.basic.Atom("First Name");
  76     var textfield2 = new qx.ui.form.TextField;
  77
  78     with(atom2)
  79     {
  80       setLeft(0);
  81       setTop(33);
  82     };
  83
  84     with(textfield2)
  85     {
  86       setLeft(80);
  87       setRight(0);
  88       setTop(30);
  89     };
  90
  91     fieldSet.add(atom2, textfield2);
  92
  93
  94
  95     var atom3 = new qx.ui.basic.Atom("City");
  96     var textfield3 = new qx.ui.form.TextField;
  97
  98     with(atom3)
  99     {
 100       setLeft(0);
 101       setTop(63);
 102     };
 103
 104     with(textfield3)
 105     {
 106       setLeft(80);
 107       setRight(0);
 108       setTop(60);
 109     };
 110
 111     fieldSet.add(atom3, textfield3);
 112
 113
 114
 115     /*
 116       Menu
 117     */
 118
 119       var m1 = new qx.ui.menu.Menu;
 120
 121       var mb1_01 = new qx.ui.menu.Button("New");
 122       var mb1_02 = new qx.ui.menu.Button("Open");
 123       var mb1_03 = new qx.ui.menu.Button("Save");
 124       var mb1_04 = new qx.ui.menu.Button("Save as");
 125       var mb1_05 = new qx.ui.menu.Button("Close");
 126       var mb1_06 = new qx.ui.menu.Button("Restore last saved");
 127
 128       m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
 129
 130
 131       var m2 = new qx.ui.menu.Menu;
 132
 133       var mb2_01 = new qx.ui.menu.Button("Undo");
 134       var mb2_02 = new qx.ui.menu.Button("Redo");
 135       var mb2_b1 = new qx.ui.menu.Separator();
 136       var mb2_03 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png");
 137       var mb2_04 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png");
 138       var mb2_05 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png");
 139       var mb2_06 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png");
 140       var mb2_b2 = new qx.ui.menu.Separator();
 141       var mb2_07 = new qx.ui.menu.Button("Select All");
 142       var mb2_08 = new qx.ui.menu.Button("Find");
 143       var mb2_09 = new qx.ui.menu.Button("Find Again");
 144
 145
 146
 147
 148       mb2_05.setEnabled(false);
 149       mb2_06.setEnabled(false);
 150       mb2_09.setEnabled(false);
 151
 152       m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
 153
 154
 155       var m3 = new qx.ui.menu.Menu;
 156       var m3_suba = new qx.ui.menu.Menu;
 157       var m3_subb = new qx.ui.menu.Menu;
 158       var m3_subc = new qx.ui.menu.Menu;
 159
 160       var mb3_01 = new qx.ui.menu.CheckBox("File List", null, false);
 161       var mb3_02 = new qx.ui.menu.CheckBox("Syntax Highlighting", null, true);
 162       var mb3_03 = new qx.ui.menu.CheckBox("Statusbar", null, true);
 163       var mb3_b1 = new qx.ui.menu.Separator();
 164       var mb3_04 = new qx.ui.menu.Button("Printer Font", null, null, m3_suba);
 165       var mb3_05 = new qx.ui.menu.Button("Editor Font", null, null, m3_subb);
 166       var mb3_06 = new qx.ui.menu.Button("Export Font", null, null, m3_subc);
 167
 168       m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06);
 169
 170       var mb3_suba_01 = new qx.ui.menu.Button("Tahoma, 11pt");
 171       var mb3_suba_02 = new qx.ui.menu.Button("Tahoma, 12pt");
 172       var mb3_suba_03 = new qx.ui.menu.Button("Tahoma, 13pt");
 173       var mb3_suba_04 = new qx.ui.menu.Button("Tahoma, 14pt");
 174       var mb3_suba_05 = new qx.ui.menu.Button("Tahoma, 15pt");
 175
 176       m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
 177
 178       var mb3_subb_01 = new qx.ui.menu.Button("Verdana, 11pt");
 179       var mb3_subb_02 = new qx.ui.menu.Button("Verdana, 12pt");
 180       var mb3_subb_03 = new qx.ui.menu.Button("Verdana, 13pt");
 181       var mb3_subb_04 = new qx.ui.menu.Button("Verdana, 14pt");
 182       var mb3_subb_05 = new qx.ui.menu.Button("Verdana, 15pt");
 183
 184       m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
 185
 186       var mb3_subc_01 = new qx.ui.menu.Button("Courier, 11pt");
 187       var mb3_subc_02 = new qx.ui.menu.Button("Courier, 12pt");
 188       var mb3_subc_03 = new qx.ui.menu.Button("Courier, 13pt");
 189       var mb3_subc_04 = new qx.ui.menu.Button("Courier, 14pt");
 190       var mb3_subc_05 = new qx.ui.menu.Button("Courier, 15pt");
 191
 192       m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
 193
 194
 195
 196       var m4 = new qx.ui.menu.Menu;
 197
 198       var m4_suba = new qx.ui.menu.Menu;
 199
 200       var mb4_01 = new qx.ui.menu.Button("View", null, null, m4_suba);
 201       var mb4_b1 = new qx.ui.menu.Separator();
 202       var mb4_02 = new qx.ui.menu.Button("Editor Preferences...");
 203       var mb4_03 = new qx.ui.menu.Button("Editor Extensions");
 204       var mb4_04 = new qx.ui.menu.Button("Framework Preferences");
 205
 206       m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
 207
 208       var mb4_suba_01 = new qx.ui.menu.Button("New Window");
 209       var mb4_suba_b1 = new qx.ui.menu.Separator();
 210       var mb4_suba_02 = new qx.ui.menu.RadioButton("Overlapping", null, true);
 211       var mb4_suba_03 = new qx.ui.menu.RadioButton("Split Horizontally", null);
 212       var mb4_suba_04 = new qx.ui.menu.RadioButton("Split Vertically", null);
 213       var mb4_suba_b2 = new qx.ui.menu.Separator();
 214       var mb4_suba_05 = new qx.ui.menu.Button("Next Window");
 215       var mb4_suba_06 = new qx.ui.menu.Button("Previous Window");
 216
 217       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);
 218
 219       var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
 220
 221
 222       var m5 = new qx.ui.menu.Menu;
 223
 224       var mb5_01 = new qx.ui.menu.Button("Help");
 225       var mb5_02 = new qx.ui.menu.Button("About");
 226
 227       m5.add(mb5_01, mb5_02);
 228
 229       d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m4, m4_suba, m5);
 230
 231
 232     var inline2 = new qx.ui.basic.Inline("iframe2");
 233
 234     inline2.setHeight("auto");
 235     inline2.setWidth("auto");
 236
 237
 238     var mb1 = new qx.ui.toolbar.ToolBar;
 239
 240     var mbb1 = new qx.ui.toolbar.MenuButton("File", m1);
 241     var mbb2 = new qx.ui.toolbar.MenuButton("Edit", m2);
 242     var mbb3 = new qx.ui.toolbar.MenuButton("View", m3);
 243     var mbb4 = new qx.ui.toolbar.MenuButton("Options", m4);
 244     var mbb5 = new qx.ui.toolbar.MenuButton("Help", m5);
 245
 246     mb1.add(mbb1, mbb2, mbb3, mbb4, mbb5);
 247
 248     with(mb1)
 249     {
 250       setWidth(400);
 251       setHeight("auto");
 252     };
 253
 254     inline2.add(mb1);
 255
 256     d.add(inline2);
 257   });
 258   </script>
 259 </body>
 260 </html>