YUI Library Home

YUI Library Examples: TreeView Control: Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal

TreeView Control: Three Ways to Define a TreeView: Markup (Progressive Enhancement), Existing TreeView Instance, and Object Literal

In this simple example you can see how to build TreeView Control instance from several different sources of data:

  1. an HTML list on the page;
  2. an existing TreeView instance's definition;
  3. a branch of an existing TreeView instance (e.g., from one of its nodes).

View example in new window.

Tree from markup

 List 0
 item 0-1

Copy of the tree above taken from its own definition

 List 0
 item 0-1

Copy of the second branch of the tree at the top

 item 0-1

Tree built from a static definition

 Label 0
 text label 1
 branch 1
 Label 1-0
 branch 3

Building trees from HTML markup or from previous definitions.

In this brief example for the TreeView Control, we begin with a <div> containing a set of nested unordered lists <ul> providing the basic tree structure

1<div id="markup"> 
2    <ul> 
3        <li>List 0 
4            <ul> 
5                <li>List 0-0 
6                    <ul> 
7                        <li>item 0-0-0</li> 
8                        <li>item 0-0-1</li> 
9                    </ul> 
10                </li> 
11            </ul> 
12        </li> 
13        <li>item 0-1 
14            <ul> 
15                <li><a target="_new" href="HTTP://developer.yahoo.com/yui" title="go to YUI Home Page">YUI</a> 
16                    <ul> 
17                        <li>item 0-1-0</li> 
18                        <li>item 0-1-1</li> 
19                    </ul> 
20                </li> 
21            </ul> 
22        </li> 
23    </ul> 
24</div> 
view plain | print | ?

We create a new TreeView and render it. The TreeView will read the existing HTML and build the nodes from it.

1tree1 = new YAHOO.widget.TreeView("markup"); 
2tree1.render(); 
view plain | print | ?

Once we have a tree, we can read its definition, preserve it somehow and then build an identical tree from it. In the second part we are building a couple of trees, one identical to the full tree and another one from just a branch of it

1tree2 = new YAHOO.widget.TreeView("treeDiv2", tree1.getTreeDefinition()); 
2tree2.render(); 
3 
4var branch = tree1.getRoot().children[1]; 
5tree3 = new YAHOO.widget.TreeView("treeDiv3", branch.getNodeDefinition()); 
6tree3.render(); 
view plain | print | ?

For tree2 we have used the full tree definition from the first tree. For tree3 we have first located a branch, for this sample, the second branch from the root and used its definition for the tree

Finally, in the last tree, we used an object literal to define the full tree.

1(new YAHOO.widget.TreeView("treeDiv4",[ 
2    'Label 0', 
3    {type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'}, 
4    {type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[ 
5        'Label 1-0' 
6    ]}, 
7    {type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'}, 
8    {type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'}, 
9    {type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[ 
10        'Label 3-0', 
11        'Label 3-1' 
12    ]} 
13])).render(); 
view plain | print | ?

Here we provide as a second argument to the constructor an array where each item can be either an object literal or a simple string, such as 'Label 0', which will be converted to a simple TextNode.

The items in the array can also be objects containing more detailed definitions for each node. All require a type property using either a short-name such as 'Text' or 'HTML' (case-insensitive) or the object name of the node type like 'MenuNode', which will be resolved to YAHOO.widget.MenuNode.

Object definitions allow precise control over the tree since any public property of each node can be specified, for example, some nodes start expanded while others collapsed. We cannot have such expressiveness from plain HTML markup.

We have defined a couple of external links. In the first one, labeled YAHOO, the link has the generic style of the rest of the nodes in the tree. In the second one, labeled YUI, we have used an HTMLNode instead of a TextNode so TreeView copies that string into the node without adding further classNames so it gets a different look.

The last node, being a MenuNode, forces other branches to collapse when expanded. The other node with children, being a plain node doesn't mind if other nodes remain expanded.

Nodes may contain a children property containing further node definitions.

YUI Logger Output:

Logger Console

INFO 1520ms (+2) 7:59:59 PM:
TreeView
Preloading images: ygtv
INFO 1518ms (+0) 7:59:59 PM:
MenuNode  (30): branch 3
Generating html
INFO 1518ms (+0) 7:59:59 PM:
HTMLNode  (29)
Generating html
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (28): YAHOO
Generating html
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (27): Label 1-0
Generating html
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (26): branch 1
completeRender: 26, # of children: 1
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (26): branch 1
rendering children for 26
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (26): branch 1
Generating html
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (25): text label 1
Generating html
INFO 1518ms (+0) 7:59:59 PM:
TextNode  (24): Label 0
Generating html
INFO 1518ms (+0) 7:59:59 PM:
RootNode
completeRender: 23, # of children: 6
INFO 1518ms (+1) 7:59:59 PM:
RootNode
rendering children for 23
INFO 1517ms (+0) 7:59:59 PM:
TreeView  treeDiv4
Building tree from object
INFO 1517ms (+0) 7:59:59 PM:
TreeView  treeDiv4
tree init: treeDiv4
INFO 1517ms (+0) 7:59:59 PM:
TextNode  (19): item 0-1
Generating html
INFO 1517ms (+0) 7:59:59 PM:
RootNode
completeRender: 18, # of children: 1
INFO 1517ms (+0) 7:59:59 PM:
RootNode
rendering children for 18
INFO 1517ms (+0) 7:59:59 PM:
TreeView  treeDiv3
Building tree from object
INFO 1517ms (+0) 7:59:59 PM:
TreeView  treeDiv3
tree init: treeDiv3
INFO 1517ms (+0) 7:59:59 PM:
TextNode  (14): item 0-1
Generating html
INFO 1517ms (+0) 7:59:59 PM:
TextNode  (10): List 0
Generating html
INFO 1517ms (+1) 7:59:59 PM:
RootNode
completeRender: 9, # of children: 2
INFO 1516ms (+0) 7:59:59 PM:
RootNode
rendering children for 9
INFO 1516ms (+0) 7:59:59 PM:
TreeView  treeDiv2
Building tree from object
INFO 1516ms (+8) 7:59:59 PM:
TreeView  treeDiv2
tree init: treeDiv2
INFO 1508ms (+0) 7:59:59 PM:
TextNode  (5): item 0-1
Generating html
INFO 1508ms (+1) 7:59:59 PM:
TextNode  (1): List 0
Generating html
INFO 1507ms (+0) 7:59:59 PM:
RootNode
completeRender: 0, # of children: 2
INFO 1507ms (+2) 7:59:59 PM:
RootNode
rendering children for 0
INFO 1505ms (+0) 7:59:59 PM:
TreeView  markup
Building tree from existing markup
INFO 1505ms (+14) 7:59:59 PM:
TreeView  markup
tree init: markup
INFO 1491ms (+1490) 7:59:59 PM:
LogReader  instance0
LogReader initialized
INFO 1ms (+1) 7:59:57 PM:
global
Logger initialized

More TreeView Control Resources:

Copyright © 2008 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings