Home arrow XML arrow The Flex Tree Control

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.

  1. The Flex Tree Control
  2. Updating the Code for the Tree Control
  3. From Leafs to Branches
  4. Part 2: A Tree with an Array Data Provider
  5. The treeData Variable declaration and Calling the init function
By: Keith Lee
Rating: starstarstarstarstar / 9
August 06, 2009

print this article



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. 

>>> More XML Articles          >>> More By Keith Lee

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Google Docs and Xpath Data Functions
- Flex Array Collection Sort and Filtering
- The Flex Tree Control
- Flex List Controls
- Working with Flex and Datagrids
- How to Set Up Podcasting and Vodcasting
- Creating an RSS Reader Application
- Building an RSS File
- An Introduction to XUL Part 6
- An Introduction to XUL Part 5
- An Introduction to XUL Part 4
- An Introduction to XUL Part 3
- An Introduction to XUL Part 2
- An Introduction to XUL Part 1
- XML Matters: Practical XML Data Design and M...

Developer Shed Affiliates


Dev Shed Tutorial Topics: