1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Dijit Tree Test</title>
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";
18 border: #ccc 3px solid;
20 -moz-border-radius: 8px 8px;
25 display: inline-block;
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>
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
43 // Hash of id-->item for all the items (including children) in the data store.
46 function deleteItem(){
47 store.deleteItem(selectedItem);
54 var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
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){
71 function resetForms() {
75 dojo.byId("uLabel").value = "";
76 dojo.byId("uSomeProperty").value = "";
78 dojo.byId("uChildren").innerHTML = "";
79 uChildrenDragSource.clearItems();
81 dojo.byId("uPotentialChildren").innerHTML = "";
82 uPotentialChildrenDragSource.clearItems();
85 dojo.byId("nChildren").innerHTML = "";
86 nChildrenDragSource.clearItems();
88 dojo.byId("nPotentialChildren").innerHTML = "";
89 nPotentialChildrenDragSource.clearItems();
92 label = store.getLabel(item);
93 dojo.byId("nPotentialChildren").innerHTML +=
94 "<div class='dojoDndItem' id='" + id + "'>" +
97 nPotentialChildrenDragSource.setItem(id, {
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);
110 if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
111 store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
114 var children = dojo.query("> *", "uChildren").map( function(child){
118 store.setValues(selectedItem, "children", children);
123 console.error("Can't update the tree root");
127 dojo.addOnLoad(function(){
132 function loadItemsTable(){
133 // summary: for each item in the datastore generate a row in the table
135 function processItem(item){
136 items[store.getIdentity(item)] = item;
139 itemId: store.getIdentity(item),
140 label: store.getLabel(item),
141 someProperty: store.getValue(item, "someProperty"),
142 children: store.getValues(item, "children")
145 // add this item to children list in "new item" form
146 dojo.byId("nPotentialChildren").innerHTML +=
147 "<div class='dojoDndItem' id='" + vals.itemId + "'>" +
150 nPotentialChildrenDragSource.setItem(vals.itemId, {
155 // update table listing items
156 var row = new ItemRow(vals);
157 dojo.byId("itemsTable").appendChild(row.domNode);
159 //dojo.forEach(vals.children, processItem);
163 dijit.registry.byClass("ItemRow").forEach(function(widget){ widget.destroy(); });
164 store.fetch({onItem: processItem});
167 function onSelectItem(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") : "";
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 + "'>" +
186 uChildrenDragSource.setItem(id, {
191 dojo.byId('nParent').value = item ? store.getLabel(item) : "";
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 + "'>" +
204 uPotentialChildrenDragSource.setItem(id, {
217 <h1 class="testTitle">Dijit Tree Test - dojo.data.Notification API support</h1>
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>
226 <h2>Selected Item:</h2>
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>
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>
238 <div class="clear">(drag and drop items to adjust list of children, and order of those children)</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>
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>
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;">
252 <div dojoType="dojo.dnd.Source" class="container" id="nChildren" jsId="nChildrenDragSource"></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>
258 <div class="clear">(drag and drop items to adjust list of children, and order of those children)</div>
261 <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="newItem();">Add Item to Store</div>
264 <h2>Data in flat form</h2>
266 flat view of the items in the data store.
267 TODO: use the table widget from the mail demo, or dojox.Grid
269 <div dojoType="dijit.Declaration" widgetClass="ItemRow" defaults="{ item: {}, itemId: 'thud', name: 10, someProperty: 'foo', children: {} }">
270 Id: ${itemId}, Name: ${name}
273 <span class="dijitInline" dojoAttachPoint="childrenContainerNode"></span>
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>";
281 <div id="itemsTable"></div>