Changeset 10580

Timestamp:

09/20/07 22:56:56 (22 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"){
+                        this._wipeOut.stop();
+                }
+
+                this.isExpanded = true;
+                dijit.wai.setAttr(this.labelNode, "waiState", "expanded", "true");
+                dijit.wai.setAttr(this.containerNode, "waiRole", "role", "group");
+
+                this._setExpando();
+
+                this._wipeIn.play();
+        },
+
+        collapse: function(){                                   
+                if(!this.isExpanded){ return; }
+
+                // cancel in progress expand operation
+                if(this._wipeIn.status() == "playing"){
+                        this._wipeIn.stop();
+                }
+
+                this.isExpanded = false;
+                dijit.wai.setAttr(this.labelNode, "waiState", "expanded", "false");
+                this._setExpando();
+
+                this._wipeOut.play();
+        },
+
+        setLabelNode: function(label){
+                this.labelNode.innerHTML="";
+                this.labelNode.appendChild(document.createTextNode(label));
+        },
 
         _setChildren: function(/* Object[] */ childrenArray){
@@ -88 +162 @@
                 }
 
-                if(this.isTree){
-                        // put first child in tab index if one exists.
-                        var fc = this.getChildren()[0];
-                        var tabnode = fc ? fc.labelNode : this.domNode;
-                        tabnode.setAttribute("tabIndex", "0");
-                }
-
                 if(this._setExpando){
                         // change expando to/form dot or + icon, as appropriate
@@ -100 +167 @@
                 }
 
