The document discusses handling tree control events in Flex. It explains that tree controls dispatch events like change and itemOpen when a user interacts with the tree. It provides an example code that defines handlers for these events to display the selected/opened item's label and data in a TextArea.

1. Handling Tree control events Hemakumar.S Open Source Developer

2. Handling Tree control events The tags that represent tree nodes in the XML data can have any name. The Tree control reads the XML and builds the display hierarchy based on the nested relationship of the nodes. For information on valid XML structure, see Hierarchical data objects. Some data providers have a single top level node, called a root node. Other data providers are lists of nodes and do not have a root node. In some cases, you might not want to display the root node as the Tree root. To prevent the tree from displaying the root node, specify the showRoot property to false; doing this does not affect the data provider contents, only the Tree display. You can only specify a false showRoot property for data providers that have roots, that is, XML and Object-based data providers.

3. Definition A branch node can contain multiple child nodes, and, by default, appears as a folder icon with a disclosure triangle that lets users open and close the folder. Leaf nodes appear by default as file icons and cannot contain child nodes. When a Tree control displays a node of a non-XML data provider, by default, it displays the value of the label property of the node as the text label. When you use an E4X XML-based data provider, however, you must specify the label field, even if the label is identified by an attribute named "label". To specify the label field, use the labelField property; for example, if the label field is the label attribute, specify labelField="@label".

4. Handling Tree control events Typically use events to respond to user interaction with a Tree control. Since the Tree control is derived from the List control, you can use all of the events defined for the List control. The Tree control also dispatches several Event and TreeEvent class events, including Event.change and TreeEvent.itemOpen. The following example defines event handlers for the change and itemOpen events. Define event listeners for the change and itemOpen events. The Tree control broadcasts the change event when the user selects a tree item, and broadcasts the itemOpen event when a user opens a branch node. For each event, the event handler displays the label and the data property, if any, in a TextArea control.

5. Example <?xml version=&quot;1.0&quot;?> <!-- dpcontrols/TreeEvents.mxml --> <mx:Application xmlns:mx=&quot;http://www.adobe.com/2006/mxml&quot;> <mx:Script> <![CDATA[ import flash.events.*; import mx.events.*; import mx.controls.*; private function changeEvt(event:Event):void { var theData:String = &quot;&quot; if (event.currentTarget.selectedItem.@data) { theData = &quot; Data: &quot; + event.currentTarget.selectedItem.@data; } forChange.text = event.currentTarget.selectedItem.@label + theData; } private function itemOpenEvt(event:TreeEvent):void { forOpen.text = event.item. @label; } ]]> </mx:Script>

6. Cont…. <mx:Tree id=&quot;XMLtree1&quot; width=&quot;150&quot; height=&quot;170&quot; labelField=&quot;@label&quot; itemOpen=&quot;itemOpenEvt(event);&quot; change=&quot;changeEvt(event);&quot;> <mx:XMLListCollection id=&quot;MailBox&quot;> <mx:XMLList> <node label=&quot;Mail&quot; data=&quot;100&quot;> <node label=&quot;Inbox&quot; data=&quot;70&quot;/> <node label=&quot;Personal Folder&quot; data=&quot;10&quot;> <node label=&quot;Business&quot; data=&quot;2&quot;/> <node label=&quot;Demo&quot; data=&quot;3&quot;/> <node label=&quot;Personal&quot; data=&quot;0&quot; isBranch=&quot;true&quot; /> <node label=&quot;Saved Mail&quot; data=&quot;5&quot; /> </node>

7. Cont…. <node label=&quot;Sent&quot; data=&quot;15&quot;/> <node label=&quot;Trash&quot; data=&quot;5&quot;/> </node> </mx:XMLList> </mx:XMLListCollection> </mx:Tree> <mx:Form> <mx:FormItem label=&quot;Change Event:&quot;> <mx:Label id=&quot;forChange&quot; width=&quot;150&quot;/> </mx:FormItem> <mx:FormItem label=&quot;Open Event:&quot;> <mx:Label id=&quot;forOpen&quot; width=&quot;150&quot;/> </mx:FormItem> </mx:Form> </mx:Application>

8. Screen Shot

9. Thank you…