swat.obsolete/apps/qooxdoo-examples/example/TreeFullControl_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>Shows a tree and allows playing with the settings of the Tree
  16     properties <i>hideNode</i> and <i>rootOpenClose</i>.  Also demonstrates
  17     manipulating display (or not) of tree lines at specific indentation
  18     levels, using the <i>excludeSpecificTreeLines</i> property.</p>
  19
  20   </div>
  21
  22   <script type="text/javascript">
  23     qx.core.Init.getInstance().defineMain(function()
  24     {
  25       var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
  26       var t = new qx.ui.treefullcontrol.Tree(trs);
  27
  28       with(t)
  29       {
  30         setBackgroundColor(255);
  31         setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
  32         setOverflow("scrollY");
  33
  34         setHeight(null);
  35         setTop(48);
  36         setLeft(20);
  37         setWidth(200);
  38         setBottom(48);
  39       };
  40
  41       qx.ui.core.ClientDocument.getInstance().add(t);
  42       // One icon for selected and one for unselected states
  43       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Desktop", "icon/16/desktop.png", "icon/16/dictionary.png");
  44       var te1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  45       t.add(te1);
  46
  47       desktop = te1;
  48
  49       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Files");
  50       var te1_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  51       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Workspace");
  52       var te1_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  53       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Network");
  54       var te1_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  55       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash");
  56       var te1_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
  57
  58       te1.add(te1_1, te1_2, te1_3, te1_4);
  59
  60       // One icon specified, and used for both selected unselected states
  61       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Windows (C:)", "icon/16/harddrive.png");
  62       var te1_2_1 = new qx.ui.treefullcontrol.TreeFile(trs);
  63       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Documents (D:)", "icon/16/harddrive.png");
  64       var te1_2_2 = new qx.ui.treefullcontrol.TreeFile(trs);
  65
  66       te1_2.add(te1_2_1, te1_2_2);
  67
  68       arbeitsplatz = te1_2;
  69
  70
  71       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Inbox");
  72       var te2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  73       posteingang = te2;
  74
  75       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Presets");
  76       var te2_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  77       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sent");
  78       var te2_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  79       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Trash", "icon/16/trash.png");
  80       var te2_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  81       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Data");
  82       var te2_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
  83       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Edit");
  84       var te2_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
  85
  86       editieren = te2_5;
  87
  88       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Chat");
  89       var te2_5_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  90       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Pustefix");
  91       var te2_5_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  92       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("TINC");
  93       var te2_5_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
  94
  95       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Announce");
  96       var te2_5_3_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
  97       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Devel");
  98       var te2_5_3_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
  99
 100       te2_5_3.add(te2_5_3_1, te2_5_3_2);
 101
 102       te2_5.add(te2_5_1, te2_5_2, te2_5_3);
 103
 104       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Lists");
 105       var te2_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 106
 107       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Relations");
 108       var te2_6_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 109       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Company");
 110       var te2_6_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 111       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Questions");
 112       var te2_6_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 113       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Internal");
 114       var te2_6_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 115       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Products");
 116       var te2_6_5 = new qx.ui.treefullcontrol.TreeFolder(trs);
 117       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Press");
 118       var te2_6_6 = new qx.ui.treefullcontrol.TreeFolder(trs);
 119       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Development");
 120       var te2_6_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 121       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Competition");
 122       var te2_6_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 123
 124       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);
 125
 126       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Personal");
 127       var te2_7 = new qx.ui.treefullcontrol.TreeFolder(trs);
 128
 129       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Bugs");
 130       var te2_7_1 = new qx.ui.treefullcontrol.TreeFolder(trs);
 131       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Family");
 132       var te2_7_2 = new qx.ui.treefullcontrol.TreeFolder(trs);
 133       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Projects");
 134       var te2_7_3 = new qx.ui.treefullcontrol.TreeFolder(trs);
 135       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Holiday");
 136       var te2_7_4 = new qx.ui.treefullcontrol.TreeFolder(trs);
 137
 138       te2_7.add(te2_7_1, te2_7_2, te2_7_3, te2_7_4);
 139
 140       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Big");
 141       var te2_8 = new qx.ui.treefullcontrol.TreeFolder(trs);
 142
 143       for (var i=0;i<50; i++) {
 144         trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Item " + i);
 145         te2_8.add(new qx.ui.treefullcontrol.TreeFolder(trs));
 146       };
 147
 148       trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Spam");
 149       var te2_9 = new qx.ui.treefullcontrol.TreeFolder(trs);
 150       spam = te2_9;
 151
 152       te2.add(te2_1, te2_2, te2_3, te2_4, te2_5, te2_6, te2_7, te2_8, te2_9);
 153
 154       t.add(te2);
 155       qx.ui.core.ClientDocument.getInstance().add(t);
 156
 157
 158
 159
 160
 161
 162       var commandFrame = new qx.ui.groupbox.GroupBox("Control");
 163
 164       with(commandFrame)
 165       {
 166         setTop(48);
 167         setLeft(250);
 168
 169         setWidth("auto");
 170         setHeight("auto");
 171       };
 172
 173       qx.ui.core.ClientDocument.getInstance().add(commandFrame);
 174
 175
 176
 177
 178       var tCurrentLabel = new qx.ui.basic.Atom("Current Folder: ");
 179
 180       with(tCurrentLabel)
 181       {
 182         setLeft(0);
 183         setTop(0);
 184       };
 185
 186       commandFrame.add(tCurrentLabel);
 187
 188
 189
 190       var tCurrentInput = new qx.ui.form.TextField;
 191
 192       with(tCurrentInput)
 193       {
 194         setLeft(0);
 195         setRight(0);
 196         setTop(20);
 197
 198         setReadOnly(true);
 199       };
 200
 201       commandFrame.add(tCurrentInput);
 202
 203       t.getManager().addEventListener("changeSelection", function(e) {
 204         tCurrentInput.setValue(e.getData()[0]._labelObject.getHtml());
 205       });
 206
 207
 208
 209       var tDoubleClick = new qx.ui.form.CheckBox("Use double click?");
 210
 211       with(tDoubleClick) {
 212         setTop(60);
 213         setLeft(0);
 214       };
 215
 216       commandFrame.add(tDoubleClick);
 217
 218       tDoubleClick.addEventListener("changeChecked", function(e) { t.setUseDoubleClick(e.getData()); });
 219
 220
 221
 222
 223       var tTreeLines = new qx.ui.form.CheckBox("Use tree lines?");
 224
 225       with(tTreeLines) {
 226         setTop(80);
 227         setLeft(0);
 228         setChecked(true);
 229       };
 230
 231       commandFrame.add(tTreeLines);
 232
 233       tTreeLines.addEventListener("changeChecked", function(e) { t.setUseTreeLines(e.getData()); });
 234
 235
 236       var tHideNode = new qx.ui.form.CheckBox("Hide the root node?");
 237
 238       with(tHideNode) {
 239         setTop(100);
 240         setLeft(0);
 241         setChecked(false);
 242       };
 243
 244       commandFrame.add(tHideNode);
 245
 246       tHideNode.addEventListener("changeChecked", function(e) { t.setHideNode(e.getData()); });
 247
 248       var tIncludeRootOpenClose =
 249         new qx.ui.form.CheckBox("Include root open/close button?");
 250
 251       with(tIncludeRootOpenClose) {
 252         setTop(120);
 253         setLeft(0);
 254         setChecked(true);
 255       };
 256
 257       commandFrame.add(tIncludeRootOpenClose);
 258
 259       tIncludeRootOpenClose.addEventListener("changeChecked", function(e) { t.setRootOpenClose(e.getData()); });
 260
 261       tExcludeTreeLines0 =
 262         new qx.ui.form.CheckBox("Exclude tree lines at level 0?");
 263
 264       with(tExcludeTreeLines0) {
 265         setTop(140);
 266         setLeft(0);
 267         setChecked(false);
 268       };
 269
 270       commandFrame.add(tExcludeTreeLines0);
 271
 272       tExcludeTreeLines0.addEventListener(
 273           "changeChecked",
 274           function(e)
 275           {
 276               var excl = t.getExcludeSpecificTreeLines();
 277               if (e.getData()) {
 278                   excl[0] = true;
 279               } else {
 280                   delete(excl[0]);
 281               }
 282               t.setExcludeSpecificTreeLines(excl);
 283           });
 284
 285       tExcludeTreeLines1 =
 286         new qx.ui.form.CheckBox("Exclude tree lines at level 1?");
 287
 288       with(tExcludeTreeLines1) {
 289         setTop(160);
 290         setLeft(0);
 291         setChecked(false);
 292       };
 293
 294       commandFrame.add(tExcludeTreeLines1);
 295
 296       tExcludeTreeLines1.addEventListener(
 297           "changeChecked",
 298           function(e)
 299           {
 300               var excl = t.getExcludeSpecificTreeLines();
 301               if (e.getData()) {
 302                   excl[1] = true;
 303               } else {
 304                   delete(excl[1]);
 305               }
 306               t.setExcludeSpecificTreeLines(excl);
 307           });
 308
 309       tExcludeTreeLines2 =
 310         new qx.ui.form.CheckBox("Exclude tree lines at level 2?");
 311
 312       with(tExcludeTreeLines2) {
 313         setTop(180);
 314         setLeft(0);
 315         setChecked(false);
 316       };
 317
 318       commandFrame.add(tExcludeTreeLines2);
 319
 320       tExcludeTreeLines2.addEventListener(
 321           "changeChecked",
 322           function(e)
 323           {
 324               var excl = t.getExcludeSpecificTreeLines();
 325               if (e.getData()) {
 326                   excl[2] = true;
 327               } else {
 328                   delete(excl[2]);
 329               }
 330               t.setExcludeSpecificTreeLines(excl);
 331           });
 332
 333       tExcludeTreeLines3 =
 334         new qx.ui.form.CheckBox("Exclude tree lines at level 3?");
 335
 336       with(tExcludeTreeLines3) {
 337         setTop(200);
 338         setLeft(0);
 339         setChecked(false);
 340       };
 341
 342       commandFrame.add(tExcludeTreeLines3);
 343
 344       tExcludeTreeLines3.addEventListener(
 345           "changeChecked",
 346           function(e)
 347           {
 348               var excl = t.getExcludeSpecificTreeLines();
 349               if (e.getData()) {
 350                   excl[3] = true;
 351               } else {
 352                   delete(excl[3]);
 353               }
 354               t.setExcludeSpecificTreeLines(excl);
 355           });
 356
 357       tExcludeTreeLines4 =
 358         new qx.ui.form.CheckBox("Exclude tree lines at level 4?");
 359
 360       with(tExcludeTreeLines4) {
 361         setTop(220);
 362         setLeft(0);
 363         setChecked(false);
 364       };
 365
 366       commandFrame.add(tExcludeTreeLines4);
 367
 368       tExcludeTreeLines4.addEventListener(
 369           "changeChecked",
 370           function(e)
 371           {
 372               var excl = t.getExcludeSpecificTreeLines();
 373               if (e.getData()) {
 374                   excl[4] = true;
 375               } else {
 376                   delete(excl[4]);
 377               }
 378               t.setExcludeSpecificTreeLines(excl);
 379           });
 380
 381     });
 382   </script>
 383 </body>
 384 </html>