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
- First, add a tree component and textarea component to the stage and name
them, "myTree" and "myStatusArea".
Adding functionality to the Tree Component
- 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
- 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.