swat/apps/qooxdoo-examples/example/RpcTreeFullControl_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
   8    type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   9   <![endif]-->
  10   <script type="text/javascript" src="../../script/qx.js"></script>
  11 </head>
  12 <body>
  13   <script type="text/javascript" src="../../script/layout.js"></script>
  14
  15
  16   <div id="demoDescription">
  17     <p>
  18     Shows a tree which listens for tree events.  This script communicates via
  19     JSON-RPC to a backend server.  Each time a new tree node is opened, the
  20     children are requested from the server.  See the server-side functions
  21     at backend/php/services/qooxdoo/fs.php.
  22   </div>
  23
  24 <script type="text/javascript">
  25 qx.core.Init.getInstance().defineMain(
  26     function()
  27     {
  28         var addChildren = function(parent, children)
  29         {
  30             var t;
  31             var trs;
  32             var child;
  33
  34             for (i = 0; i < children.length; i++)
  35             {
  36                 child = children[i];
  37
  38                 trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().newRow();
  39
  40                 // Here's our indentation and tree-lines
  41                 trs.addIndent();
  42
  43                 // If not a file or directory, change the icon
  44                 var bIsDirectory = ((child.mode & 0040000) != 0);
  45                 var bIsFile = ((child.mode & 0100000) != 0);
  46                 if (! bIsDirectory && ! bIsFile)
  47                 {
  48                     trs.addIcon("icon/16/desktop.png",
  49                                 "icon/16/dictionary.png");
  50                 }
  51                 else
  52                 {
  53                     trs.addIcon();
  54                 }
  55
  56                 // The label
  57                 trs.addLabel(child.name);
  58
  59                 // All else should be right justified
  60                 obj = new qx.ui.basic.HorizontalSpacer;
  61                 trs.addObject(obj, true);
  62
  63                 // Add the permissions
  64                 mode = "";
  65                 mode = ((child.mode & 0001) ? "x" : "-") + mode;
  66                 mode = ((child.mode & 0002) ? "w" : "-") + mode;
  67                 mode = ((child.mode & 0004) ? "r" : "-") + mode;
  68                 mode = ((child.mode & 0010) ? "x" : "-") + mode;
  69                 mode = ((child.mode & 0020) ? "w" : "-") + mode;
  70                 mode = ((child.mode & 0040) ? "r" : "-") + mode;
  71                 mode = ((child.mode & 0100) ? "x" : "-") + mode;
  72                 mode = ((child.mode & 0200) ? "w" : "-") + mode;
  73                 mode = ((child.mode & 0400) ? "r" : "-") + mode;
  74                 obj = new qx.ui.basic.Label(mode);
  75                 obj.setWidth(80);
  76                 obj.setStyleProperty("fontFamily", "monospace");
  77                 trs.addObject(obj, true);
  78
  79                 // Add a file size, date and mode
  80                 obj = new qx.ui.basic.Label(child.size + "");
  81                 obj.setWidth(50);
  82                 obj.setStyleProperty("fontFamily", "monospace");
  83                 trs.addObject(obj, true);
  84
  85                 var d = new Date();
  86                 d.setTime(child.mtime * 1000);
  87                 obj = new qx.ui.basic.Label(d.toString().slice(0,33));
  88                 obj.setWidth(200);
  89                 obj.setStyleProperty("fontFamily", "monospace");
  90                 trs.addObject(obj, true);
  91
  92                 if (bIsDirectory)
  93                 {
  94                     t = new qx.ui.treefullcontrol.TreeFolder(trs);
  95                 }
  96                 else
  97                 {
  98                     t = new qx.ui.treefullcontrol.TreeFile(trs);
  99                 }
 100                 parent.add(t);
 101             }
 102         }
 103
 104         /*
 105          * Reset the default of always showing the plus/minus symbol.  The
 106          * default is 'false'.  We want to always display it for each folder
 107          * (and then stop displaying it if we determine upon open that there
 108          * are no contents).
 109          */
 110         var constructor = qx.OO.classes["qx.ui.treefullcontrol.TreeFolder"];
 111         qx.Proto = constructor.prototype;
 112         qx.OO.changeProperty({
 113               name : "alwaysShowPlusMinusSymbol",
 114               type : qx.constant.Type.BOOLEAN,
 115               defaultValue : true });
 116
 117         var rpc = new qx.io.remote.Rpc();
 118         rpc.setTimeout(10000);
 119         rpc.setUrl("/services/");
 120         rpc.setServiceName("qooxdoo.fs");
 121         rpc.setCrossDomain(false);
 122
 123         var mycall = null;
 124
 125         var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Root");
 126         var t = new qx.ui.treefullcontrol.Tree(trs);
 127
 128         with(t)
 129         {
 130             setBackgroundColor(255);
 131             setBorder(qx.renderer.border.BorderPresets.getInstance().inset);
 132             setOverflow("scrollY");
 133
 134             setHeight(null);
 135             setTop(48);
 136             setLeft(20);
 137             setWidth(700);
 138             setBottom(48);
 139
 140             setHideNode(true);          // hide the root node
 141             setUseTreeLines(true);      // display tree lines
 142         };
 143
 144         /*
 145          * All subtrees will use this root node's event listeners.  Create an
 146          * event listener for an open while empty.
 147          */
 148         t.addEventListener(
 149             qx.constant.Event.TREEOPENWHILEEMPTY,
 150             function(e)
 151             {
 152                 var parent = e.getData();
 153                 var hierarchy = parent.getHierarchy(new Array());
 154
 155                 parent.debug("Requesting children...");
 156
 157                 // Strip off the root node
 158                 hierarchy.shift();
 159
 160                 mycall = rpc.callAsync(
 161                     function(result, ex, id)
 162                     {
 163                         mycall = null;
 164                         if (ex == null) {
 165                             parent.debug("Children obtained.  Rendering...");
 166                             addChildren(parent, result);
 167                             parent.debug("Rendering complete.");
 168                         } else {
 169                             alert("Async(" + id + ") exception: " + ex);
 170                         }
 171                     },
 172                     "readDirEntries",
 173                     hierarchy,
 174                     true);
 175             });
 176
 177         qx.ui.core.ClientDocument.getInstance().add(t);
 178
 179         var trs = qx.ui.treefullcontrol.TreeRowStructure.getInstance().standard("Sandbox");
 180         var tf = new qx.ui.treefullcontrol.TreeFolder(trs);
 181         t.add(tf);
 182     });
 183 /*
 184  * Local Variables:
 185  * mode: java
 186  * End:
 187  */
 188 </script>
 189
 190 </body>
 191 </html>
 192