The Flex Tree Control (
Page 1 of 5 )
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="http://www.adobe.com/2006/mxml" 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.
