Displaying Tree-like Hierarchical Data in a Spark List

We’re winding up development of Flex 4.0 and the Spark components. As most of you know, we didn’t have time to make Spark equivalents of the MX components. One missing components is Tree.
The MX Tree is based on a List and has a custom dataProvider that flattens the hierarchical data and uses custom renderers that offset their labels to indicate depth of the nodes. One of the reasons there is no Spark Tree is that we’re not quite sure that is the right design for a Tree. Instead, it might have a custom layout that does the offsetting, or it might be better to know how to walk a hierarchy instead of having it flattened for you. Watch for that discussion after Flex 4.0 ships.
In the interim, Flex 4.0 will have a MXTreeItemRenderer class that allows you to create item renderers for MX Tree using the same workflow as creating item renderers for Spark List.
I had some spare cycles recently and decided to see what it would take to re-create the MX Tree pieces in Spark. I got this far in 2 hours. It can only handle XML and doesn’t have open/close effects but because it is based on Spark List, you can customize this Tree the same way you can customize other Spark components. Customizing MX Tree is difficult at times.
There is no guarantee that a Spark Tree will be anything like this mock up. Usual caveats apply. I’m sure there are bugs and missing features, but I’m posting to give folks ideas if they absolutely have to display hierarchical data and need something that Spark makes easier like custom scrollbars.

Run Demo
Download Source

8 Responses to Displaying Tree-like Hierarchical Data in a Spark List

  1. Lee Probert says:

    Hey Alex. I was just going to start looking into this problem. Do you think that a Spark List will be able to handle simultaneous transition effects running as the branches open and close? One of the biggest problems with F3 Tree was the inability to close open branches while opening a new one. I’m hoping Spark can handle this.

  2. Alex Harui says:

    I would think so, especially if you don’t use virtualLayout. Either way, there are far fewer assumptions on the renderers in Spark List.

  3. I had to change a couple of lines to get your component working because the owner it’s not always a List, can be a DataGroup too.
    But this save us a looooot of time
    Great Job! *****
    disclosure.visible = XML(data).children().length() > 0;
    disclosure.selected = XMLLinearIList(owner[“dataProvider”]).openNodes.indexOf(XML(data)) != -1;
    spacer.width = XMLLinearIList(owner[“dataProvider”]).getDepth(XML(data)) * 8;

  4. Here is a more complete Spark Tree component – http://kachurovskiy.com/2010/spark-tree/

  5. Daniel says:

    I want to add some extra functionality to this tree component. I want to display the number of children of a node in the brackets after the label of the node. whether the children are sub folders of any node or files.
    How can I,any help??

  6. Billy says:


    Here’s a second option for a more complete Spark Tree: https://github.com/wasbridge/flex-4-tree