User Guide

62 Chapter 3: User Interfaces for Extensions
The MM:TREENODE attributes are described in the following table:
For example, the following tree control has all its nodes expanded:
<mm:treecontrol name="test" style="height:300px;width:300px">
<mm:treenode value="rootnode1" state="expanded">
<mm:treenode value="node1" state="expanded"></mm:treenode>
<mm:treenode value="node3" state="expanded"></mm:treenode>
</mm:treenode>
<mm:treenode value="rootnode2" state="expanded">
<mm:treenode value="node2" state="expanded"></mm:treenode>
<mm:treenode value="node4" state="expanded"></mm:treenode>
</mm:treenode>
</mm:treecontrol>
Manipulating content within a tree control
Tree controls and the nodes within them are implemented as HTML tags. They are parsed by
Dreamweaver and stored in the document tree. These tags can be manipulated in the same way as
any other document node. For more information on
DOM functions and methods, see Chapter 4,
“The Dreamweaver Document Object Model,” on page 67.
Adding nodes To add a node to an existing tree control programmatically, set the innerHTML
property of the
MM:TREECONTROL tag or one of the existing MM:TREENODE tags. Setting the inner
HTML
property of a tree node creates a nested node.
The following example adds a node to the top level of a tree:
var tree = document.myTreeControl;
//add a top-level node to the bottom of the tree
tree.innerHTML = tree.innerHTML + ‘<mm:treenode name="node3"¬ value="node3">’;
Adding a child node
To add a child node to the currently selected node set the innerHTML
property of the selected node.
The following example adds a child node to the currently selected node:
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
//deselect the node, so we can select the new one
selnode.removeAttribute("selected");
Attribute name Description
name
Name of the node
value
Contains the content for the given node. For more than one column, this is a
pipe-delimited string. To specify an empty column, place a single space
character before the pipe (|).
state
Specifies that the node is expanded or collapsed with the strings
"expanded" or "collapsed".
selected
You can select multiple nodes by setting this attribute on more than one tree
node, if the tree has a MULTIPLE attribute.
icon
Optional. The index of built-in icon to use, starting with 0:
0 = no icon; 1 = DW document icon; 2 = Multidocument icon