How to use Tree component in Flex 4 with Flash Builder

The Tree component is used to represent a hierarchical data set, providing an interface for the user to drill down through the hierarchy in order to select an atomic element as below:

When using XML as the data source for a Tree, you should use the labelField property to identify what in the data source should be used for the label. The XML data source is being defined inline and has generic element names. But its tag attributes, referred to using @tag, will be used as the labels in the Tree. You can follow the source code I share to see what happen. Another important property is showRoot. In the following code, you couldn’t see the “ROOT” of tree, because I set showRoot=false. (If you don’t like it, you can delete it. The default value of showRoot is true). I hope you enjoy this short article and have fun with flex 4.

Source code:
<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

<fx:Declarations>

<!-- Place non-visual elements (e.g., services, value objects) here -->

</fx:Declarations>



<mx:Tree labelField="@tag" showRoot="false">

<mx:dataProvider>

<fx:XML>

<note tag="My File">

<note tag="Book"/>

<note tag="Video"/>

<note tag="Homework"/>

<note tag="Photos">

<note tag="family"/>

</note>

</note>

</fx:XML>

</mx:dataProvider>

</mx:Tree>

</s:Application>