Adobe Extending Dreamweaver CS4 - Manual (Page 96)

90 EXTENDING DREAMWEAVER CS4
User interfaces for extensions
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 “ The Dreamweaver Document Object Model ” on page 95.
Add a node 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 + '';
Add 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");
//add the new node to the top of the selected node's children
selNode.innerHTML = '' + ¬
selNode.innerHTML;
Delete a node To delete the currently selected node from the document structure, use the innerHTML or outerHTML
properties.
The following example deletes the entire selected node and any children:
var tree = document.myTreeControl;
var selNode = tree.selectedNodes[0];
selNode.outerHTML = "";
Adding a color button control
Color button controls let you add color picker interfaces to your extensions.
In addition to the standard input types such as text, check box, and button, Dreamweaver supports mmcolorbutton ,
an additional input type in extensions.
Specifying " mmcolorbutton " > in your code causes a color picker to appear in the user interface. You
can set the default color for the color picker by setting a value attribute on the input tag. If you do not set a value, the
color picker appears gray by default and the value property of the input object returns an empty string.
The following example shows a valid mmcolorbutton tag:
A color button has one event, onChange , which is triggered when the color changes.
Keep a text box and the color picker synchronized. The following example creates a text box that synchronizes the
color of the text box with the color of the color picker:
onChange="document.fgcolorText.value=this.value">