webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/Command_2.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>An example showing global shortcut commands in action. The commands are linked with menu-items, but
  16     could also be executed with the corresponding shortcut.</p>
  17     <p>An objectmanager is used to disable/enable a specific command (del-Key) to make available for text-editing
  18     in the textfield of the window. When the window is closed the command gets re-enabled.</p>
  19   </div>
  20
  21   <script type="text/javascript">
  22   qx.core.Init.getInstance().defineMain(function()
  23   {
  24     var d = qx.ui.core.ClientDocument.getInstance();
  25
  26     /* comamnds */
  27     var undo_cmd         = new qx.client.Command("Ctrl+Z");
  28     undo_cmd.addEventListener("execute", function(){ this.debug("undo Command executed"); }, this);
  29
  30     var redo_cmd         = new qx.client.Command("Ctrl+Y");
  31     redo_cmd.addEventListener("execute", function(){ this.debug("redo Command executed"); }, this);
  32
  33     var cut_cmd          = new qx.client.Command("Ctrl+X");
  34     cut_cmd.addEventListener("execute", function(){ this.debug("cut Command executed"); }, this);
  35
  36     var copy_cmd         = new qx.client.Command("Ctrl+C");
  37     copy_cmd.addEventListener("execute", function(){ this.debug("copy Command executed"); }, this);
  38
  39     var paste_cmd        = new qx.client.Command("Ctrl+V");
  40     paste_cmd.addEventListener("execute", function(){ this.debug("paste Command executed"); }, this);
  41
  42     var delete_cmd       = new qx.client.Command("Del");
  43     delete_cmd.addEventListener("execute", function(){ this.debug("delete Command executed"); }, this);
  44
  45     var select_all_cmd   = new qx.client.Command("Ctrl+A");
  46     select_all_cmd.addEventListener("execute", function(){ this.debug("select all Command executed"); }, this);
  47
  48     var search_cmd       = new qx.client.Command("Ctrl+F");
  49     search_cmd.addEventListener("execute", function(){ this.debug("search Command executed"); }, this);
  50
  51     var search_again_cmd = new qx.client.Command("F3");
  52     search_again_cmd.addEventListener("execute", function(){ this.debug("search again Command executed"); }, this);
  53
  54
  55     /* objectmanager for all commands which should be disabled when opening the window */
  56     var cmd_manager = new qx.manager.object.ObjectManager;
  57     cmd_manager.add(delete_cmd);
  58
  59
  60     /* building the menu */
  61     var m2 = new qx.ui.menu.Menu;
  62
  63     var mb2_01 = new qx.ui.menu.Button("New Window");
  64     var mb2_02 = new qx.ui.menu.Button("Overlapping");
  65     var mb2_03 = new qx.ui.menu.Button("Split Vertical");
  66     var mb2_04 = new qx.ui.menu.Button("Split Horizontal");
  67     var mb2_05 = new qx.ui.menu.Button("Next Window");
  68     var mb2_06 = new qx.ui.menu.Button("Previous Window");
  69
  70     m2.add(mb2_01, mb2_02, mb2_03, mb2_04, mb2_05, mb2_06);
  71
  72
  73     var m3 = new qx.ui.menu.Menu;
  74
  75     var mb3_01 = new qx.ui.menu.Button("Tahoma, 11pt");
  76     var mb3_02 = new qx.ui.menu.Button("Tahoma, 12pt");
  77     var mb3_03 = new qx.ui.menu.Button("Tahoma, 13pt");
  78     var mb3_04 = new qx.ui.menu.Button("Tahoma, 14pt");
  79     var mb3_05 = new qx.ui.menu.Button("Tahoma, 15pt");
  80
  81     m3.add(mb3_01, mb3_02, mb3_03, mb3_04, mb3_05);
  82
  83
  84     var m1 = new qx.ui.menu.Menu;
  85
  86     var mb1_01 = new qx.ui.menu.Button("View/Lists");
  87     var mb1_02 = new qx.ui.menu.Button("Syntax Highlighting");
  88     var ms1    = new qx.ui.menu.Separator();
  89     var mb1_03 = new qx.ui.menu.Button("Window Font");
  90     var mb1_04 = new qx.ui.menu.Button("Printer Font", null, null, m3);
  91     var ms2    = new qx.ui.menu.Separator();
  92     var mb1_05 = new qx.ui.menu.Button("Undo", null, undo_cmd);
  93     var mb1_06 = new qx.ui.menu.Button("Redo", null, redo_cmd);
  94     var ms3    = new qx.ui.menu.Separator();
  95     var mb1_07 = new qx.ui.menu.Button("Cut", "icon/16/edit-cut.png", cut_cmd);
  96     var mb1_08 = new qx.ui.menu.Button("Copy", "icon/16/edit-copy.png", copy_cmd);
  97     var mb1_09 = new qx.ui.menu.Button("Paste", "icon/16/edit-paste.png", paste_cmd);
  98     var mb1_10 = new qx.ui.menu.Button("Delete", "icon/16/edit-delete.png", delete_cmd);
  99     var mb1_11 = new qx.ui.menu.Button("Select All", null, select_all_cmd);
 100     var ms4    = new qx.ui.menu.Separator();
 101     var mb1_12 = new qx.ui.menu.Button("Search", null, search_cmd);
 102     var mb1_13 = new qx.ui.menu.Button("Search Again", null, search_again_cmd);
 103     var ms5    = new qx.ui.menu.Separator();
 104     var mb1_14 = new qx.ui.menu.Button("View", null, null, m2);
 105     var mb1_15 = new qx.ui.menu.Button("Editor Settings...");
 106     var mb1_16 = new qx.ui.menu.Button("Editor Plugins");
 107     var mb1_17 = new qx.ui.menu.Button("Framework Settings");
 108
 109     m1.add(mb1_01, mb1_02, ms1, mb1_03, mb1_04, ms2, mb1_05, mb1_06, ms3, mb1_07, mb1_08, mb1_09, mb1_10, mb1_11, ms4, mb1_12, mb1_13, ms5, mb1_14, mb1_15, mb1_16, mb1_17);
 110
 111
 112     d.add(m1, m2, m3);
 113
 114
 115     /* button to open menu */
 116     var w1 = new qx.ui.form.Button("Open");
 117
 118     w1.setTop(48);
 119     w1.setLeft(20);
 120
 121     w1.addEventListener("click", function(e)
 122     {
 123       if (m1.isSeeable())
 124       {
 125         m1.hide();
 126       }
 127       else
 128       {
 129         var el = this.getElement();
 130
 131         m1.setLeft(qx.dom.Location.getPageBoxLeft(el));
 132         m1.setTop(qx.dom.Location.getPageBoxBottom(el));
 133
 134         m1.show();
 135       };
 136
 137       e.setPropagationStopped(true);
 138     });
 139
 140     w1.addEventListener("mousedown", function(e)
 141     {
 142       e.setPropagationStopped(true);
 143     });
 144
 145
 146     /* window */
 147     var window1 = new qx.ui.window.Window("Test");
 148     window1.set({ top: 100, left: 100, width: 300, height: 200, allowMaximize: false, allowMinimize: false });
 149
 150     window1.addEventListener("beforeAppear", function(e){
 151       textField.setValue("");
 152     });
 153
 154     window1.addEventListener("beforeDisappear", function(e){
 155       cmd_manager.enableAll();
 156     });
 157
 158     /* label */
 159     var label1 = new qx.ui.basic.Label("Please enter your Name");
 160     label1.setTop(20);
 161     label1.setLeft(8);
 162
 163     /* textfield */
 164     var textField = new qx.ui.form.TextField;
 165     textField.setTop(20);
 166     textField.setLeft(140);
 167
 168     window1.add(label1, textField);
 169
 170
 171     /* button to open window */
 172     var w2 = new qx.ui.form.Button("Open Window");
 173     w2.setTop(48);
 174     w2.setLeft(100);
 175
 176     w2.addEventListener("execute", function(e){
 177       cmd_manager.disableAll();
 178       window1.open();
 179     });
 180
 181
 182     d.add(w1, window1, w2);
 183   });
 184   </script>
 185 </body>
 186 </html>