The Tree Component

The tree Component

The TRee component is a Flash Professional only component that can be tied directly to an XMLConnector component so that you can have your data brought in, parsed, and set to an interface component with only one line of ActionScript.

The TRee component looks for a specific attribute in the XML document to display, namely the label attribute. So before we go into the example, we will need another XML document like the one below.

Create a new XML document and save it as teamTree.xml with this data:

 <?xml version="1.0"?> <node label="Starting 5">   <node label="Paul">           <node label="15"/>           <node label="Point Guard"/>   </node>   <node label="Matt">           <node label="21"/>           <node label="Small Forward"/>   </node>   <node label="Doug">           <node label="33"/>           <node label="Center"/>   </node>   <node label="Todd">           <node label="51"/>           <node label="Power Forward"/>   </node>   <node label="Eddie">           <node label="11"/>           <node label="Shooting Guard"/>   </node> </node> 

Notice that we name every node "node" because those names do not matter, only what we set as the label attribute. Now we have our XML, let's go through the final example.

1.	Create a new Flash document.
2.	Save this document as treeExamp.fla in the same directory as the teamTree.xml file.
3.	Drag an instance of the XMLConnector component onto the stage, give it an instance name of xmlCon, and use these settings for the parameters: URL teamTree.xml direction receive ignoreWhite true multipleSimultaneousAllowed false suppressInvalidCalls false
4.	Drag an instance of the TRee component onto the stage and give it an instance name of treeComp and make it about 200x200 in size.
5.	Create a second layer and name it "actions," then put the following code in the first frame of that layer: //create the listener object var xmlListen:Object=new Object(); //create the event xmlListen.result=function(result){ treeComp.dataProvider = result.target.results; } //add the event listener xmlCon.addEventListener("result", xmlListen); //trigger the XML Connector to get the XML xmlCon.trigger();//

This code does basically what the code in the previous example did, but this time it sets the XML being returned directly to the dataProvider property of the tree component. This could have been done with even less code if we were using Data Binding, but that will be discussed in the next chapter.

Test the movie, and you will be able to select the team, as well as the individual players to see more data like Figure 24.8.

Figure 24.8. Combining the tree component with the XMLConnector component can make quick work of an XML driven interface.