Using a Hierarchy of Components to Populate a Flex Tree Control

Object Tree ControlThis post is about creating a flex tree control that uses a component hierarchy as the data provider. It is a little long and WordPress is killing me with their code style so I did my best to make it readable. Nevertheless, it took me about 5 individual attempts to get this post written completely so I hope it is understandable to everyone. Also, I am a beginner Flex 2 developer, so any constructive feedback would be greatly appreciated. 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.

More after the jump…

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. 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 hierarchitical 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. This was working but didn’t seem ideal at all.

The Flex 2 documentation surrounding Hierarchtical Data kept pointing me to the ITreeDataDescriptor interface, 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 propery 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 getter 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

My Flex object looks like this:

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.

The tree control looks like this:
<mx:Tree id=”Subject” dataProvider=”{subjectHierarchy}” labelField=”Subject” showRoot=”false” width=”300″ height=”231″ itemClick=”selectSubject(event)” />

Here is the data:
Tree Data

Here is the result:
Tree Result

Tune in for part 2 (which is a ways out since I am waiting on my company to purchase me a license of Flex 2 Builder now that my trial has expired) where I 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. Screenshots below…

OPEN
Dropdown Tree Control

CLOSED
Closed Dropdown Tree Control

About these ads

18 Responses to Using a Hierarchy of Components to Populate a Flex Tree Control

  1. Tariq Ahmed says:

    Steve, this is great! Top Quality information.

  2. Rick O says:

    Heya, Steve! Long time, compadre.

    Nice article. I haven’t yet been bitten by the Flex bug, but I’ve no doubt that some management weenie will eventually make me start playing around with it. Keep the articles coming so that you can do all the hard stuff for me, ‘k?

    Oh, and don’t listen to Ray. WordPress rocks! (Though I have to admit that 2.0.4 is flakier than any other release I’ve used.)

  3. cyberdust says:

    Rick, nice to hear from you. I stumbled onto your site not too long ago too. Its a great read. Glad to see you are still in the game! Seems like we all kind of went our ways and disappeared for a while. Are you going to be at MAX?

  4. Rick O says:

    Nope, I can’t make MAX. A relative is getting married, and that somehow trumps a geekfest. You were there at MGM a few years back to see Ben in the Cat-n-the-Hat hat, right? Surreal.

  5. nice article. I still prefer XML for this so far. Been populating a tree with ~4000 nodes recently using XML works a treat. Doing that with CFCs would suck. CFC instantiation is expensive.

    DK

  6. Amy says:

    Steve:
    Great, Could I download the zipped files?

    thanks
    amy

  7. cyberdust says:

    Amy,

    I’ll see what I can do. I cleaned out a lot of project specific code for the article. Give me a couple of days and I’ll post a link to it here.

    Steve

  8. hyst says:

    good work.. waiting for the sources…

  9. Luis says:

    Thanks again for trailblazing this. I’m faced with the same problem. Like you I’m new to flex. Any chance you could publish the sources?

    Thanks
    -Luis

  10. karl says:

    This is great! We’d love to see the source code though..there’s a few things I’d like to get my head around that I can’t see here.

    Thanks!
    -Karl

  11. cyberdust says:

    To everyone waiting on the source for this:

    I understand that our Flex Builder licenses are almost here. I want to polish this up a little and then I will release a zip of what I have. Of course it is still a work in progress.

    Thanks for your patience!

    Steve

  12. David Maggard says:

    Any clues on the dropdown tree? Got an app that uses a tree but space is tight, would be nice to drop down when needed.

  13. cyberdust says:

    Hopefully I should have them released this month.

  14. [...] marked Customize to configure it for your use. The SelectTree was designed for use with the CFC object hierarchy that I posted [...]

  15. Jai says:

    This is great stuff. Thanks for sharing.

  16. dieta dunkan says:

    dieta dunkan…

    [...]Using a Hierarchy of Components to Populate a Flex Tree Control « Adventures in eHealth[...]…

  17. “Using a Hierarchy of Components to Populate a Flex Tree Control « Adventures in eHealth” ended up being a good blog post and therefore I really was
    indeed pretty satisfied to read it. Thanks a lot,Devon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: