Changeset 10580

Timestamp:

09/20/07 22:56:56 (14 months ago)

Author:

bill

Message:

Refactor tree to have a special node (without a corresponding item) at the top of
the tree, so that (for example) the continents/countries tree in test_Tree.html can
have a top node marked "Continents" even though there is no such item in the
data store.

This change requires handlers like onClick() to not fail when item==null, but
rather to assume that's the root node.

Fixes #4527, #4419, #4457.

Files:

• dijit/trunk/demos/i18n.html (modified) (2 diffs)
• dijit/trunk/demos/mail.html (modified) (2 diffs)
• dijit/trunk/demos/mail/mail.json (modified) (1 diff)
• dijit/trunk/tests/test_Tree.html (modified) (2 diffs)
• dijit/trunk/tests/test_Tree_Notification_API_Support.html (modified) (6 diffs)
• dijit/trunk/tests/tree/test_Tree_DnD.html (modified) (8 diffs)
• dijit/trunk/themes/themeTester.html (modified) (1 diff)
• dijit/trunk/themes/tundra/tundra.css (modified) (1 diff)
• dijit/trunk/Tree.js (modified) (10 diffs)
• dijit/trunk/_tree/Tree.html (modified) (1 diff)
• dojox/trunk/data/demos/demo_LazyLoad.html (modified) (1 diff)
• dojox/trunk/data/demos/demo_MultiStores.html (modified) (3 diffs)
• dojox/trunk/data/tests/ml/test_HtmlTableStore_declaratively.html (modified) (1 diff)

dijit/trunk/demos/i18n.html

@@ -68 +68 @@
                 <tr>
                         <td width="30%" style="vertical-align: top;">
-                                <div dojoType="dijit.Tree" id="mytree" store="store">
+                                <div dojoType="dijit.Tree" id="mytree" store="store" label="Continents">
                                         <!-- Override all the data access functions to work from the I18N data store -->
                                         <script type="dojo/method" event="getItemChildren" args="item, onComplete">
@@ -91 +91 @@
                                         <script type="dojo/method" event="getIconClass" args="item">
                                                 var icon =
-                                                        (store.getValue(item, "type") == "country") ?
+                                                        (item && store.getValue(item, "type") == "country") ?
                                                         ("countryIcon country" + store.getValue(item, "iso") + "Icon") :
                                                         null;

dijit/trunk/demos/mail.html

@@ -310 +310 @@
                                         <div dojoType="dijit.layout.AccordionPane" title="Folders">
                                                 <div dojoType="dijit.Tree" id="mytree" store="mailStore"
-                                                        labelAttr="label" childrenAttr="folders" query="{type:'folder'}">
+                                                        labelAttr="label" childrenAttr="folders" query="{type:'folder'}" label="Folders">
                                                         <script type="dojo/method" event="onClick" args="item">
+                                                                if(!item){
+                                                                        return; // top level node in tree doesn't correspond to any item
+                                                                }
                                                                 /* filter the message list to messages in this folder */
                                                                 table.query.query = {
@@ -320 +323 @@
                                                         </script>
                                                         <script type="dojo/method" event="getIconClass" args="item">
-                                                                var specifiedIcon = mailStore.getValue(item, "icon");
-                                                                return specifiedIcon || "mailIconFolderDocuments";
+                                                                return (item && mailStore.getValue(item, "icon")) || "mailIconFolderDocuments";
                                                         </script>
                                                 </div>
                                         </div>
                                         <div dojoType="dijit.layout.AccordionPane" title="Address Book">
-
-                                                <!--
-                                                        TODO: want to use a table here but somehow can't have two table instances on the same page.
-                                                        Debug later
-                                                        <span dojoType="demo.Table" store="mailStore"
-                                                                query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ]  }"
-                                                                id="addresses" style="width: 100%">
-                                                                <script type="dojo/method" event="preamble">
-                                                                        this.query = { type: "address" };
-                                                                        this.columns = [
-                                                                                {
-                                                                                        name: "Name",
-                                                                                        attribute: "label"
-                                                                                }
-                                                                        ];
-                                                                </script>
-                                                                <script type="dojo/method" event="onClick" args="item">
-                                                                        table.query.query.sender = mailStore.getValue(item, "sender");
-                                                                        delete table.query.query.folder;
-                                                                        table.runQuery();
-                                                                </script>
-                                                        </span>
-                                                -->
-                                                <div dojoType="dijit.Tree" id="addrTree" store="mailStore"
-                                                        labelAttr="label" childrenAttr="folders" query="{type:'address'}">
+                                                <span dojoType="demo.Table" store="mailStore"
+                                                        query="{ query: { type: 'address' }, columns: [ {name: 'User name', attribute: 'label'} ], sort: [ { attribute: 'label' } ]  }"
+                                                        id="addresses" style="width: 100%">
+                                                        <script type="dojo/method" event="preamble">
+                                                                this.query = { type: "address" };
+                                                                this.columns = [
+                                                                        {
+                                                                                name: "Name",
+                                                                                attribute: "label"
+                                                                        }
+                                                                ];
+                                                        </script>
                                                         <script type="dojo/method" event="onClick" args="item">
