01. v1 Components, We Hardly Knew Ye   02. Button Component   03. Alert Component   04. Checkbox Component   05. Radio Buttons   06. The List Box family of Components   07. Date Chooser Component   08. Date Field Component   09. Label Component

10. Loader / Progress Bar Components   11. Numeric Stepper Component   12. Text Area/Input Components   13. Menu / Menu Bar Components   14. Scroll Pane Component   15. Window Component   16. Tree Component   17. Accordion Component   18. Conclusion

go to previous page

- discuss this tutorial -

go to next page

16. Tree Component

The Tree component allows you to display a tree structure in an easy-to-navigate, graphical format. The standard appearance of the Tree component should be familiar to you since it is essentially identical to the control you encounter each time you navigate to a directory on your hard drive to open a document.

1. Create a new FLA and set the Stage dimensions to 400px by 200px. Use the following screenshot as a guide when laying out your components in the next few steps.
   
   
   
   
2. Create two new layers. Name the layers, starting with the top one as Actions, Tree Component and Text Area Component.
   
   
3. Select Frame 1 of the Tree Component layer and drag an instance of the Tree component on Stage. Using the Property Inspector (PI), resize it to 172px by 180px and give it the instance name myTree.
   
   
   
   
4. Select Frame 1 of the Text Area Component layer and drag an instance of the Text Area component on Stage. Using the PI, resize it to 188px by 180px and give it the instance name myStatusArea. Set its html parameter to true, since you will be displaying the status messages with HTML formatting. Make sure that wordWrap is also set to true (it is, by default.)
   
   
   
   
5. Open up tree_source.xml from your downloads in a text editor and look at the structure of the tree data or see below. Note that how it is comprised of nodes with label attributes. Nodes that contain other nodes display as folders and those that do not display as documents within the default skin of the tree component.
   

   <?xml version="1.0" encoding="iso-8859-1"?>
   <node label = "Personal Folders">
       <node label = "Inbox">
           <node label = "First message" />
           <node label = "Second message" />
           <node label = "Third message" />
       </node>
       <node label = "Drafts">
           <node label = "First message" />
       </node>
       <node label = "Outbox" isBranch="true">
           <node label = "No messages." />
       </node>
       <node label = "Sent Items">
           <node label = "First message" />
           <node label = "Second message" />
       </node>
   </node>

6. Enter the following code in Frame 1 of the Actions layer:
   

   // load and assign data source
   myTreeDataProvider = new XML(); 
   // ignore whitespace in XML (important)
   myTreeDataProvider.ignoreWhite = true;
              
   // load external XML file
   myTreeDataProvider.load("tree_source.xml");
              
   // onLoad handler for XML data
   myTreeDataProvider.onLoad = function()
   { 
       myTree.dataProvider = myTreeDataProvider;
   }
   

   The code above loads in an external XML file (tree_source.xml) and sets it as the data provider for the Tree component.
   
   
7. Continue adding the following code to frame:
   

   // set up tree listener
   myTreeListener = new Object();
              
   // nodeOpen event handler
   myTreeListener.nodeOpen = function(eventObject)
   {
     myStatusArea.text += "<li>"+ eventObject.node.attributes.label+ 
     " opened.</li>";
   }

   Here, you create an event listener object for the tree and an event handler for the nodeOpen event. The nodeOpen event gets fired when the user opens a branch node (a folder) in a tree.
   
   
8. Continue adding the following code to frame:

   // nodeClose event handler
   myTreeListener.nodeClose = function ( eventObject )
   {
     myStatusArea.text += "<li>"+ eventObject.node.attributes.label+
     " <i>closed</i>.</li>";
   }
   

   Here you are creating a nodeClose event handler, just like you did previously for nodeOpen.
   
   
9. Continue adding the following code to frame:
   

   // change event handler
   myTreeListener.change = function(eventObject)
   {
       // the selected node
       var theSelectedNode = eventObject.target.selectedNode;
              
       // the label of the selected node
       var theSelectedNodeLabel = theSelectedNode.attributes.label;
              
       // add a status message to the status message text area component
       myStatusArea.text += "<li>"+ theSelectedNodeLabel+
       " <b>selected</b>.</li>";
   }
   

   You may remember the change event from some of the previous component examples. For the Tree component, the change event gets called when a node is selected (as opposed to opened.)
   
   
10. Continue adding the following code to frame:
    

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

    This code tells your Tree component instance that it should broadcast the stated events to the myTreeListener event listener. Note that you have to register for each event individually. You cannot register to receive all events at once.

11. Test the movie. Open some folders and click on some of the nodes to see the status messages appear in the Text Area component. You may notice that as you dig deeper into the tree, some of the labels start getting cut off horizontally. Unfortunately, it appears that the Tree component does not have a functional horizontal scroller. The Tree component extends the List component that you saw earlier and thus should have a horizontal scrollbar but turning it on using the following code does not work.
    

    // unfortunately, this does not work
    //(bug with component or undocumented limitation)
    // myTree.setHScrollPolicy ("on");

    You can interact with the finished version of the application below.
    
    

go to previous page

- discuss this tutorial -

go to next page