Home arrow XML arrow Page 4 - The Flex Tree Control

Part 2: A Tree with an Array Data Provider - XML

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



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  

>>> 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: