swat.obsolete/apps/qooxdoo-examples/example/TreeFullControl_3.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>Shows a tree, with user-defined icons for some nodes.  This tests
  16     listening for tree events.  A separate alert is generated upon opening a
  17     folder that has contents; when opening a folder that has no contents; and
  18     closing a folder.</p><p>We also demonstrate changing the default value of
  19     'allowShowPlusMinusSymbol' so that all folders initially have a plus/minus
  20     symbol.  Then, upon opening an empty folder, we remove that
  21     icon.</p><p>Lastly, we demonstrate in the alert presented by tree events,
  22     use of the getHierarchy() method to obtain a full "path" for a tree
  23     node.</p>
  24   </div>
  25
  26   <script type="text/javascript">
  27     qx.core.Init.getInstance().defineMain(function()
  28     {
  29       /*
  30        * Reset the default of always showing the plus/minus symbol.  The
  31        * default is 'false'.  We want to always display it for each folder
  32        * (and then stop displaying it if we determine upon open that there are
  33        * no contents).
  34        *
  35        * The changeProperty() function assumes that it is being called
  36        * shortly after defineClass() is called.  We therefore need to kludge
  37        * qx.Proto to point to the right place.
  38        *
  39        * TODO: There should be a mechanism to change a property attribute
  40        * without having to jump through these hoops.
  41        */
  42       var constructor = qx.OO.classes["qx.ui.treefullcontrol.TreeFolder"];
  43       qx.Proto = constructor.prototype;
  44       qx.OO.changeProperty({ name : "alwaysShowPlusMinusSymbol", type : qx.constant.Type.BOOLEAN, defaultValue : true });
  45
  46
  47       var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
  48       var t = new qx.ui.treefullcontrol.Tree(trs);
  49
  50       /*
  51        * All subtrees will use this root node's event listeners.  Create event
  52        * listeners for each of the possible events.
  53        */
  54       t.addEventListener(qx.constant.Event.TREEOPENWITHCONTENT, function(e) {
  55                            alert('treeOpenWithContent ' + e.getData().getHierarchy(new Array()).join("/"));
  56                          });
  57
  58       t.addEventListener(qx.constant.Event.TREECLOSE, function(e) {
  59                            alert('treeClose ' + e.getData().getHierarchy(new Array()).join("/"));
  60                          });
  61
  62       /*
  63        * We handle opening an empty folder specially.  We demonstrate how to
  64        * disable the plus/minus sign once we've determined there's nothing in
  65        * it.  This feature might be used to dynamically retrieve the contents
  66        * of the folder, and if nothing is available, indicate it by removing
  67        * the plus/minus sign.
  68        */
  69       t.addEventListener(qx.constant.Event.TREEOPENWHILEEMPTY, function(e) {
  70                            alert('treeOpenWhileEmpty ' + e.getData().getHierarchy(new Array()).join("/"));
  71                            e.getData().setAlwaysShowPlusMinusSymbol(false);
  72                          });
  73
  74       with(t)
  75       {
  76         setBackgroundColor(255);
  77         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  78         setOverflow("scrollY");
  79
  80         setHeight(null);
  81         setTop(48);
  82         setLeft(20);
  83         setWidth(200);
  84         setBottom(48);
  85       };
  86
  87       qx.ui.core.ClientDocument.getInstance().add(t);
  88       // One icon for selected and one for unselected states
  89       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
  90       var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  91       t.add(te1);
  92
  93       desktop = te1;
  94
  95       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
  96       var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  97       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
  98       var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  99       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
 100       var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 101       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
 102       var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 103
 104       te1.add(te1_1, te1_2, te1_3, te1_4);
 105
 106       // One icon specified, and used for both selected unselected states
 107       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
 108       var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
 109       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
 110       var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
 111
 112       te1_2.add(te1_2_1, te1_2_2);
 113
 114       arbeitsplatz = te1_2;
 115
 116
 117       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
 118       var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 119       posteingang = te2;
 120
 121       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
 122       var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 123       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
 124       var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 125       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
 126       var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 127       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
 128       var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 129       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
 130       var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
 131
 132       editieren = te2_5;
 133
 134       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
 135       var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 136       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
 137       var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 138       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
 139       var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 140
 141       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
 142       var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 143       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
 144       var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 145
 146       te2_5_3.add(te2_5_3_1, te2_5_3_2);
 147
 148       te2_5.add(te2_5_1, te2_5_2, te2_5_3);
 149
 150       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
 151       var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 152
 153       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
 154       var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 155       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
 156       var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 157       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
 158       var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 159       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
 160       var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 161       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
 162       var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
 163       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
 164       var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 165       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
 166       var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 167       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
 168       var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 169
 170       te2_6.add(te2_6_1, te2_6_2, te2_6_3, te2_6_4, te2_6_5, te2_6_6, te2_6_7, te2_6_8);
 171
 172       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
 173       var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 174
 175       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
 176       var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 177       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
 178       var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 179       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
 180       var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 181       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
 182       var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 183
 184       te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
 185
 186       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
 187       var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 188
 189       for (var i=0;i<50; i++) {
 190         trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
 191         te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
 192       };
 193
 194       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
 195       var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
 196       spam = te2_9;
 197
 198       te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
 199
 200       t.add(te2);
 201       qx.ui.core.ClientDocument.getInstance().add(t);
 202
 203
 204
 205
 206
 207
 208       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
 209
 210       with(commandFrame)
 211       {
 212         setTop(48);
 213         setLeft(250);
 214
 215         setWidth("auto");
 216         setHeight("auto");
 217       };
 218
 219       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
 220
 221
 222
 223
 224       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
 225
 226       with(tCurrentLabel)
 227       {
 228         setLeft(0);
 229         setTop(0);
 230       };
 231
 232       commandFrame.add(tCurrentLabel);
 233
 234
 235
 236       var tCurrentInput = new qx.ui.form.TextField;
 237
 238       with(tCurrentInput)
 239       {
 240         setLeft(0);
 241         setRight(0);
 242         setTop(20);
 243
 244         setReadOnly(true);
 245       };
 246
 247       commandFrame.add(tCurrentInput);
 248
 249       t.getManager().addEventListener("changeSelection", function(e) {
 250         tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 251       });
 252
 253
 254
 255       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 256
 257       with(tDoubleClick) {
 258         setTop(60);
 259         setLeft(0);
 260       };
 261
 262       commandFrame.add(tDoubleClick);
 263
 264       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 265
 266
 267
 268
 269       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 270
 271       with(tTreeLines) {
 272         setTop(80);
 273         setLeft(0);
 274         setChecked(true);
 275       };
 276
 277       commandFrame.add(tTreeLines);
 278
 279       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 280
 281
 282       var tHideNode = new qx.ui.form.CheckBox("Hide the root node?");
 283
 284       with(tHideNode) {
 285         setTop(100);
 286         setLeft(0);
 287         setChecked(false);
 288       };
 289
 290       commandFrame.add(tHideNode);
 291
 292       tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); });
 293
 294
 295     });
 296   </script>
 297 </body>
 298 </html>