Creating an application with the Tree component

The following procedures show how to use a Tree component to display mailboxes in an e-mail application.

The Tree component does not allow you to enter data parameters in the Property inspector or Component inspector. Because of the complexity of a Tree component's data structure, you must either import an XML object at runtime or build one in Flash while authoring. To create XML in Flash, you can use the TreeDataProvider interface, use the ActionScript XML object, or build an XML string. Each of these options is explained in the following procedures.

To add a Tree component to an application and load XML:

Select File > New and choose Flash File (ActionScript 2.0).
Save the document as treeMenu.fla.
In the Components panel, double-click the Tree component to add it to the Stage.
Select the Tree instance. In the Property inspector, enter the instance name menuTree.
Select the Tree instance and press F8. Select Movie Clip, and enter the name TreeNavMenu.
If the advanced view is not displayed, click the Advanced button.
Select Export for ActionScript.
Type TreeNavMenu in the Class text box and click OK.
Select File > New and select ActionScript File.
Save the file as TreeNavMenu.as in the same directory as treeMenu.fla.

In the Script window, enter the following code:

import mx.controls.Tree;

class TreeNavMenu extends MovieClip {
    var menuXML:XML;
    var menuTree:Tree;
    function TreeNavMenu() {
        // Set up the appearance of the tree and event handlers.
        menuTree.setStyle("fontFamily", "_sans");
        menuTree.setStyle("fontSize", 12);
        // Load the menu XML.
        var treeNavMenu = this;
        menuXML = new XML();
        menuXML.ignoreWhite = true;
        menuXML.load("TreeNavMenu.xml");
        menuXML.onLoad = function() {
            treeNavMenu.onMenuLoaded();
        };
    }
    function change(event:Object) {
        if (menuTree == event.target) {
            var node = menuTree.selectedItem;
            // If this is a branch, expand/collapse it.
            if (menuTree.getIsBranch(node)) {
                menuTree.setIsOpen(node, !menuTree.getIsOpen(node), true);
            }
            // If this is a hyperlink, jump to it.
            var url = node.attributes.url;
            if (url) {
                getURL(url, "_top");
            }
            // Clear any selection.
            menuTree.selectedNode = null;
        }
    }
    function onMenuLoaded() {
        menuTree.dataProvider = menuXML.firstChild;
        menuTree.addEventListener("change", this);
    }
}

This ActionScript sets up styles for the tree. An XML object is created to load the XML file that creates the tree's nodes. Then the onLoad event handler is defined to set the data provider to the contents of the XML file.

Create a new file called TreeNavMenu.xml in a text editor.

Enter the following code in the file:

<node>
    <node label="My Bookmarks">
        <node label="Adobe Web site" url="http://www.adobe.com" />
        <node label="MXNA blog aggregator" url="http://www.markme.com/mxna" />
    </node>
    <node label="Google" url="http://www.google.com" />
</node>

Save your documents and return to treeMenu.fla. Select Control > Test Movie to test the application.

To load XML from an external file:

Select File > New and choose Flash File (ActionScript 2.0).
Drag an instance of the Tree component onto the Stage.
Select the Tree instance. In the Property inspector, enter the instance name myTree.
In the Actions panel on Frame 1, enter the following code:
```
var myTreeDP:XML = new XML();
myTreeDP.ignoreWhite = true;
myTreeDP.load("treeXML.xml");
myTreeDP.onLoad = function() {
    myTree.dataProvider = this.firstChild;
};
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
    trace("selected node is: "+evt.target.selectedNode);
    trace("");
};
myTree.addEventListener("change", treeListener);
```
This code creates an XML object called myTreeDP and calls the XML.load() method to load an XML data source. The code then defines an onLoad event handler that sets the dataProvider property of the myTree instance to the new XML object when the XML loads. For more information about the XML object, see its entry in ActionScript 2.0 Language Reference.
Create a new file called treeXML.xml in a text editor.

Enter the following code in the file:

<node>
    <node label="Mail">
        <node label="INBOX"/>
        <node label="Personal Folder">
            <node label="Business" isBranch="true" />
            <node label="Demo" isBranch="true" /> 
            <node label="Personal" isBranch="true" /> 
            <node label="Saved Mail" isBranch="true" /> 
            <node label="bar" isBranch="true" />
        </node>
        <node label="Sent" isBranch="true" />
        <node label="Trash"/>
    </node>