-                                                                /* filter the message list to messages from this user */
-                                                                table.query.query = {
-                                                                        type: "message",
-                                                                        sender: mailStore.getValue(item, "label")
-                                                                };
+                                                                table.query.query.sender = mailStore.getValue(item, "sender");
+                                                                delete table.query.query.folder;
                                                                 table.runQuery();
                                                         </script>
-                                                        <script type="dojo/method" event="getIconClass" args="item">
-                                                                var specifiedIcon = mailStore.getValue(item, "icon");
-                                                                return specifiedIcon || "mailIconFolderDocuments";
-                                                        </script>
-                                                </div>
+                                                </span>
                                         </div>
                                 </div>  <!-- end of Accordion -->

dijit/trunk/demos/mail/mail.json

@@ -5 +5 @@
 
                 // Hierarchy of folders
-                { type: 'folder', id: 'mailbox', label:'Folders', folders: [
-                        { type: 'folder', id: 'inbox', label:'Inbox', icon:'mailIconFolderInbox' },
-                        { type: 'folder', id: 'deleted', label:'Trash', icon:'mailIconTrashcanFull' },
-                        { type: 'folder', id: 'save', label:'Save',  folders:[
-                                { id: 'work', label:'stuff for work'},
-                                { id: 'fun', label:'stuff for fun'}
-                        ]}
+                { type: 'folder', id: 'inbox', label:'Inbox', icon:'mailIconFolderInbox' },
+                { type: 'folder', id: 'deleted', label:'Trash', icon:'mailIconTrashcanFull' },
+                { type: 'folder', id: 'save', label:'Save',  folders:[
+                        { id: 'work', label:'stuff for work'},
+                        { id: 'fun', label:'stuff for fun'}
                 ]},
 

dijit/trunk/tests/test_Tree.html

@@ -32 +32 @@
 
         <div dojoType="dijit.Tree" id="mytree" store="continentStore" query="{type:'continent'}"
-                labelAttr="name">
+                labelAttr="name" label="Continents">
                 <script type="dojo/method" event="onClick" args="item">
                         alert("Execute of node " + continentStore.getLabel(item)
@@ -80 +80 @@
 
         <div dojoType="dijit.Tree" id="tree2" store="continentStore" query="{type:'continent'}"
-                labelAttr="name">
+                labelAttr="name" label="Continents">
                 <script type="dojo/connect">
                         var menu = dijit.byId("tree_menu");

dijit/trunk/tests/test_Tree_Notification_API_Support.html

@@ -22 +22 @@
                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
 
-                function deleteNode(){
+                function deleteItem(){
                         var store = dijit.byId("myTree").store;
-                        store.deleteItem(selectedNode);
+                        store.deleteItem(selectedItem);
                         resetForms();
                 }
 
-                function addNodeToStore(){
+                function addItem(){
                         var store = dijit.byId("myTree").store;
-                        if(selectedNode!=null){
-                                var pInfo = {parent: selectedNode, attribute:"children"};
-                                store.newItem({id: dojo.byId('newId').value,name:dojo.byId("label").value,someProperty:dojo.byId("someProperty")},pInfo);
-                        }else{
-                                store.newItem({id: dojo.byId('newId').value,name:dojo.byId("label").value,someProperty:dojo.byId("someProperty")});
-                        }
+                        var pInfo = selectedItem ? {parent: selectedItem, attribute:"children"} : null;
+                        console.debug(pInfo);
+                        store.newItem({id: dojo.byId('newId').value,name:dojo.byId("label").value,someProperty:dojo.byId("someProperty")},pInfo);
                         resetForms();
                 }
@@ -41 +38 @@
                 function resetForms() {
                         dojo.byId('selected').innerHTML="Tree Root"
-                        selectedNode=null;
+                        selectedItem=null;
                         dojo.byId("uLabel").value = "";
                         dojo.byId("uSomeProperty").value = "";
@@ -50 +47 @@
                         var store = dijit.byId("myTree").store;
 
-                        if (selectedNode!=null){
-                                if (dojo.byId("uLabel").value != store.getValue(selectedNode, "name")){
-                                        store.setValue(selectedNode, "name", dojo.byId("uLabel").value);
+                        if (selectedItem!=null){
+                                if (dojo.byId("uLabel").value != store.getValue(selectedItem, "name")){
+                                        store.setValue(selectedItem, "name", dojo.byId("uLabel").value);
                                 }
 
-                                if (dojo.byId("uSomeProperty").value != store.getValue(selectedNode, "someProperty")){
-                                        store.setValue(selectedNode, "someProperty", dojo.byId("uSomeProperty").value);
+                                if (dojo.byId("uSomeProperty").value != store.getValue(selectedItem, "someProperty")){
+                                        store.setValue(selectedItem, "someProperty", dojo.byId("uSomeProperty").value);
                                 }
 
                         }else{
-                                console.error("Cant update the tree root");
+                                console.error("Can't update the tree root");
                         }
                 }
@@ -66 +63 @@
                 dojo.addOnLoad(function(){
                         resetForms();
-                        dojo.subscribe("myTree", null, function(message){
-                                if(message.event=="execute"){
-                                        selectedNode = message.item;
-                                        dojo.byId('selected').innerHTML=treeTestStore.getLabel(message.item);
-                                        dojo.byId('uLabel').value = treeTestStore.getLabel(message.item);
-                                        dojo.byId('uSomeProperty').value = treeTestStore.getValue(message.item,"someProperty");
-                                }
-                        });
                 });
 
+                function onClick(item){
+                        selectedItem = item;
+                        dojo.byId('selected').innerHTML= item ? treeTestStore.getLabel(item) : "";
+                        dojo.byId('uLabel').value = item ? treeTestStore.getLabel(item) : "";
+                        dojo.byId('uSomeProperty').value = item ? treeTestStore.getValue(item,"someProperty") : "";
+                }
         </script>
 
@@ -86 +81 @@
                 url="../tests/treeTest.json"></div>
 
-        <div dojoType="dijit.Tree" id="myTree" store="treeTestStore"  labelAttr="name" somePropertyAttr="someProperty"></div>
+        <div dojoType="dijit.Tree" id="myTree" label="root" store="treeTestStore" onClick="onClick" labelAttr="name" somePropertyAttr="someProperty"></div>
 
         <br />
@@ -102 +97 @@
         Description: <input id="someProperty" width="50" value="Enter Some Property Value" /><br /><br />
 
-        <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="addNodeToStore();">Add Item to Store</div>
+        <div dojoType="dijit.form.Button" iconClass="noteIcon" onClick="addItem();">Add Item to Store</div>
         <br />
-        <button dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteNode()">Delete Node (and children)</button>
+        <button dojoType="dijit.form.Button" iconClass="noteIcon" onClick="deleteItem()">Delete Node (and children)</button>
 
 

dijit/trunk/tests/tree/test_Tree_DnD.html

@@ -11 +11 @@
                 @import "../css/dijitTests.css";
                 @import "../dndDefault.css"; 
-
-                @import "../../../dojo/resources/dojo.css";
-                @import "../../../dojo/resources/dnd.css";
-                @import "../../../dojo/tests/dnd/dndDefault.css";
-
-
-
-
+                @import "../../../dojo/resources/dojo.css";
+                @import "../../../dojo/resources/dnd.css";
+                @import "../../../dojo/tests/dnd/dndDefault.css";
         </style>
 
@@ -40 +35 @@
 
                 globalId=1000;
+                lastSelected=null;
 
                 dojo.addOnLoad(function(){
@@ -64 +60 @@
                                         parent: lastSelected,           
                                         attribute: "children"   
-                                }
+                                };
 
                                 //store.newItem({name: dojo.byId('newCat').value, id:globalId++, numberOfItems:dojo.byId('numItems').value}, pInfo);
@@ -118 +114 @@
                 function tree2CheckItemAcceptance(node,source) {
                         var item = this.tree._domElement2TreeNode(node).item;
-                        if (this.tree.store.hasAttribute(item,"numberOfItems")){
+                        if (item && this.tree.store.hasAttribute(item,"numberOfItems")){
                                 var numItems=this.tree.store.getValues(item, "numberOfItems");
                                 return true;
@@ -145 +141 @@
 
                 function getIcon(item) {
-                        if (catStore.hasAttribute(item, "numberOfItems")) {
+                        if (!item || catStore.hasAttribute(item, "numberOfItems")) {
                                 console.log("returning folder class");
                                 return "myFolder";
@@ -152 +148 @@
                         return "myItem"
                 }
-
         </script>
 
@@ -178 +173 @@
         <div dojoType="dojo.data.ItemFileWriteStore" jsId="catStore"
                 url="categories.json"></div>
-
-
-
 
         <table width="100%" style="margin:5px solid gray" >
@@ -218 +210 @@
                         <h2>Collection Count Summary</h2>
                         <p>You can't drop items onto this tree.</p>
-                        <div class="container" dojoType="dijit.Tree" id="myTree" store="catStore" labelAttr="name" getLabel="tree1CustomLabel"  childrenAttr="children" dndController="dijit._tree.dndSource" checkAcceptance="dndAccept" getIconClass="getIcon"></div>
+                        <div class="container" dojoType="dijit.Tree" id="myTree" store="catStore" label="Collections"
+                                labelAttr="name" getLabel="tree1CustomLabel"  childrenAttr="children" dndController="dijit._tree.dndSource"
+                                checkAcceptance="dndAccept" getIconClass="getIcon"></div>
                 </td>
                 <td>
                         <h2>Collection</h2>
                         <p>Drop items onto this tree, but only on categories, should fail to let you drop on other items.</p>
-                        <div class="container" dojoType="dijit.Tree" id="myTree2" store="catStore"  labelAttr="name"  childrenAttr="children, items" dndController="dijit._tree.dndSource" onDndDrop="tree2CustomDrop" checkAcceptance="dndAccept" checkItemAcceptance="tree2CheckItemAcceptance" getIconClass="getIcon"></div> 
+                        <div class="container" dojoType="dijit.Tree" id="myTree2" label="Collections" store="catStore"  labelAttr="name"  childrenAttr="children, items" dndController="dijit._tree.dndSource" onDndDrop="tree2CustomDrop" checkAcceptance="dndAccept" checkItemAcceptance="tree2CheckItemAcceptance" getIconClass="getIcon"></div> 
                 </td>
         </tr>
         </table>
 
-
         </body>
 </html>

dijit/trunk/themes/themeTester.html

@@ -292 +292 @@
                                         <!-- tree widget -->
                                         <div dojoType="dijit.Tree" store="continentStore" query="{type:'continent'}"
-                                                labelAttr="name" typeAttr="type">
+                                                labelAttr="name" typeAttr="type" label="Continents">
                                         </div>
                                 </div>

dijit/trunk/themes/tundra/tundra.css

@@ -891 +891 @@
     zoom: 1;    /* MOW: what the heck is this doing in here? */
 }
-.tundra .dijitTreeIsRoot {
-    margin-left: 0;
-}
  
 /* left vertical line (grid) for all nodes */
 .tundra .dijitTreeIsLast {
     background: url('images/i_half.gif') no-repeat;
+}
+
+.tundra .dijitTreeIsRoot {
+    margin-left: 0;
+    background: none;
 }
 

dijit/trunk/Tree.js

@@ -8 +8 @@
 
 dojo.declare(
-        "dijit._TreeBase",
+        "dijit._TreeNode",
         [dijit._Widget, dijit._Templated, dijit._Container, dijit._Contained],
 {
-        // summary:
-        //      Base class for Tree and _TreeNode
+        // summary
+        //              Single node within a tree
+
+        // item: dojo.data.Item
+        //              the dojo.data entry this tree represents
+        item: null,     
+
+        isTreeNode: true,
+
+        // label: String
+        //              Text of this tree node
+        label: "",
+
+        isExpandable: null, // show expando node
+        
+        isExpanded: false,
 
         // state: String
@@ -19 +33 @@
         //              then after dojo.data query it becomes "LOADING" and, finally "LOADED"   
         state: "UNCHECKED",
-        locked: false,
-        startExpanded: true,
-
-        lock: function(){
-                // summary: lock this node (and it's descendants) while a delete is taking place?
-                this.locked = true;
-        },
-        unlock: function(){
-                if(!this.locked){
-                        //dojo.debug((new Error()).stack);
-                        throw new Error(this.declaredClass+" unlock: not locked");
-                }
-                this.locked = false;
-        },
-
-        isLocked: function(){
-                // summary: can this node be modified?
-                // returns: false if this node or any of it's ancestors are locked
-                var node = this;
-                while(true){
-                        if(node.lockLevel){
-                                return true;
-                        }
-                        if(!node.getParent() || node.isTree){
-                                break;
-                        }       
-                        node = node.getParent();        
-                }
-                return false;
-        },
-
+
+        templatePath: dojo.moduleUrl("dijit", "_tree/Node.html"),               
+
+        postCreate: function(){
+                // set label, escaping special characters
+                this.setLabelNode(this.label);
+
+                // set expand icon for leaf     
+                this._setExpando();
+
+                // set icon based on item
+                dojo.addClass(this.iconNode, this.tree.getIconClass(this.item));
+
+                if(this.isExpandable){
+                        dijit.wai.setAttr(this.labelNode, "waiState", "expanded", this.isExpanded);
+                }
+        },
+
+        markProcessing: function(){
+                // summary: visually denote that tree is loading data, etc.
+                this.state = "LOADING";
+                this._setExpando(true); 
+        },
+
+        unmarkProcessing: function(){
+                // summary: clear markup from markProcessing() call
+                this._setExpando(false);        
+        },
+
+        _updateLayout: function(){
+                // summary: set appropriate CSS classes for this.domNode
+                dojo.toggleClass(this.domNode, "dijitTreeIsLast", !this.getNextSibling());
+        },
+
+        _setExpando: function(/*Boolean*/ processing){
+                // summary: set the right image for the expando node
+
+                // apply the appropriate class to the expando node
+                var styles = ["dijitTreeExpandoLoading", "dijitTreeExpandoOpened",
+                        "dijitTreeExpandoClosed", "dijitTreeExpandoLeaf"];
+                var idx = processing ? 0 : (this.isExpandable ? (this.isExpanded ? 1 : 2) : 3);
+                dojo.forEach(styles,
+                        function(s){
+                                dojo.removeClass(this.expandoNode, s);
+                        }, this
+                );
+                dojo.addClass(this.expandoNode, styles[idx]);
+
+                // provide a non-image based indicator for images-off mode
+                this.expandoNodeText.innerHTML =
+                        processing ? "*" :
+                                (this.isExpandable ?
+                                        (this.isExpanded ? "-" : "+") : "*");
+        },      
+
+        expand: function(){
+                // summary: show my children
+                if(this.isExpanded){ return; }
+                // cancel in progress collapse operation
+                if(this._wipeOut.status() == "playing"){
+            &nb