The tree control in Flex is a very complex and somewhat complicated component at first glance, but with further inspection the complexity begins to melt away.

A few ballaches i have had when using Trees are:

  • Automatic horizontal and vertical scrolling
  • Static use of leaf and node icons
  • Dynamic use of leaf and node icons
  • Item event handling

Ballache 1 – Automatic horizontal and vertical scrolling

At first i thought that the Tree control’s lack of horizontal and vertical scrollbars – when content grew to beyond the component’s bounds – was a bug. Then i scolded myself for such heresy. The Flex developers would never leave such a common feature out or release a fucked up version of it. So i did a little research and found this post: http://frishy.blogspot.com/2007/09/autoscrolling-for-flex-tree.html.

Ryan offers a great hack that works almost perfectly, besides for the fact that the labelField gets screwed up and sometimes the text is snipped off a little at the end. At the bottom of the page is a solution:

change maxHorizontalScrollPosition = NaN;

to maxHorizontalScrollPosition = 0;

change maxHorizontalScrollPosition = diffWidth;
to maxHorizontalScrollPosition = diffWidth + 10; …or what ever correction factor you need.

The user-submitted fix in combination with Ryan’s sub-classed AuoSizeTree file will allow you to have the horizontal and vertical scrollbars on “auto” mode.

Ballache 2 – Static use of leaf and node icons

This one is a sinch. All you have to do is use the folderOpenIcon and folderClosedIcon properties of your Tree and embed an image that will act as an icon. Same thing goes for leaves: defaultLeafIcon.

Ballache 3 – Dynamic use of leaf and node icons

This one is a bit more tricky. What you have to do here is define a “class” that will refer to an embedded icon:

[Embed(source='myIcon.png')]

private var myIcons:Class;

You can now use this icon as so (considering that you set the icon property of your Tree component to “@icon”):

treeDataProvider.appendChild(XML(“<testLeaf icon=\”" + getQualifiedClassName(“myIcon”) + \”" label=\”hello\”></testLeaf>));

What this will do is add a child to your Tree’s dataProvider and get the class’ qualified class name and use that as the icon in your leaf.

Ballache 4 – Item event handling

Want to handle click events for your Tree nodes/leaves? No problem! Set the itemClick property of your Tree to execute a function (clickHandler in this instance). When you click an item in a Tree control, it will call a function and pass it an event object of type ListEvent.

private function clickHandler(event:ListEvent):void

{

trace(event.currentTarget.selectedItem);

}

In the example above, the function is finding the selected item in your Tree control and tracing it out. If you’re using XML to define your Tree’s model, it will return an XML object which you can then type as XML. It’s really that simple!

Hope i’ve saved you a ballache or four ;)