</node>

Select Control > Test Movie.
In the SWF file, you can see the XML structure displayed in the tree. Click items in the tree to see the trace() statements in the change event handler send the data values to the Output panel.

To use the TreeDataProvider class to create XML in Flash while authoring:

Select File > New and choose Flash File (ActionScript 2.0).
Drag an instance of the Tree component onto the Stage.
Select the Tree instance and in the Property inspector, enter the instance name myTree.

In the Actions panel on Frame 1, enter the following code:

var myTreeDP:XML = new XML();
myTreeDP.addTreeNode("Local Folders", 0);
// Use XML.firstChild to nest child nodes below Local Folders.
var myTreeNode:XMLNode = myTreeDP.firstChild;
myTreeNode.addTreeNode("Inbox", 1);
myTreeNode.addTreeNode("Outbox", 2);
myTreeNode.addTreeNode("Sent Items", 3);
myTreeNode.addTreeNode("Deleted Items", 4);
// Assign the myTreeDP data source to the myTree component.
myTree.dataProvider = myTreeDP;
// Set each of the four child nodes to be branches.
for (var i = 0; i<myTreeNode.childNodes.length; i++) {
    var node:XMLNode = myTreeNode.getTreeNodeAt(i);
    myTree.setIsBranch(node, true);
}

This code creates an XML object called myTreeDP. Any XML object on the same frame as a Tree component automatically receives all the properties and methods of the TreeDataProvider interface. The second line of code creates a single root node called Local Folders. For detailed information about the rest of the code, see the comments (lines preceded with //) throughout the code.

Select Control > Test Movie.
In the SWF file, you can see the XML structure displayed in the tree. Click items in the tree to see the trace() statements in the change event handler send the data values to the Output panel.

To use the ActionScript XML class to create XML:

Select File > New and choose Flash File (ActionScript 2.0).
Drag an instance of the Tree component onto the Stage.
Select the Tree instance. In the Property inspector, enter the instance name myTree.

In the Actions panel on Frame 1, enter the following code:

// Create an XML object.
var myTreeDP:XML = new XML();
// Create node values.
var myNode0:XMLNode = myTreeDP.createElement("node");
myNode0.attributes.label = "Local Folders";
myNode0.attributes.data = 0;
var myNode1:XMLNode = myTreeDP.createElement("node");
myNode1.attributes.label = "Inbox";
myNode1.attributes.data = 1;
var myNode2:XMLNode = myTreeDP.createElement("node");
myNode2.attributes.label = "Outbox";
myNode2.attributes.data = 2;
var myNode3:XMLNode = myTreeDP.createElement("node");
myNode3.attributes.label = "Sent Items";
myNode3.attributes.data = 3;
var myNode4:XMLNode = myTreeDP.createElement("node");
myNode4.attributes.label = "Deleted Items";
myNode4.attributes.data = 4;
// Assign nodes to the hierarchy in the XML tree.
myTreeDP.appendChild(myNode0);
myTreeDP.firstChild.appendChild(myNode1);
myTreeDP.firstChild.appendChild(myNode2);
myTreeDP.firstChild.appendChild(myNode3);
myTreeDP.firstChild.appendChild(myNode4);
// Assign the myTreeDP data source to the Tree component.
myTree.dataProvider = myTreeDP;

For more information about the XML object, see its entry in ActionScript 2.0 Language Reference.

Select Control > Test Movie.
In the SWF file, you can see the XML structure displayed in the tree. Click items in the tree to see the trace() statements in the change event handler send the data values to the Output panel.

To use a well-formed string to create XML in Flash while authoring:

Select File > New and choose Flash File (ActionScript 2.0).
Drag an instance of the Tree component onto the Stage.
Select the Tree instance. In the Property inspector, enter the instance name myTree.

In the Actions panel on Frame 1, enter the following code:

var myTreeDP:XML = new XML("<node label='Local Folders'><node label='Inbox' data='0'/><node label='Outbox' data='1'/></node>");
myTree.dataProvider = myTreeDP;

This code creates the XML object myTreeDP and assigns it to the dataProvider property of myTree.

Select Control > Test Movie.
In the SWF file, you can see the XML structure displayed in the tree. Click items in the tree to see the trace() statements in the change event handler send the data values to the Output panel.

Flash CS3

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flash/9.0/main/00003580.html