swat/apps/qooxdoo-examples/example/ToolBar_4.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>Again a nice example which shows how to use qx.ui.toolbar.ToolBar as a menubar system.</p>
  16     <p>Added some parts and a new flex zone which aligns the help button to the right edge</p>
  17     <p>Added some image and a qx.ui.toolbar.ToolBarCheckBox, you can event combine all these features as you can easily see here.</p>
  18   </div>
  19
  20   <script type="text/javascript">
  21     qx.core.Init.getInstance().defineMain(function()
  22     {
  23       var d = qx.ui.core.ClientDocument.getInstance();
  24
  25       var c1 = new qx.client.Command();
  26       c1.addEventListener("execute", function(e) {
  27         this.debug("Execute: " + e.getData().getLabel());
  28       });
  29
  30
  31
  32
  33       var m1 = new qx.ui.menu.Menu;
  34
  35       var mb1_01 = new qx.ui.menu.MenuButton("New", null, c1);
  36       var mb1_02 = new qx.ui.menu.MenuButton("Open", null, c1);
  37       var mb1_03 = new qx.ui.menu.MenuButton("Save", null, c1);
  38       var mb1_04 = new qx.ui.menu.MenuButton("Save as", null, c1);
  39       var mb1_05 = new qx.ui.menu.MenuButton("Close", null, c1);
  40       var mb1_06 = new qx.ui.menu.MenuButton("Restore last saved", null, c1);
  41
  42       m1.add(mb1_01, mb1_02, mb1_03, mb1_04, mb1_05, mb1_06);
  43
  44
  45       var m2 = new qx.ui.menu.Menu;
  46
  47       var mb2_01 = new qx.ui.menu.MenuButton("Undo", null, c1);
  48       var mb2_02 = new qx.ui.menu.MenuButton("Redo", null, c1);
  49       var mb2_b1 = new qx.ui.menu.MenuSeparator();
  50       var mb2_03 = new qx.ui.menu.MenuButton("Cut", "icon/16/edit-cut.png", c1);
  51       var mb2_04 = new qx.ui.menu.MenuButton("Copy", "icon/16/edit-copy.png", c1);
  52       var mb2_05 = new qx.ui.menu.MenuButton("Paste", "icon/16/edit-paste.png", c1);
  53       var mb2_06 = new qx.ui.menu.MenuButton("Delete", "icon/16/edit-delete.png", c1);
  54       var mb2_b2 = new qx.ui.menu.MenuSeparator();
  55       var mb2_07 = new qx.ui.menu.MenuButton("Select All", null, c1);
  56       var mb2_08 = new qx.ui.menu.MenuButton("Find", null, c1);
  57       var mb2_09 = new qx.ui.menu.MenuButton("Find Again", null, c1);
  58
  59
  60
  61
  62       mb2_05.setEnabled(false);
  63       mb2_06.setEnabled(false);
  64       mb2_09.setEnabled(false);
  65
  66       m2.add(mb2_01, mb2_02, mb2_b1, mb2_03, mb2_04, mb2_05, mb2_06, mb2_b2, mb2_07, mb2_08, mb2_09);
  67
  68
  69       var m3 = new qx.ui.menu.Menu;
  70       var m3_suba = new qx.ui.menu.Menu;
  71       var m3_subb = new qx.ui.menu.Menu;
  72       var m3_subc = new qx.ui.menu.Menu;
  73       var m3_subd = new qx.ui.menu.Menu;
  74
  75       var mb3_01 = new qx.ui.menu.MenuCheckBox("File List", c1, false);
  76       var mb3_02 = new qx.ui.menu.MenuCheckBox("Syntax Highlighting", c1, true);
  77       var mb3_03 = new qx.ui.menu.MenuCheckBox("Statusbar", c1, true);
  78       var mb3_b1 = new qx.ui.menu.MenuSeparator();
  79       var mb3_04 = new qx.ui.menu.MenuButton("Printer Font", null, null, m3_suba);
  80       var mb3_05 = new qx.ui.menu.MenuButton("Editor Font", null, null, m3_subb);
  81       var mb3_06 = new qx.ui.menu.MenuButton("Export Font", null, null, m3_subc);
  82       var mb3_b2 = new qx.ui.menu.MenuSeparator();
  83       var mb3_07 = new qx.ui.menu.MenuButton("Advanced", null, null, m3_subd);
  84
  85       m3.add(mb3_01, mb3_02, mb3_03, mb3_b1, mb3_04, mb3_05, mb3_06, mb3_b2, mb3_07);
  86
  87       var mb3_suba_01 = new qx.ui.menu.MenuButton("Tahoma, 11pt", null, c1);
  88       var mb3_suba_02 = new qx.ui.menu.MenuButton("Tahoma, 12pt", null, c1);
  89       var mb3_suba_03 = new qx.ui.menu.MenuButton("Tahoma, 13pt", null, c1);
  90       var mb3_suba_04 = new qx.ui.menu.MenuButton("Tahoma, 14pt", null, c1);
  91       var mb3_suba_05 = new qx.ui.menu.MenuButton("Tahoma, 15pt", null, c1);
  92
  93       m3_suba.add(mb3_suba_01, mb3_suba_02, mb3_suba_03, mb3_suba_04, mb3_suba_05);
  94
  95       var mb3_subb_01 = new qx.ui.menu.MenuButton("Verdana, 11pt", null, c1);
  96       var mb3_subb_02 = new qx.ui.menu.MenuButton("Verdana, 12pt", null, c1);
  97       var mb3_subb_03 = new qx.ui.menu.MenuButton("Verdana, 13pt", null, c1);
  98       var mb3_subb_04 = new qx.ui.menu.MenuButton("Verdana, 14pt", null, c1);
  99       var mb3_subb_05 = new qx.ui.menu.MenuButton("Verdana, 15pt", null, c1);
 100
 101       m3_subb.add(mb3_subb_01, mb3_subb_02, mb3_subb_03, mb3_subb_04, mb3_subb_05);
 102
 103       var mb3_subc_01 = new qx.ui.menu.MenuButton("Courier, 11pt", null, c1);
 104       var mb3_subc_02 = new qx.ui.menu.MenuButton("Courier, 12pt", null, c1);
 105       var mb3_subc_03 = new qx.ui.menu.MenuButton("Courier, 13pt", null, c1);
 106       var mb3_subc_04 = new qx.ui.menu.MenuButton("Courier, 14pt", null, c1);
 107       var mb3_subc_05 = new qx.ui.menu.MenuButton("Courier, 15pt", null, c1);
 108
 109       m3_subc.add(mb3_subc_01, mb3_subc_02, mb3_subc_03, mb3_subc_04, mb3_subc_05);
 110
 111       var mb3_subd_02_suba = new qx.ui.menu.Menu();
 112
 113       var mb3_subd_02_suba_01 = new qx.ui.menu.MenuButton("First", null, c1);
 114       var mb3_subd_02_suba_02 = new qx.ui.menu.MenuButton("Second", null, c1);
 115       var mb3_subd_02_suba_03 = new qx.ui.menu.MenuButton("Third", null, c1);
 116
 117       mb3_subd_02_suba.add(mb3_subd_02_suba_01, mb3_subd_02_suba_02, mb3_subd_02_suba_03);
 118
 119       var mb3_subd_01 = new qx.ui.menu.MenuButton("First", null, c1);
 120       var mb3_subd_02 = new qx.ui.menu.MenuButton("Second", null, c1, mb3_subd_02_suba);
 121       var mb3_subd_03 = new qx.ui.menu.MenuButton("Third", null, c1);
 122
 123       m3_subd.add(mb3_subd_01, mb3_subd_02, mb3_subd_03);
 124
 125       var m4 = new qx.ui.menu.Menu;
 126
 127       var m4_suba = new qx.ui.menu.Menu;
 128
 129       var mb4_01 = new qx.ui.menu.MenuButton("View", null, c1, m4_suba);
 130       var mb4_b1 = new qx.ui.menu.MenuSeparator();
 131       var mb4_02 = new qx.ui.menu.MenuButton("Editor Preferences...", null, c1);
 132       var mb4_03 = new qx.ui.menu.MenuButton("Editor Extensions", null, c1);
 133       var mb4_04 = new qx.ui.menu.MenuButton("Framework Preferences", null, c1);
 134
 135       m4.add(mb4_01, mb4_b1, mb4_02, mb4_03, mb4_04);
 136
 137       var mb4_suba_01 = new qx.ui.menu.MenuButton("New Window", null, c1);
 138       var mb4_suba_b1 = new qx.ui.menu.MenuSeparator();
 139       var mb4_suba_02 = new qx.ui.menu.MenuRadioButton("Overlapping", c1, true);
 140       var mb4_suba_03 = new qx.ui.menu.MenuRadioButton("Split Horizontally", c1);
 141       var mb4_suba_04 = new qx.ui.menu.MenuRadioButton("Split Vertically", c1);
 142       var mb4_suba_b2 = new qx.ui.menu.MenuSeparator();
 143       var mb4_suba_05 = new qx.ui.menu.MenuButton("Next Window", null, c1);
 144       var mb4_suba_06 = new qx.ui.menu.MenuButton("Previous Window", null, c1);
 145
 146       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);
 147
 148       var mb4_manager = new qx.manager.selection.RadioManager("windowMode", [ mb4_suba_02, mb4_suba_03, mb4_suba_04 ]);
 149
 150
 151       var m5 = new qx.ui.menu.Menu;
 152
 153       var mb5_01 = new qx.ui.menu.MenuButton("Help", null, c1);
 154       var mb5_02 = new qx.ui.menu.MenuButton("About", null, c1);
 155
 156       m5.add(mb5_01, mb5_02);
 157
 158       d.add(m1, m2, m3, m3_suba, m3_subb, m3_subc, m3_subd, mb3_subd_02_suba, m4, m4_suba, m5);
 159
 160
 161       var mb1 = new qx.ui.toolbar.ToolBar;
 162
 163       mb1.setTop(48);
 164       mb1.setRight(335);
 165       mb1.setLeft(20);
 166
 167       var mp1 = new qx.ui.toolbar.ToolBarPart;
 168       var mp2 = new qx.ui.toolbar.ToolBarPart;
 169       var mp3 = new qx.ui.toolbar.ToolBarPart;
 170
 171       mb1.add(mp1, mp2, new qx.ui.basic.HorizontalSpacer, mp3);
 172
 173       var mbb1 = new qx.ui.toolbar.ToolBarMenuButton("File", m1, "icon/16/file-new.png");
 174       var mbb2 = new qx.ui.toolbar.ToolBarMenuButton("Edit", m2, "icon/16/edit.png");
 175       var mbb3 = new qx.ui.toolbar.ToolBarMenuButton("View", m3, "icon/16/appearance.png");
 176       var mbb4 = new qx.ui.toolbar.ToolBarMenuButton("Options", m4, "icon/16/control-center.png");
 177       var mbb5 = new qx.ui.toolbar.ToolBarMenuButton("Help", m5, "icon/16/help.png");
 178
 179       var tbb1 = new qx.ui.toolbar.ToolBarCheckBox("Checkbox", "icon/16/chart.png", true);
 180
 181       mp1.add(mbb1, mbb2);
 182       mp2.add(mbb3, mbb4, tbb1);
 183       mp3.add(mbb5);
 184
 185       d.add(mb1);
 186
 187
 188
 189
 190       // Icon & Color Themes
 191       qx.manager.object.ImageManager.getInstance().createThemeList(d, 20, 348);
 192       qx.manager.object.ColorManager.getInstance().createThemeList(d, 220, 348);
 193     });
 194   </script>
 195 </body>
 196 </html>