The Flex Tree Control

The Flex Tree control is amazingly useful when building applications, especially if you’re dealing with hierarchical data. To learn how to add the power of this intuitive organizational component to your developer’s toolbox, keep reading.

The Flex Tree Control is a fundamental user interface component to application building. It naturally organizes hierarchical data into branches and leaf nodes, forming easily organized data. Modern day interfaces like operating systems and websites commonly employ some version of a Tree because of its intuitive characteristics and the negligible zero amount of time spent learning how to use it.

In this article I’ll walk you through the basics of the Flex Tree Control. We’ll use both an XMLList data provider and an Array data provider.

Part 1: A Tree with an XMLList Data Provider  

Like the TileList, Datagrid and a few other controls, the Tree Control is derived from the ListBase class. This means much of the functionality of the Tree is shared with its sibling controls. To start our tutorial, let’s create a basic Tree with an XMLList data provider. The XML for this application will look like this:

Panel with Tree XML: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" layout="absolute"> <mx:Panel title="My Flex Tree"> <mx:Tree id="myTree" width="300" height="300"></mx:Tree> </mx:Panel> </mx:Application>

Here is what the compile application looks like:

This is pretty much a Tree with no data, surrounded by a Panel. I added the panel just for aesthetics. It is not required.

To add data to this Tree, we will first use an XMLList data provider. The data provider is a source which populates our Tree with data. This is commonplace for many of the Flex controls that display data.

Before we get too far into the XML, lets talk about what type of data we will use for this example. Because Trees are great for hierarchical data, we will use data which needs to be organized. We’ll use data that is common to everyone, like food groups: grains, fruits, vegetables, dairy, meats, and nuts. These will be our top level branches and will be represented by folders (branches) in our Tree.

Each category will have one or more subcategories. For instance, Grains will have foods like breads, pasta and oatmeal. Breads can be further subcategorized into wheat, white, rolls, etc. For the first pass we’ll only use one level of subcatgorization. 

{mospagebreak title=Updating the Code for the Tree Control}

To add our top level food groups we will employ an XMLList and data provider tags.

Here is the updated code for the Tree Control:

Pay close attention to the newly added labelField attribute of the Tree tag. This attribute tells the Tree to use the "label" attribute in the XMLList as the label for the tree. The XMLList is defined within the dataProvider tag. Note that we could have also used an Array instead of an XMLList. Well cover that shortly.  

The new Tree looks like this:

{mospagebreak title=From Leafs to Branches}

Now we’re making progress. We have effectively populated our Tree with leaf nodes. It is good, but not complete. Next, we will need to turn our leaf nodes into branches and give our new branches additional leaf nodes. We do this by adding child nodes to our XML groups. The Tree will automatically recognize that the top level nodes have children and change their icons to folders. Here is the updated XMLList:

Here is the Tree with branches and leaf nodes:

Now we have a successful Tree with leaf nodes.

{mospagebreak title=Part 2: A Tree with an Array Data Provider}

Earlier in this article, we used an XMLList as our data provider. This is good, but XML may not be as easy to work with in some cases. For instance, if you will be using AMFPHP to retrieve your data, it may be more natural to use an Array as your data structure. As well, Flex allows us to use ActionScript to populate an Array item and bind it to our Tree (along with other List Based controls).

We will take the opportunity here to do both — use an Array as a data provider and use ActionScript to build and bind the array to our control. This scenario is common in real-world programming. It is not likely that your controls will have a static XMLList providing data. Here is what our application code looks like when the XMLList is exchanged for an Array:


We’ve changed the code around a good bit. I’ll go through each change step by step below.   

The New Tree Tag

The new Tree tag has much less information now. What has happened here is that we’ve moved the dataProdvider to a source not contained in the Tree tag. Notice the addition of the dataProvider attribute on the Tree tag. This new attribute tells the tree to find an object with the name "treeData" and use it as the data source. The presence of this attribute allows us to remove the dataProvider tag as well as the children nodes of the dataProvider.  

The init function

The init function is where all the magic really happens. This function will populate our Array with the food group branches and the leaf nodes. To explore this function, you will have to understand a bit about objects and arrays. We won’t go into this topic here, but you should be able to get a general understanding of it.  

To start our analysis of this function check out the 5 variables defined as Objects:


We are creating 5 objects – one for each food group. This is very similar to the top level nodes of our XMLList data structure. Each one of these objects will have a label property which will provide the branch or leaf node name for the Tree. Note: we could have done this by creating a single object, but for readability we will use 5.

The label is assigned here:


The first line assigns the label of the branch. In this case is is "Grains."

The next line introduces an alternate syntax for creating objects and arrays — the curly braces and the braces. What we are doing here is creating a property of our Grains object called "children." The "children" property will be interpreted by the Tree as leaf nodes of the parent.

On the right hand side of the assignment operator (=) we have something like [{label:'White Bread'}]. The braces indicate an array. The curly braces indicate an object. So, we have a array filled with objects. Each object conforms to the same specifications as the top level Grains object. Each has a label and each can possibly have children. If the "children" property is present, the leaf node turns into a branch.

The third line adds our temporary Grain object (tmpObjectGrains) to the treeData Array, causing it to appear in the Tree. We repeat this process for all the food groups.

For more information on arrays and objects, see:
Working With Arrays
Objects and Classes  

{mospagebreak title=The treeData Variable declaration and Calling the init function} 

The treeData variable is declared with the following line:

The [Bindable] keyword tells the compiler that the treeData Array can bind to a control such as a data provider. So, if the Array is changed, the control will be updated automatically. In this article, we only scratch the surface in covering information on bindings and data providers. For more information see on data providers see Flex Quick Start: Building an advance user interface on  

To call our init function, we’ve added an attribute on the mx:Application tag. This attribute is "preinitialize." The value of he attribute is the name of our function ‘init()’.  

Here is what the code looks like:


The preinitialize event is one of many events that are triggered when an application launches. In particular, I’ve selected preinitialize because it occurs before the control is added to the layout. In this way, I can be assured that the data provider is fully populated so that when the control is displayed, the data will be present.  

The result of changing XMLList out for a Array is the same. Using one over the other really depends on what the source of your data is and how it is organized. It is common for flex/flash apps to connect to web services to retrieve their data, and thankfully ActionScript is capable is using both of these types.

Google+ Comments

Google+ Comments