by Alex Harui

 Comments (8)

Created

December 21, 2009

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

COMMENTS

  • By Lee Probert - 4:22 AM on February 4, 2010   Reply

    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.

  • By Alex Harui - 9:54 PM on March 9, 2010   Reply

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

  • By Xavier Colomer - 3:56 AM on March 18, 2010   Reply

    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;

  • By Maxim Kachurovskiy - 12:56 PM on August 26, 2010   Reply

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

  • By Daniel - 6:18 AM on December 8, 2010   Reply

    Hi
    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??

    • By Alex Harui - 8:13 AM on December 13, 2010   Reply

      You should be able to use a labelFunction to alter the label for each node.

  • By Billy - 4:39 AM on June 10, 2011   Reply

    Hey,

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

  • By smithfox - 3:35 AM on July 25, 2011   Reply

    another flex4.5.1 spark tree base on http://kachurovskiy.com/2010/spark-tree/

    http://www.smithfox.com/?e=155

ADD A COMMENT