Receive Notification of Branch Node Open or Close

This tutorial will show you how to receive notification when a branch node
in a tree element has been opened or closed.

Creating the Layout

  1. First, add a tree component and textarea component to the stage and name
    them, "myTree" and "myStatusArea".

Adding functionality to the Tree Component

  1. Next add the following code to the first frame of the stage:
// create a new xml object as the source for our tree component
myTreeDataProvider = new XML();
// ignore whitespace
myTreeDataProvider.ignoreWhite = true;

// load external XML file
myTreeDataProvider.load("treeSource.xml");

// onLoad handler for XML data
myTreeDataProvider.onLoad = function() {
myTree.dataProvider = myTreeDataProvider;
}

// set up tree listener
myTreeListener = new Object();

// nodeOpen event handler
myTreeListener.nodeOpen = function(eventObject) {
// this is where you add your own code to handle when the node is opened
myStatusArea.text = eventObject.node.attributes.label + " was opened.";
}

// nodeClose event handler
myTreeListener.nodeClose = function (eventObject) {
// this is where you add your own code to handle when the node is closed
myStatusArea.text = eventObject.node.attributes.label + " was closed.";
}

// add the event listeners
myTree.addEventListener("nodeOpen", myTreeListener);
myTree.addEventListener("nodeClose", myTreeListener);

Creating the XML File

  1. Save your project. In the same directory that you saved your project create
    a new text file called, "treeSource.xml" and enter the following text:
<?xml version="1.0" encoding="iso-8859-1"?>
<node label = "Tree Trunk">
<node label = "Branch 1">
<node label = "Leaf 1" />
<node label = "Leaf 2" />
<node label = "Leaf 3" />
</node>
<node label = "Branch 2">
<node label = "Leaf 1" />
<node label = "Leaf 2" />
</node>
<node label = "Branch 3">
<node label = "Leaf 1" />
<node label = "Leaf 2" />
<node label = "Leaf 3" />
<node label = "Leaf 4" />
</node>
</node>

Run the example and select a tree node. You should see a notification of the
node that was selected.