This article is about creating a Flex tree control that uses a component hierarchy as the data provider. As with most of my Flex development, after struggling for days and then finally getting something to work, I later find out that there is a much easier way to do it that none of my searches ever turned up. I am a beginner Flex 2 developer, so any constructive feedback would be greatly appreciated.

So, if you are like me you probably have a hierarchy in your database that looks something like this:

iSubjectId = 1
    sSubjectName = Science
    iParentSubjectId = null
iSubjectId = 2
    sSubjectName = Biology
    iParentSubjectId = 1

In the above example, the top level subjects have null for their parent IDs and then second+ levels use the ID of their parent. When using CFCs to represent this hierarchy I would do something like this:

Subject.cfc
    iSubjectId = 1
    sSubjectName = Science
    children = array of Subjects
    [1] = Subject.cfc
      iSubjectId = 2
      sSubjectName = Biology

Above I have a nested hierarchy of subjects where the top level subject contains an array named children that has child subjects in it and so on and so on down the hierarchy. (Figure 1) My SubjectGateway component would contain a function named readSubjectHierarchy that would return an array of top level Subject components, each containing its child hierarchy. Like so:

Returned Array:
[1] Subject: Science
    children: Array
    [1] Biology
    [2] Chemistry
[2] Subject: History
    children: Array
    [1] American History
      children: Array
      [1] 1492 to 1860
      [2] 1861 to present
    [2] European History
[3] Subject: Math
    children: Array
    [1] Algebra
    [2] Calculus

OK, if you are still with me...

Enter Flex 2
So with Flex 2 in the picture, I thought that the best way to allow my user to select a Subject was with a tree control...right? All of the tree control examples I found had a hardcoded XML dataprovider which made great trees, but didn't help me one bit. Who uses hardcoded data? I then found an example where the hierarchical data was converted to XML and used as the dataprovider. Details of me trying to use that were recorded on the Adobe Forums Database driven tree control (www.adobe.com/cfusion/webforums/forum/messageview.cfm?

catid=582&threadid=1159438).

This was working but didn't seem ideal at all.

The Flex 2 documentation surrounding Hierarchical Data kept pointing me to the ITreeDataDescriptor interface (http://livedocs.macromedia.com/flex/2/langref/mx/

controls/treeClasses/ITreeDataDescriptor.html), which I tried using in so many ways I lost count, but it never seemed to work right. Most of the time, I would end up with either a flat list of items or all items showing up as folders including the bottom levels which had nothing beneath them. Since I only wanted the user to select the bottom levels, this was not allowing them to select anything. Not good.

Hmmmmm...

What I kept seeing, was this reference to a property of the object called children which was supposed to be an array of the child objects. Well wait a minute, I have that, but why does it think that all the levels have children? Then it hit me, I wondered if the presence of the array (even when empty) was making it think that there are children. ColdFusion has no NULL right, so I am always initializing an array to get it to return correctly from the gette method. Maybe this is the problem. So how can I get the getter to not return an array and not error. Well here is my solution:

Subject.cfc (important sections shown)
<cfcomponent output="false" alias="extensions.CF.Subject">
<cfproperty name="iSubjectId" type="numeric" default="0?>
<cfproperty name="iQueueId" type="numeric" default="0?>
<cfproperty name="iParentSubjectId" type="numeric" default="0?>
<cfproperty name="sSubject" type="string" default="">
<cfproperty name="children" type="array" default="null">
//Initialize the CFC with the default properties values.
//Note that the children array is not initialized
variables.iSubjectId = 0;
variables.iParentSubjectId = 0;
variables.sSubject = "";
<cffunction name="getChildren" output="false" access="public" returntype="any">
<cfif structKeyExists(variables,"children")$gt;
<cfreturn variables.children>
</cfif>
</cffunction>
<cffunction name="setChildren" output="false" access="public" returntype="void">
<cfargument name="val" required="true">
<cfif isArray(val) or arguments.val EQ "">
<cfset variables.children = arguments.val>
<cfelse>
<cfthrow message="'#arguments.val#' is not a valid array of children"/>
</cfif>
</cffunction>
... other getters and setters removed for space...
</cfcomponent>

Notes From the Above Code:

• the children cfproperty is listed to support translation to Flex, the default of null is just a reminder for me
• the children propery is not initialized
• the getChildren function returns a type of any to support not returning anything
• the getChildren function checks for the existence of the variable children before trying to return anything
• this code is obviously incomplete but I stripped out a whole lot to get it in this article

package extensions.components.org.mydomain.model
{
import mx.collections.ArrayCollection;
[RemoteClass(alias="extensions.CF.Subject")]
[Bindable]
public dynamic class Subject
{
public var iSubjectId:Number = 0;
public var iQueueId:Number = 0;
public var iParentSubjectId:Number = 0;
public var sSubject:String = "";
public var children:Array;
public function Subject()
{
}
}

So the magic is in not returning anything with getChildren when there are no children in the array as well as not initializing it to an empty array from the start as I tend to do. (Figure 2)

The tree control looks like this:

<mx:Tree id="Subject" dataProvider="{subjectHierarchy}" labelField="Subject" showRoot="false" width="300?
height="231? itemClick="selectSubject(event)" />

Tune in for Part 2 (which is a ways out since I am waiting on my company to purchase me a license of Flex Builder 2 now that my trial has expired) where I will show how I created a hybrid dropdown/tree control that provides the convenience of dropdown size and selection display with the hierarchy of a tree control.