git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/test_Tree_Notification_API_Support.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dijit Tree Test</title>
   6
   7         <style type="text/css">
   8                 @import "../../dojo/resources/dojo.css";
   9                 @import "../../dojo/resources/dnd.css";
  10                 @import "../../dojo/tests/dnd/dndDefault.css";
  11                 @import "css/dijitTests.css";
  12
  13                 .clear {
  14                         clear: both;
  15                 }
  16
  17                 .box {
  18                         border: #ccc 3px solid;
  19                         padding: 1em;
  20                         -moz-border-radius: 8px 8px;
  21                         radius: 8px;
  22                 }
  23
  24                 label {
  25                         display: inline-block;
  26                         min-width: 8em;
  27                 }
  28         </style>
  29
  30         <script type="text/javascript" src="../../dojo/dojo.js"
  31                 djConfig="parseOnLoad: true, isDebug: true"></script>
  32         <script type="text/javascript" src="_testCommon.js"></script>
  33
  34         <script language="JavaScript" type="text/javascript">
  35                 dojo.require("dojo.dnd.Source");
  36                 dojo.require("dojo.data.ItemFileWriteStore");
  37                 dojo.require("dijit.Declaration");
  38                 dojo.require("dijit.Tree");
  39                 dojo.require("dijit.Menu");
  40                 dojo.require("dijit.form.Button");
  41                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  42
  43                 // Hash of id-->item for all the items (including children) in the data store.
  44                 var items = {};
  45
  46                 function deleteItem(){
  47                         store.deleteItem(selectedItem);
  48
  49                         resetForms();
  50                         loadItemsTable();
  51                 }
  52
  53                 function newItem(){
  54                         var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
  55                         console.debug(pInfo);
  56
  57                         store.newItem({
  58                                 id: dojo.byId('nId').value,
  59                                 name: dojo.byId("nLabel").value,
  60                                 someProperty: dojo.byId("nSomeProperty").value,
  61                                 children: dojo.query("> *", "nChildren").map( function(child){
  62                                                         var id = child.id;
  63                                                         return items[id];
  64                                                 })
  65                         },pInfo);
  66
  67                         resetForms();
  68                         loadItemsTable();
  69                 }
  70
  71                 function resetForms() {
  72                         selectedItem=null;
  73
  74                         // Update item form
  75                         dojo.byId("uLabel").value = "";
  76                         dojo.byId("uSomeProperty").value = "";
  77
  78                         dojo.byId("uChildren").innerHTML = "";
  79                         uChildrenDragSource.clearItems();
  80
  81                         dojo.byId("uPotentialChildren").innerHTML = "";
  82                         uPotentialChildrenDragSource.clearItems();
  83
  84                         // New item form
  85                         dojo.byId("nChildren").innerHTML = "";
  86                         nChildrenDragSource.clearItems();
  87
  88                         dojo.byId("nPotentialChildren").innerHTML = "";
  89                         nPotentialChildrenDragSource.clearItems();
  90                         for(var id in items){
  91                                 var item = items[id],
  92                                         label = store.getLabel(item);
  93                                 dojo.byId("nPotentialChildren").innerHTML +=
  94                                         "<div class='dojoDndItem' id='" + id + "'>" +
  95                                                 label +
  96                                         "</div>";
  97                                 nPotentialChildrenDragSource.setItem(id, {
  98                                         data: label,
  99                                         type: ["text"]
 100                                 });
 101                         }
 102                 }
 103
 104                 function updateItem(){
 105                         if (selectedItem!=null){
 106                                 if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){
 107                                         store.setValue(selectedItem, "name", dojo.byId("uLabel").value);
 108                                 }
 109
 110                                 if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
 111                                         store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
 112                                 }
 113
 114                                 var children = dojo.query("> *", "uChildren").map( function(child){
 115                                         var id = child.id;
 116                                         return items[id];
 117                                 });
 118                                 store.setValues(selectedItem, "children", children);
 119
 120                                 resetForms();
 121                                 loadItemsTable();
 122                         }else{
 123                                 console.error("Can't update the tree root");
 124                         }
 125                 }
 126
 127                 dojo.addOnLoad(function(){
 128                         resetForms();
 129                         loadItemsTable();
 130                 });
 131
 132                 function loadItemsTable(){
 133                         // summary: for each item in the datastore generate a row in the table
 134
 135                         function processItem(item){
 136                                 items[store.getIdentity(item)] = item;
 137
 138                                 var vals = {
 139                                         itemId: store.getIdentity(item),
 140                                         label: store.getLabel(item),
 141                                         someProperty: store.getValue(item, "someProperty"),
 142                                         children: store.getValues(item, "children")
 143                                 };
 144
 145                                 // add this item to children list in "new item" form
 146                                 dojo.byId("nPotentialChildren").innerHTML +=
 147                                         "<div class='dojoDndItem' id='" + vals.itemId + "'>" +
 148                                                 vals.label +
 149                                         "</div>";
 150                                 nPotentialChildrenDragSource.setItem(vals.itemId, {
 151                                         data: vals.label,
 152                                         type: ["text"]
 153                                 });
 154
 155                                 // update table listing items
 156                                 var row = new ItemRow(vals);
 157                                 dojo.byId("itemsTable").appendChild(row.domNode);
 158
 159                                 //dojo.forEach(vals.children, processItem);
 160                         }
 161
 162                         items = {};
 163                         dijit.registry.byClass("ItemRow").forEach(function(widget){ widget.destroy(); });
 164                         store.fetch({onItem: processItem});
 165                 }
 166
 167                 function onSelectItem(item){
 168                         resetForms();
 169
 170                         selectedItem = item;
 171
 172                         if(item){
 173                                 // Display basic attribute values
 174                                 dojo.byId('uLabel').value = item ? store.getLabel(item) : "";
 175                                 dojo.byId('uSomeProperty').value = item ? store.getValue(item,"someProperty") : "";
 176
 177                                 // Fill in info about children
 178                                 var children = store.getValues(item, "children");
 179                                 dojo.forEach(children, function(item){
 180                                         var id = store.getIdentity(item),
 181                                                 label = store.getLabel(item);
 182                                         dojo.byId("uChildren").innerHTML +=
 183                                                 "<div class='dojoDndItem' id='" + id + "'>" +
 184                                                         label +
 185                                                 "</div>";
 186                                         uChildrenDragSource.setItem(id, {
 187                                                 data: label,
 188                                                 type: ["text"]
 189                                         });
 190
 191                                         dojo.byId('nParent').value = item ? store.getLabel(item) : "";
 192                                 });
 193
 194                                 // and the items that could be children but aren't currently
 195                                 // (including items that would cause cycles, because i'm lazy)
 196                                 for(var id in items){
 197                                         var item = items[id];
 198                                         if(dojo.indexOf(children, item) == -1){
 199                                                 var label = store.getLabel(item);
 200                                                 dojo.byId("uPotentialChildren").innerHTML +=
 201                                                         "<div class='dojoDndItem' id='" + id + "'>" +
 202                                                                 label +
 203                                                         "</div>";
 204                                                 uPotentialChildrenDragSource.setItem(id, {
 205                                                         data: label,
 206                                                         type: ["text"]
 207                                                 });
 208                                         }
 209                                 }
 210                         }
 211                 }
 212         </script>
 213
 214 </head>
 215 <body>
 216
 217         <h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1>
 218
 219         <div dojoType="dojo.data.ItemFileWriteStore" jsId="store"
 220                 url="../tests/_data/treeTest.json"></div>
 221         <div dojoType="dijit.tree.TreeStoreModel" jsId="model"
 222                 store="store" query="{id:'root'}"></div>
 223         <div dojoType="dijit.Tree" id="myTree" model="model" onClick="onSelectItem"></div>
 224
 225         <br />
 226         <h2>Selected Item:</h2>
 227         <div class="box">
 228                 <label for="uLabel">Name:</label>                               <input id="uLabel" width="50" value="Enter Node Label" /><br />
 229                 <label for="uSomeProperty">Description:</label> <input id="uSomeProperty" width="50" value="Some Test Property" /><br /><br />
 230                 <div style="float:left; margin-right: 2em;">
 231                         <label for="uChildren">Children (in order):</label>
 232                         <div dojoType="dojo.dnd.Source" class="container" id="uChildren" jsId="uChildrenDragSource"></div>
 233                 </div>
 234                 <div style="float:left">
 235                         <label for="uPotentialChildren">Potential Children:</label>
 236                         <div dojoType="dojo.dnd.Source" class="container" id="uPotentialChildren" jsId="uPotentialChildrenDragSource"></div>
 237                 </div>
 238                 <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div>
 239         </div>
 240         <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="updateItem();">Update Item</div>
 241         <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem();">Delete Item</div>
 242
 243         <h2>New Item</h2>
 244         <p>Enter an Id, Name, and optionally a description to be added as a new item to the store.  Upon successful addition, the tree will recieve notification of this event and respond accordingly.  If you select a node the item will be added to that node, otherwise the item will be added to the tree root. "Id" is the identifer here and as such must be unique for all items in the store.</p>
 245         <div class="box">
 246                 <label for="nId">Id:</label>                                    <input id="nId" width="50" value="Enter Item Id" /><br />
 247                 <label for="nLabel">Name:</label>                               <input id="nLabel" width="50" value="Enter Item Name" /><br />
 248                 <label for="nSomeProperty">Description:</label> <input id="nSomeProperty" width="50" value="Enter Some Property Value" /><br /><br />
 249                 <label for="nParent">Parent:</label>                    <input id="nParent" readonly /><br /><br />
 250                 <div style="float:left; margin-right: 2em;">
 251                         Children (in order):
 252                         <div dojoType="dojo.dnd.Source" class="container" id="nChildren" jsId="nChildrenDragSource"></div>
 253                 </div>
 254                 <div style="float:left">
 255                         <label for="nPotentialChildren">Potential Children:</label>
 256                         <div dojoType="dojo.dnd.Source" class="container" id="nPotentialChildren" jsId="nPotentialChildrenDragSource"></div>
 257                 </div>
 258                 <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div>
 259         </div>
 260
 261         <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="newItem();">Add Item to Store</div>
 262         <br />
 263
 264         <h2>Data in flat form</h2>
 265         <!--
 266                 flat view of the items in the data store.
 267                 TODO: use the table widget from the mail demo, or dojox.Grid
 268         -->
 269         <div dojoType="dijit.Declaration" widgetClass="ItemRow" defaults="{ item: {}, itemId: 'thud', name: 10, someProperty: 'foo', children: {} }">
 270                 Id: ${itemId}, Name: ${name}
 271
 272                 Children:
 273                 <span class="dijitInline" dojoAttachPoint="childrenContainerNode"></span>
 274
 275                 <script type='dojo/connect' event='postCreate'>
 276                         dojo.forEach(this.children, function(childItem){
 277                                 this.childrenContainerNode.innerHTML += "<span class='itemReference'>" + store.getLabel(childItem) + "</span>";
 278                         }, this);
 279                 </script>
 280         </div>
 281         <div id="itemsTable"></div>
 282         </body>
 283 </html>
 284
 285
 286
 287