-                if (this.isTree && this.startExpanded) {
-                        var children = this.getChildren();
-                        for(var i=0; i<children.length;i++){
-                                if (children[i].isExpandable){
-                                        this._expandNode(children[i]);  
-                                }
-                        }
+                // create animations for showing/hiding the children (if children exist)
+                if(this.containerNode && !this._wipeIn){
+                        this._wipeIn = dojo.fx.wipeIn({node: this.containerNode, duration: 150});
+                        this._wipeOut = dojo.fx.wipeOut({node: this.containerNode, duration: 150});
                 }
 
@@ -158 +222 @@
 dojo.declare(
         "dijit.Tree",
-        dijit._TreeBase,
+        dijit._TreeNode,
 {
         // store: String||dojo.data.Store
@@ -174 +238 @@
         templatePath: dojo.moduleUrl("dijit", "_tree/Tree.html"),               
 
-        isExpanded: true, // consider this "root node" to be always expanded
+        isExpandable: true,
 
         isTree: true,
@@ -200 +264 @@
         postMixInProperties: function(){
                 this.tree = this;
+                this.lastFocused = this.labelNode;
 
                 this._itemNodeMap={};
@@ -212 +277 @@
 
         postCreate: function(){
-                this.containerNode = this.domNode;
-
                 // make template for container node (we will clone this and insert it into
                 // any nodes that have children)
@@ -222 +285 @@
                 this.containerNodeTemplate = div;
 
+                this.inherited("postCreate", arguments);
+
                 // load top level children
-                this.getItemChildren(null, dojo.hitch(this, "_onLoadAllItems", this));
+                this._expandNode(this);
 
                 if (this.dndController){
@@ -764 +829 @@
         }
 });
-
-dojo.declare(
-        "dijit._TreeNode",
-        dijit._TreeBase,
-{
-        // summary
-        //              Single node within a tree
-
-        templatePath: dojo.moduleUrl("dijit", "_tree/Node.html"),               
-
-        // 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,
-
-        postCreate: function(){
-                // set label, escaping special characters
-                this.labelNode.innerHTML = "";
-                this.labelNode.appendChild(document.createTextNode(this.label));
-
-                // set expand icon for leaf     
-                this._setExpando();
-
-                // set icon based on item
-                dojo.addClass(this.iconNode, this.tree.getIconClass(this.item));
-
-                // set icon based on item
-                dojo.addClass(this.labelNode, this.tree.getLabelClass(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, "dijitTreeIsRoot", "isTree" in this.getParent());
-                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 ? "-" : "+") : "*");
-        },      
-
-        _setChildren: function(items){
-                var ret = this.inherited('_setChildren', arguments);
-
-                // create animations for showing/hiding the children (if children exist)
-                if(this.containerNode && !this._wipeIn){
-                        this._wipeIn = dojo.fx.wipeIn({node: this.containerNode, duration: 150});
-                        this._wipeOut = dojo.fx.wipeOut({node: this.containerNode, duration: 150});
-                }
-
-                return ret;
-        },
-
-        expand: function(){
-                // summary: show my children
-                if(this.isExpanded){ return; }
-                // cancel in progress collapse operation
-                if(this._wipeOut.status() == "playing"){
-                        this._wipeOut.stop();
-                }
-
-                this.isExpanded = true;
-                dijit.wai.setAttr(this.labelNode, "waiState", "expanded", "true");
-                dijit.wai.setAttr(this.containerNode, "waiRole", "role", "group");
-
-                this._setExpando();
-
-                this._wipeIn.play();
-        },
-
-        collapse: function(){                                   
-                if(!this.isExpanded){ return; }
-
-                // cancel in progress expand operation
-                if(this._wipeIn.status() == "playing"){
-                        this._wipeIn.stop();
-                }
-
-                this.isExpanded = false;
-                dijit.wai.setAttr(this.labelNode, "waiState", "expanded", "false");
-                this._setExpando();
-
-                this._wipeOut.play();
-        },
-
-        setLabelNode: function(label){
-                this.labelNode.innerHTML="";
-                this.labelNode.appendChild(document.createTextNode(label));
-        }
-});

dijit/trunk/_tree/Tree.html

@@ -1 +1 @@
 <div class="dijitTreeContainer" style="" waiRole="tree"
-        dojoAttachEvent="onclick:_onClick,onkeypress:_onKeyPress"
-></div>
+        dojoAttachEvent="onclick:_onClick,onkeypress:_onKeyPress">
+        <div class="dijitTreeNode  dijitTreeIsRoot dijitTreeExpandLeaf dijitTreeChildrenNo" waiRole="presentation"
+                ><span dojoAttachPoint="expandoNode" class="dijitTreeExpando" waiRole="presentation"
+                ></span
+                ><span dojoAttachPoint="expandoNodeText" class="dijitExpandoText" waiRole="presentation"
+                ></span
+                >
+                <div dojoAttachPoint="contentNode" class="dijitTreeContent" waiRole="presentation">
+                        <div dojoAttachPoint="iconNode" class="dijitInline dijitTreeIcon" waiRole="presentation"></div>
+                        <span dojoAttachPoint=labelNode class="dijitTreeLabel" wairole="treeitem" tabindex="0"></span>
+                </div>
+        </div>
+</div>

dojox/trunk/data/demos/demo_LazyLoad.html

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

dojox/trunk/data/demos/demo_MultiStores.html

@@ -39 +39 @@
 
         <!--
-                The store instancew used by this demo.
+                The store instances used by this demo.
         -->
         <div dojoType="dojo.data.ItemFileReadStore" url="geography.json"              jsId="ifrGeoStore"></div>
@@ -54 +54 @@
 
         <b>Tree:</b><br>
-        <div dojoType="dijit.Tree" id="tree1" store="opmlGeoStore"></div>
+        <div dojoType="dijit.Tree" id="tree1" label="Continents" store="opmlGeoStore"></div>
         </blockquote>
 
@@ -67 +67 @@
 
         <b>Tree:</b><br>
-        <div dojoType="dijit.Tree" id="tree2" store="ifrGeoStore"></div>
+        <div dojoType="dijit.Tree" id="tree2" label="Continents" store="ifrGeoStore"></div>
         </blockquote>
 </body>

dojox/trunk/data/tests/ml/test_HtmlTableStore_declaratively.html

@@ -115 +115 @@
         <blockquote>
                 <b>Table Rows: <br/><i>(Just to show that the tree can determine that the tableStore works like a store).<br/>Should have three branches, where the row had attr Y value of 3.</i></b>
-                <div dojoType="dijit.Tree" id="tree" store="tableStore" query="{Y:3}"></div>
+                <div dojoType="dijit.Tree" id="tree" store="tableStore" query="{Y:3}" label="Test tree"></div>
         </blockquote>
 </body>