Cool so we have a flex project. Making a UI in flex for a .net application. Just what I love, the flash player and .net. I had to make a wrapper framework which allowed the flex UI to be developed separately to a .Net API. so external interface commands are mapped to a dynamically loaded API dll. was very happy with how this all worked out and it allowed me the room to set standard Exception handleing from .net to be passed to flex for presentation.Wicked

so I am wandering along in flex land all is well ….la la la.. then I find I have to add functionality to the existing tree control. The dark clouds loom in and I begin panicing.

Ok so its not quite that bad but there are a few things to be learnt from where I have gone. If you are going to be developing a flex app that you know will make heavy use of the tree view or will require some extrafunctionailty there are a couple of things that will help you right off the bat.

1. Try your very hardest to own or at least have rights to modify the data source.
2. Make sure you client knows that as soon as they step away from the current functionality there is more time involved in developing thus features.

We had a problem on this project in that the data source (xml) was owned by the .net app. Next we will look at XSLT transforms for the flash input but for now we were stuck. So if your plugging into someone elses server for the xml….consider pulling that xml from their server to yours then to flash. This will allow you to tweak it server side first. 

There are also a few classes to extend when you want to play with the tree, and at first it seems a little overwhelming, but press on as it soon becomes clear how things are working, just be sure there are no surprises for your client.

The tree … the one control that by itself can show multidimensional data hierarchiesies (spelling?). It serves the purpose well and is understood by most users. In flex here is how it works (feel free to correct me in the comments).

You place the tree component on the stage which creates an instance of the tree class. mx.control.Tree;
Now its a good idea to check out how the flexteam built the tree and see whats going on under the hood. The source is included ( on my computer: "C:\Program Files\Adobe\Flex Builder 2\Flex SDK 2\frameworks\source\mx\controls\Tree.as" ).  Notice that the class extends List. Well the tree view is really just lots of lists (uh basically) a list for each level. So alot of the functionality is brought from the List class. 

So you set your dataprovider and your away laughing. Opps no hang on I dont want some of those node to display. Well you could try a filter function but you would soon learn that it isnt implemented on the tree control. Bugger. This is where you need to step into creating your own DefaultDataDescriptor. The DefaultDataDescriptor class provides a default implementation for accessing and manipulating data for use in controls such as Tree and Menu. Cool. so now you can override methods in your own class that extends the DefaultDataDescriptor and doo all sorts of funky things with the xml before it reaches the tree.  Dont forget to set it in your tree class though, this.dataDescriptor = new MySuperSpecialDataDescriptor(); You might want to override the getChildren method to show only certain things etc. One cool thing would be to use namespaces in your xml for lanuage support.

I wrote a static TreeFilter class that the DataDescriptor basically asked to filter the xml before sending it onto the tree for display.

Hmm ok so our tree is showing everything right but you want to change the way your nodes look based on the information in the xml?

Well enter the TreeItemRenderer which extends UIComponent. You can create your own that overrides methods in the base class and assign that to the tree as before. What the TreeItemRender does is for each node on the tree, it renders it. Well duh. So buy over-ridding the updateDisplayList method you could make the text bold if that xml node had an attribute bold="true", 

var nodeXML:XML = XML(TreeListData(super.listData).item);
if (nodeXML.attribute("bold") == true){
      setStyle("fontWeight", 'bold');
}

You could really draw anything in here, even other components like buttons etc using the

var indent:Number = TreeListData(super.listData).indent ;

indent to place the buttons at the right place. 

Also if you want to evaluate the nodes on dragging a node around there are a few things youll need to do but ill leave that for another post. 

So if your going to start extending the trees functionality its a good idea to look through the base mx classes first and get your head around whats going on and the variables available to you, then set out on you own tree adventure in flex land. If you get stuck give us a yell and ill see if I can help you out.

Also if you look through the  FlexTeams blog youll see that they are releasing all sorts of goodie components over the next wee while, and seeing the tree is such an important control that is the only one that displays many levels I think its safe to say we will see a few updates around this control.