Browse: Home / 2010 / Spark Tree

Spark Tree

By on August 26, 2010

Unfortunately Flex 4 does not have Spark Tree and MX Tree has 99 bugs at this moment.

In our project we were in need of Spark-based Tree for some time so inspired by Alex Harui I wrote it:

Download SparkTree4.0.swc for Flex SDK 4.0. and 4.1
Download SparkTree4.5.swc for Flex SDK 4.5 and higher
Download source code

Creating tree item renderers

Tree item renderers should extend TreeItemRenderer. Here is the default item renderer.

License: MIT.

Posted in , , | 140 Responses

140 responses to “Spark Tree”

  1. Wade Mueller August 27, 2010 at 11:45 | Reply

    Very cool, nicely done.

    1. Maxim August 28, 2010 at 16:42 | Reply

      Thank you! :)

  2. Spark Tree – faster, with icons and text colors August 27, 2010 at 16:12 |

    [...] just updated the Spark Tree custom component. Here are the improvements and new [...]

  3. Lots of bug fixes in Spark Tree September 20, 2010 at 17:44 |

    [...] have heavily used the Spark Tree in our project and have fixed plenty of bugs. Feel free to get the updated [...]

  4. Robert Reinhardt October 8, 2010 at 23:19 | Reply

    Very nice indeed! Can you tell me if it’s possible (and how) to make your Tree component open specific branches (i.e. folders) on load? When I refresh the dataProvider, everything collapses. Many thanks in advance!

    1. Maxim October 8, 2010 at 23:52 | Reply

      Does the new dataProvider consist of the old objects or the whole collection is recreated?

  5. Robert Reinhardt October 9, 2010 at 00:28 | Reply

    The whole collection is recreated, but it’s the same items in the dataProvider. Thanks for the quick reply!

    1. Maxim October 9, 2010 at 11:27 | Reply

      Fixed! You can get the new version from http://kachurovskiy.com/f/ria/10/sparkTree/SparkTree.rar , the only changed file is TreeDataProvider.as

  6. Robert Reinhardt October 27, 2010 at 03:02 | Reply

    Can you recommend an approach to create a duplicate tree with the same open branches? Many thanks in advance.

    1. Maxim October 27, 2010 at 15:45 | Reply

      I’ve just updated the http://kachurovskiy.com/f/ria/10/sparkTree/SparkTree.rar , new version introduces ITEM_OPENING, ITEM_OPEN, ITEM_CLOSE events that act the same way as the MX Tree events.

      But if you need just a copy – now you can set the same TreeDataProvider for two trees and they will have their open branch auto-synced:

      var tree1:Tree = new Tree();
var tree2:Tree = new Tree();
var arrayCollection:ArrayCollection = ...;

// 1-st way
tree1.dataProvider = arrayCollection;
tree2.dataProvider = tree1.dataProvider;

// 2-nd way
var treeDataProvider:TreeDataProvider = new TreeDataProvider(arrayCollection);
tree1.dataProvider = treeDataProvider;
tree2.dataProvider = treeDataProvider;
  7. Daniel November 4, 2010 at 15:36 | Reply

    Is there a way to open all nodes when first shown/loaded?

    Many Thanks
    Daniel

    1. Maxim November 4, 2010 at 15:38 | Reply

      No, there is not built-in procedure for that. I suggest you to manually loop through the collection and to call expandItem(item, true) for each item on all levels from to the bottom.

  8. Robert Reinhardt November 7, 2010 at 18:23 | Reply

    Is there any equivalency to the openItems property of the mx:Tree component? I’m looking for the best approach with your Tree component to track which branch nodes the user opens, so that on refresh/relaunch of app, the same nodes can be opened automatically. Many thanks in advance.

    1. Maxim November 7, 2010 at 18:46 | Reply

      Well there is no built-in openItems yet but:
      1. You can watch ITEM_OPEN and ITEM_CLOSE events and calculate it itself
      2. TreeDataProvider has this info in private variable parentObjectsToOpenBranches or smth like that – you can make it accessible since the source is open.

  9. Robert Reinhardt November 9, 2010 at 06:46 | Reply

    I’m having difficulty storing in a local SharedObject the right data to know which branch nodes to open–and I know why: I’m using the Tree’s selectedIndex, which isn’t always going to point to a branch–depending on how other branches are opened or closed. So, using ITEM_OPEN and ITEM_CLOSE, what’s the best way to store and then later re-use for re-initialization branch info? My problem is that I don’t understand the best way to calculate a “branch index” so that regardless of which branches are opened/closed, I can reopen branches without using selectedIndex.

  10. Robert Reinhardt November 9, 2010 at 22:01 | Reply

    Figured it out… All of my branches had unique ids, so I stored the unique ids in my shared object, and on updateComplete, I compare the stored unique id to the uid’s of the new branches and then expand on that new item. Seems to work great!

    1. Maxim November 9, 2010 at 22:55 | Reply

      Sorry that I didn’t answer, just forgot about your previous comment. My little daughter takes all my time :)

  11. Adrien C November 10, 2010 at 11:52 | Reply

    Good work, Thank you !
    What do you think about moving your files to a package (com.kachurovskiy.sparktree ?), and releasing your SparkTree as a swc ?

    1. Maxim November 10, 2010 at 15:11 | Reply

      Thank you for the suggestion, it can simplify the process for people, who need only basic functionality and do not want to mess with the source. Will do.

  12. jacob bullock January 15, 2011 at 22:21 | Reply

    you have any advice on how i could make this tree animate when the branches open / close?

    1. Maxim January 15, 2011 at 22:27 | Reply

      You can add animation in renderer on creation/show but the old good branch animation is not available.

      1. jacob bullock January 15, 2011 at 22:36 | Reply

        so if i have 3 branches and open the second one, there is no way to animate the third branch down, then reveal the children of the second branch?

        1. Maxim January 15, 2011 at 22:38 | Reply

          The layout of renderers is done simply by VerticalLayout. You can create your own layout that will somehow understand that branch is open and do the animation.

  13. Liz February 16, 2011 at 06:50 | Reply

    I’ve implemented a custom item renderer with a multi-line label (vertical layout). I get some odd affects such as the two bottom items in the visiable scroll are tripple the height (but resize when scrolling starts for the first time) and then scrolling calculations seem to go a little whack – the scrollbar jumps up and down when in use. Scroll wheel has no ill effects.

    I did extend the Tree class and manually gave it a layout in the constructor and that seems to fix the two large item height issues but the scrolling still jumps a bit.

    Any idea why this might happen. I also have used multi-line items in List components and the “jump” doesn’t occur during scrolling.

    Thanks!

    1. Liz February 16, 2011 at 07:00 | Reply

      Hmm…I changed the default item renderer of yours to use mulit-line and I don’t seem to get that same issue. I believe it might be my item renderer. I do have my elements wrapped in a BorderContainer which might be causing the issue.

      I think this actually might be a Flex List vs ItemRender bug.

      Thanks anyway for a great component!

  14. smithfox February 26, 2011 at 13:26 | Reply

    Thank your share the great component!

  15. Max March 11, 2011 at 14:01 | Reply

    Looks good! Does this component support drag reordering?

    1. Maxim March 11, 2011 at 14:05 | Reply

      In fact this Tree is just a Spark List. Not sure if Spark List has such feature.

      1. Liz March 13, 2011 at 03:43 | Reply

        Spark lists do! :) I just made an interface with spark re-order and drag and drop (including this tree component) and it works a treat. Haven’t tried the tree re-ordering but I don’t see it should be a problem. All other native spark list functions work well.

  16. harry April 5, 2011 at 14:52 | Reply

    Hi do you know of any possible way i could show the names of the branches in an mx tree? for now, it only displays the icons but the branch names are not given :(

    1. Maxim April 5, 2011 at 14:57 | Reply

      1. Do you use MX Tree or this Spark Tree?
      2. Do you mean item labels by writing “branch names”? If yes, try specifying labelField property for the tree. If your data has label in name property, set labelField="name".

  17. Prem April 14, 2011 at 00:34 | Reply

    Awesome piece of code !

  18. Prem April 15, 2011 at 22:19 | Reply

    Posted a sample of this spark tree with a three state checkbox in the renderer
    http://www.premsweb.com/spark-tree-with-a-three-state-checkbox

    1. Maxim April 15, 2011 at 22:26 | Reply

      Great stuff, thanks for the contribution to the community!

  19. Trist April 21, 2011 at 17:44 | Reply

    Hi, wonderful work, quick question.
    Whats the best way to specify the default icons for each node?

    I notice you have the line in the Tree:

    var mxTreeDeclaration:CSSStyleDeclaration = FlexGlobals.topLevelApplication.styleManager.getStyleDeclaration("mx.controls.Tree");
    ... MX Tree may not be used in the application

    What’s the best way to set the icons/styles for the tree? Is there a ‘switch’ I can use to use the icons specified with your embedded icons embedding, or should I set each one in my own code?

    Thanks

    1. Maxim May 22, 2011 at 20:17 | Reply

      Set the styles (including default icons) just the same way as any other style for any other component. You do not need to mess with the source code for that.

      Possible options are specifying styles in CSS, in MXML or in ActionScript.

  20. Eric May 27, 2011 at 15:30 | Reply

    Hi,
    Is there any way to scroll to a selected children node?
    Thx

    1. Maxim May 27, 2011 at 19:33 | Reply

      Tree is just a Spark List so use the same techniques.
      I’m on mobile and unfortunately can’t elaborate more on this.

  21. Trist June 14, 2011 at 12:14 | Reply

    Hi,
    Is there anyway to implement showRoot?
    Cheers
    Trist

    1. Maxim June 16, 2011 at 23:19 | Reply

      Hi Trist, sorry for the delay. It’s easy to implement showRoot, this logic should be done in Tree.dataProvider setter or in TreeDataProvider constructor. Unfortunatelly I have no time for that due to the tight work schedule.

  22. Brett June 23, 2011 at 04:55 | Reply

    I have been trying to make your tree work on a “lazy load mode” every time you click on a node it makes a service call and returns the childrens, the problems is that when you get your services results back and you assign it to the selected node it does not update the tree…, I just cant figure it out…
    any help would be apreciated. :)

    1. Maxim June 23, 2011 at 10:23 | Reply

      1. Make sure that your children property is bindable `[Bindable]` without custom event – tree can detect changes only in that case
      2. Another way is to create another bindable property and change it when you change children
      3. One more option is calling tree.refreshRenderers() after updating children property,

      P.S: You can listen to itemOpening event, call event.preventDefault(), make service call and call tree.expandItem(...) when data arrives. Make sure not to cancel node expanding on the second time.

      1. smithfox June 30, 2011 at 18:13 | Reply

        Maxim,

        There are some event to tell me a leaf node is selected??

        It seem that the Tree can not fire change event, and has no itemClick too.

        itemOpening only take effect when you try to expand a BRANCH node. :(

        1. smithfox July 1, 2011 at 05:10 | Reply

          It’s my build script issue:

          my build file only include Event metadata, comment the line, use the default setting. Now the tree can fire IndexChangeEvent

  23. Brett June 28, 2011 at 05:11 | Reply

    Thanks, that helped a lot ;) I now am trying to display a current bread crub to the current node selected but when I check the parents on the ItemRenderer is Null… any feed back on this ?

    1. Maxim July 8, 2011 at 16:12 | Reply

      ItemRenderer-s are recycled and there are always some cache of renderers that are out-of-stage.

  24. smithfox June 29, 2011 at 16:33 | Reply

    Please see my blog post: http://www.smithfox.com/?e=85

    I attach the test.mxml there.

    After my research, I found the issue is caused by the Flex SDK4.5.1 ListBase’s Caret.

    So I try to give my solution: http://www.smithfox.com/?e=155

    My SDK is flex_sdk_4.5.1.21328

  25. smithfox July 25, 2011 at 07:41 | Reply

    “Disable the Caret” is a temp solution, there is still more issues.
    Now I give out a full solution, and it has been tested in myself project.

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

    Note: it should be used under flex_sdk_4.5.1.xx

  26. Mark Fuqua August 9, 2011 at 23:23 | Reply

    This may be a silly question, but is this designed to work with multiple columns in a Spark Data Grid? Or just the Tree column?

    Thanks for the release.

    1. Maxim August 10, 2011 at 10:25 | Reply

      Sorry for the unclear descriptions:

      1. Spark Tree extends List and is works like MX Tree
      2. Spark AdvancedDataGrid extends DataGrid and works like MX AdvancedDataGrid

      Both classes are located in SWC called “SparkTree4.5.swc” – the name may be confusing – but you will find them both inside.

      Example of Spark ADG usage: http://kachurovskiy.com/2011/spark-advanceddatagrid/

  27. MikeC August 25, 2011 at 20:12 | Reply

    I’m trying to use the sparkTree but getting a compile error in the Tree class where you override:
    override protected function adjustSelectionAndCaretUponNavigation(event:KeyboardEvent):void
    Specifically, the compiler can’t find:
    mapKeycodeForLayoutDirection(event)

    I’ve looked through UIComponent (is that where the original function lies?), but can’t find it.

    Is this possibly a version issue? I’m using Flex 4 SDK (not yet on 4.5).

    I notice also on one of your issues, that someone has made some changes to that override, back in March, but that is not part of my problem.

    Any feedback is appreciated.

    thanks, Mike

    1. Maxim August 25, 2011 at 20:51 | Reply

      Looks like you are using pre-release version of 4 SDK. Please tell me your full SDK version, it’s located in Flash Builder ZZZ/sdks/4.x.0/flex-sdk-description.xml.

      I’ve got 4.1.0.16076 and it runs smooth.

  28. MikeC August 25, 2011 at 22:19 | Reply

    Thanks for the quick reply Maxim.
    Busted, I have 4.0.0 build 14159 so I may just have a release with an old UIComponent. They do warn us that mx_internal tends to be stuff that changes frequently.
    I’ve been thinking I should upgrade to 4.5 so maybe today’s a good day to do it.
    btw, great work on the tree. I’m trying to integrate it into my Google Docs flex explorer.

    1. Maxim August 25, 2011 at 22:21 | Reply

      adjustSelectionAndCaretUponNavigation is a method of List or ListBase, use Ctrl+Click on method in Flash Builder to see that.

      1. MikeC August 25, 2011 at 22:53 | Reply

        well, the adjustSelection… method is implemented in List, but I think the “mapKeycodeForLayoutDirection”
        method is up the food chain in UIComponent.

        Unfortunately, I can’t link to it from my editor codeAssist because it is not in List, ListBase or UIComponent. that is the reference giving me the error.

        I have seen reference to it in UIComponent in some docs but not in the 4.0.0 SDK at least on my box.

        I think I’ll try an SDK upgrade before going to 4.5 because I’m sure I’ll find a whole raft of issues in 4.5 with my own stuff.

      2. MikeC August 26, 2011 at 00:00 | Reply

        I just updated to 4.1 SDK and it fixed the problem.
        This version of UIComponent does have the key handler which adjusts for layout direction.
        thanks much Maxim.

  29. DenisJ September 1, 2011 at 05:33 | Reply

    Looks good Maxim, apart from TreeDataPpovider.as I can’t see any licence file or specific mention of type of licence. Can you please elaborate and perhaps include a license file

    cheers Denis

    1. Maxim September 1, 2011 at 10:25 | Reply

      Hello Denis, thanks for using Spark Tree. License is MIT.

      1. DenisJ September 1, 2011 at 12:54 | Reply

        Cool. Another question, how do I get the tree item renderer to draw the selected item background for the whole width of the list, as opposed to just the width of the element ?

        1. Maxim September 1, 2011 at 12:56 | Reply

          Specify the list layout horizontalAlign="justify" and set the renderer background width="100%".

          1. DenisJ September 1, 2011 at 13:03 |

            Thanks for your prompt replies. Could you please show how to set the renderer width and also, I’m struggling to set the indent, would love sample code :-)

        2. Maxim September 1, 2011 at 13:13 | Reply

          Renderer width is set by list layout. You just need to align the renderer inner components.

          Use indentation style:

          <sperkTree:Tree ... indentation="30"/>

          or

          tree.setStyle("indentation", 30);

          1. DenisJ September 1, 2011 at 16:20 |

            Thanks, all sorted.

            cheers Denis

  30. DenisJ September 2, 2011 at 04:04 | Reply

    I find the hit area [+] requires the user to need to be too precise with the mouse. I will poke about the code to see if it can be improved, but if you have suggestion to make this bigger then jump in. I think the image size is probably fine, but it would be nice to have an extra few pixels around it that e.g. from the image edge to the top, left & bottom boundary of the renderer

  31. Eric September 2, 2011 at 14:36 | Reply

    Hi,

    I found a bug, when you expand all nodes of a tree populated from XML, and try to close from the root node, there’s an exception.
    I have the same problem with your demo

    1. Maxim September 2, 2011 at 14:40 | Reply

      Hello Eric, thank you for the bug report. Looks like the issue is that XMLListCollection can return different XML instances for two consequent getItemAt(i) calls.

      You can workaround this issue by parsing XML into an ArrayCollection of objects that is the most common approach.

  32. Neal Hudson September 13, 2011 at 14:36 | Reply

    Hi there, first of all – great work, really like the Spark Tree

    Have you tried using it in an mx:HDividedBox? In our application, we have the Spark Tree as a Table of Contents on the left, and on the right the content itself. If you drag the slider left and right the Spark Tree is not getting redrawn.

    Is this a known issue? If not, I’d like to report it
    Thanks
    Neal

    1. Maxim September 14, 2011 at 10:28 | Reply

      Hi Neal,

      It’s not a tree bug. Looks like you’ve got a problem with component layout – make sure that tree has width="100%", tree layout has horizontalAlign="justify" and item renderer content scales to 100% width too.

  33. Neal Hudson September 14, 2011 at 00:05 | Reply

    Hi there,
    Unfortunately, I think we found another bug with Spark Tree. The error occurs when you ALT+TAB out of the AIR Application to another window (in Windows), and ALT+TAB back in. We have the data provider set to an XMLListCollection

    Here is the error generated:
    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at spark.components::Scroller/focusInHandler()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Scroller.as:1273]
    at flash.display::Stage/set focus()
    at mx.core::UIComponent/setFocus()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:9895]
    at mx.managers::FocusManager/activateWindowHandler()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\managers\FocusManager.as:729]
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at mx.core::UIComponent/dispatchEvent()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:13128]
    at spark.components::WindowedApplication/nativeWindow_activateHandler()[E:\dev\4.5.1\frameworks\projects\airspark\src\spark\components\WindowedApplication.as:2739

    1. Maxim September 14, 2011 at 10:30 | Reply

      Neal,

      As you can see, the RTE comes from spark.components::Scroller/focusInHandler() so there’s nothing about tree here. Try googling about this issue.

  34. Neal Hudson September 14, 2011 at 12:46 | Reply

    Apologies Maxim – the second one is not a bug with the tree.

    I’m still fairly sure the first one is though

  35. Vadim Romanenko September 23, 2011 at 18:12 | Reply

    Hi, Maxim!

    Is there any chance to build tree with your component, having this properties:
    - one-column tree (grows from up to down, not from left to right)
    - tree have vertical scroll if tree have too much “rows”
    - tree have horizontal scroll if there too long tree item?

    Thank you for Your answer!

    1. Maxim September 23, 2011 at 18:24 | Reply

      Hello Vadim,

      Thanks for using Spark Tree. As you can see in the sample source code, the layout if Tree is set to TileList. Change it to VerticalLayout with horizontalAlign=”justify” and you’re done.

  36. Vadim Romanenko September 23, 2011 at 19:01 | Reply

    Maxim, thank you for quick answer!

    Please, tell me – where i can see sample source code?

    1. Vadim Romanenko September 26, 2011 at 19:18 | Reply

      Sorry for my question :) For others – to view sources, press right button at example and choose “View source”

  37. Vadim Romanenko September 27, 2011 at 19:04 | Reply

    Hi there, I tried to use your sample code to build my own test project http://ifolder.ru/26041882 .

    When I run this application, i fixed this bugs (or not?):
    - when I open “tc2 – Test2″ node, horizontal scrollbar not added. Only when I clicked twice on “plus” sign, scrollbar was added;
    - when I close “tc2 – Test2″ node, horizontal scrollbar wasn’t removed (all Tree contents are in the box – horiz.scrollbar not needed).

    Please, tell me – what I need to fix to remove such errors?

    Thank you for Your answers!

    1. Maxim September 30, 2011 at 20:06 | Reply

      Thank you for your comments and your patience!

      Looks like that scroll bars issues are caused by HorizontalLayout used in DefaultTreeItemRenderer.mxml.

      To fix this just use your own custom item renderer without HorizontalLayout – use e.g. BasicLayout or manual ActionScript renderer coding. Sorry, have no time to fix this in default renderer by myself.

  38. Rene October 5, 2011 at 14:30 | Reply

    Hi Maxim,

    Is there an easy way to prevent the closing of a branch when the children property is empty. It seems that the ItemClose event is called when i set the children = new array()

    Thanks, Rene

    1. Maxim October 5, 2011 at 14:44 | Reply

      Thank you for using Spark Tree!

      You can prevent branch from closing by adding event listener for itemOpening event. In event handler check that event.opening == false – that would mean that node is about to close.

      After that you can call event.preventDefault(); to cancel closing.

  39. Rene October 5, 2011 at 18:55 | Reply

    Thanks for your anwer!

    One more question. After refreshing the dataprovider, the indentation of the third level is equal to that of the second level. Any idea why that is?

    Thanks again, Rene

    1. Maxim October 5, 2011 at 19:08 | Reply

      Can not reproduce this on http://kachurovskiy.com/f/ria/10/sparkTree/SparkTreeApp.html , looks like the problem is in your code.

      Try checking the custom renderer code.

  40. Norbert October 19, 2011 at 19:42 | Reply

    Hi, could you possibly explain to me how can I use spark-tree with my own dataDescriptor? I already implemented my own data structure representing tree hierarchy and dataDescriptor (extending ITreeDataDescriptor2) which describes it. I already used it successfully with mx:Tree implementation, but this component was extremely buggy. I tried to use my structure with your component, but it complains that dataDescriptor should implement IList interface. Why is that? Is it necessary even when i provided dataDescriptor? Do i need to reimplement my data structure?

    1. Maxim October 19, 2011 at 21:34 | Reply

      Spark Tree is based on Spark List.

      Spark List requires it’s dataProvider to implement IList.

      That’s why you need to implement IList in your dataProvider (not dataDescriptor!) in order to use Spark Tree. It’s a quite small interface and it won’t take long to do that.

      Thank you.

      1. Norbert October 21, 2011 at 18:48 | Reply

        Thank you for your answer :) I implemented IList interface and everything works like a charm. Still I have just one more question: I have my own ItemRenderer wchich support drag & drop operations (using dragEnter, dragDrop and mouseMove events in ItemRenderer). I would like my tree to autoscroll when I drag an item near the end of it. This doesn’t seem to work. I set both dragEnabled and dropEnabled to true. Any ideas how to solve that?

  41. Jeremy October 21, 2011 at 02:26 | Reply

    When I use the defaultLeafIcon property, I get an error –
    1178: Attempted access of inaccessible property defaultLeafIcon through a reference with static type com.sparkTree:Tree.

    I’m passing this as the value: @Embed(‘views/assets/images/icons/database.png’) (in MXML)

    Any ideas?

    1. Maxim October 21, 2011 at 03:09 | Reply

      defaultLeafIcon is a style, use tree.setStyle("defaultLeafIcon", value);

  42. Isambard November 9, 2011 at 19:15 | Reply

    Hi

    Thanks for the component, it is awesome!

    I am trying to implement the dragging of items to inside other items, i.e. turning leafs into nodes. So you would be able to drag an item above a leaf, below it, or onto it in which case the leaf would become a node. Any pointers about how I would go about this would be much appreciated.

    Thanks

    Isambard.

    1. Maxim November 10, 2011 at 21:42 | Reply

      Hi Isambard,

      Thank you for using Spark Tree. You can implement drag and drop the same way it’s usually done for Spark List – use dragEnabled, dropEnabled and dragMoveEnabled.

      There is an issue specific for Spark Tree – if you are moving an open tree folder, you should close it before start dragging since List does not expect that removing one node can remove some other nodes (child nodes of an open folder).

      Another task is to distinguish whether node is dropped between nodes on into one of the nodes.

      All in all I would suggest to checkout the source of Spark Tree and to work closely with it and Spark List source to achieve all that.

      Sorry, don’t have time to give you a complete solution for your task. Good luck!

      1. Isambard November 10, 2011 at 21:50 | Reply

        Hi Maxim

        Thanks for the reply.

        I turned on the drag stuff and then made some tweaks inside dragOverHandler and dragDropHandler in the Tree class which detect if the mouse is over another item, if it is just push the moved node into the children of the data item of the relevant itemRenderer rather than inserting it into the list. Works a treat.

        Thanks

        Isambard.

  43. Didier December 20, 2011 at 15:17 | Reply

    Hi,

    I’m trying to implement your sparktree. I’ve got an object that has a list of another object which in turn has a list of other objects. How do I go ahead with this?

    e.g.: User>Courses>Levels. I want to display the Courses and Levels in a tree. The courses are no problem, the levels on the other hand.

    Thx in advance,

    Didier

  44. Didier December 20, 2011 at 19:49 | Reply

    Hi,

    I can’t see more than one level when I use an itemrenderer based on TreeItemRenderer. Any ideas?

    1. Didier December 20, 2011 at 19:52 | Reply

      Solved :)

  45. Emerson Cardoso January 17, 2012 at 20:22 | Reply

    Hi, I’m using your Tree component and it’s working just fine, but I cannot set it to do word-wrapping with variable row height.

    I’ve already tried to set a VerticalLayout to it, with variableRowHeight=”true” and horizontalAlign=”justify”, but it didn’t work.

    How can I do this with your component?

    1. Maxim January 17, 2012 at 22:10 | Reply

      Word wrapping depends on item renderer. Try specifying custom item renderer that will contain multiline text field with word wrapping.

      Basically any Spark List multiline item renderer should work so Google for that.

      Sorry, don’t have time to elaborate more.

  46. Stefan January 31, 2012 at 13:31 | Reply

    Hi,

    I’m trying to get the SparkTree working with Flex 4.6.
    Could you give me an advice how to do that?

    Many Thanks,
    Stefan

    1. Maxim January 31, 2012 at 20:18 | Reply

      Hi Stefan!

      Thank you for using Spark Tree. Try downloading https://github.com/downloads/kachurovskiy/Spark-Tree/SparkTree4.5.swc . I haven’t tested it with 4.6 yet, need to download new Builder and SDK and it takes a while.

      1. Stefan January 31, 2012 at 20:27 | Reply

        Hi Maxim,

        thanks for your quick answer!
        with the 4.6 sdk I get a run time error:

        VerifyError: Error #1014: Class mx.controls.treeClasses::ITreeDataDescriptor2 could not be found.

        That is strange, the ITreeDataDescriptor2 interface should be included in the 4.6 sdk and there is no compile error.

        Regards,
        Stefan

        1. Maxim January 31, 2012 at 20:46 | Reply

          SDK 4.6 was released a long time ago and this component is quite popular – so I suggest you to check that ITreeDataDescriptor2 is compiled into your app. Try changing SDK linkage or the way you compile your project.

        2. Maxim February 1, 2012 at 10:31 | Reply

          Just tested project with Flex 4.6 and all works well. Please describe the way you build your project if you still have the problem. Thanks!

  47. Ramses February 8, 2012 at 17:21 | Reply

    Hello Maxim,

    I want to use your SparkTree component because it looks good and the mx Tree component is acting up all the time. :)

    But i’m having a problem with showing the data. I only see the top levels and no branches in the tree. I thought i was as simple as giving the objects in the ArrayCollection a property “children” but nothing is showing except for the top levels.

    The objects i use are generated objects from Flash Builder and are retrieved from our backend. This is the same for the objects in the children property. This is a ArrayCollection of generated objects.

    Any idea what the problem might be?

    Thanks in advance!

    1. Maxim February 8, 2012 at 22:21 | Reply

      Hi Ramses! I recently updated the library with some style improvements, you may just not see the open/close icon.

      1. Do you have MX Tree in the project? In this case Spark Tree will use it’s icons
      2. Can you reproduce it on an empty project?

      Thanks.

      1. Ramses February 9, 2012 at 12:39 | Reply

        Hello,

        I figured it out (whats wrong), it is indeed a display problem. I used code to open the branches and then i could see all the leafs.. so it’s just the + sign not showing up.

        I did not have the mx tree component in my project, but the problem is that i’m using modules that are loaded on runtime.
        The component works perfectly when i use it in my main application, but not in the modules.
        But i cannot reproduce it in an empty project so far. I’m using altered modules and load them via a class that handles everything (loading/displaying/removing/..) for my modules. I will keep trying to reproduce it!

        1. Maxim February 9, 2012 at 12:45 | Reply

          I suggest you to download source code from https://github.com/kachurovskiy/Spark-Tree , create library project from it and use as dependency to build your project. Then place breakpoint in Tree.preinitializeHandler(), you’ll see how styles are handled in your module’s tree.

  48. Prem February 23, 2012 at 23:55 | Reply

    Hi Maxim,
    I am trying to filter the dataprovider of the Tree. Basically I am doing a custom filter function on a multi level tree data provider and then want to refresh the tree while maintaining the open nodes that match the filter.

    Problem Number 1: invalidateDisplayList() does not refresh the tree only reassigning the dataProvider does

    Problem Number 2: reassigning the dataProvider causes all the nodes to go into the original collapse state !

    Any suggestions ?

    Thank you much,
    Prem

    1. Maxim February 24, 2012 at 04:56 | Reply

      Hi Prem!

      1. invalidateDisplayList() is not supposed to refresh tree. It’s invalidating visual appearance of component (size, borders, etc.) and does not affect item renderers refresh.

      2. Please apply filtering to the original collection, not to tree.dataProvider. Here is the correct code:

      var collection:ArrayCollection = ...
tree.dataProvider = collection;
trace(tree.dataProvider == collection); // false
collection.filterFunction = ...
  49. Prem February 24, 2012 at 19:18 | Reply

    I am not filtering the dataprovider , I am filtering the original correction that has been assigned to tree.dataprovider using a method similar to this article since I dont want to filter the parents with the filter criteria http://www.kalengibbons.com/blog/index.php/2009/01/filtering-a-flex-tree-using-an-arraycollection/

    Whenever the search text changes in a text input I recursively filter the children of the collection and then refresh the collection but that does not reflect on the tree.

    Am I missing something ?

    1. Maxim February 24, 2012 at 21:05 | Reply

      The code at the link you provided is not accurate but anyway Spark Tree should work in this case if I pretend it to be MX Tree replacement.

      All nodes are closed after filtering because children of each person is replaced with the new collection – so all information about open branches in it is removed.

      You can easily fix it with by using this functions in kalengibbons example:

      private function refreshData():void{
	refreshRecursiveChildren(people[0]);
}
private function refreshRecursiveChildren(person:Person):void{
	if (person.children) {
		for each(var _person:Person in person.children){
			refreshRecursiveChildren(_person);
		}
		person.children.filterFunction = filterData;
		person.children.refresh();
	}
}
  50. Prem February 24, 2012 at 21:28 | Reply

    Thanks Maxim. I guess I was looking for a quick fix to an urgent problem. Could you please tell me what you found wrong in the code?

    I followed your advice and got it working. Should have looked at the code a little better, I have a custom implementation of your tree ( like the sample i posted a while back http://www.premsweb.com/spark-tree-with-a-three-state-checkbox ) but a little more complex and wanted to implement this quick .

    Anyway , thank you again for your help and the great spark tree :)

  51. Adnan Doric March 1, 2012 at 18:23 | Reply

    Hi,
    Very nice component!

    There is a bug that can be reproduced in your own demo:

    1. Click “+” to expand the “parent Element 0″
    2. Drag the “child Element 2″, just before “child Element 0″
    3. Bug: “child Element 2″ is kicked out of “parent Element 0″
    1. Maxim March 1, 2012 at 21:43 | Reply

      I haven’t updated the example for a while. We were fixing some local drag issues on GitHub. Can you reproduce this with the latest SWC from GitHub?

      1. Adnan Doric March 1, 2012 at 21:49 | Reply

        Yes I reproduced it in my project with latest SWC from Git then I came here and tested in your demo: same bug :)
        I am not really affected but just wanted you to know.

        1. Maxim March 1, 2012 at 22:48 | Reply

          Yeah, you’re right.

          I’ve been trying to ignore those local drag problems but apparently I have to start fixing them at last :) There’s a closed issue about local drag with another issue described in last comment – https://github.com/kachurovskiy/Spark-Tree/issues/6

          There’s another huge issue about multiple local drag of open parent node – it should generally fail because List doesn’t expect one node removal to cause another nodes removal.

          P.S.: If you have an idea how to fix at least one of this local drag issues – pull requests are always welcome on https://github.com/kachurovskiy/Spark-Tree !

  52. Keith March 25, 2012 at 19:01 | Reply

    Maxim,

    Your component saved my project!
    One minor suggestion (so it can be embedded in mobile applications): in file DefaultDisclosureButtom.mxml, there is a component. If you change it to it works also in mobile, otherwise you get a packaging error.
    Thank you for the great work!!!!

  53. Keith March 26, 2012 at 03:26 | Reply

    Hi Maxim,

    In my previous comment, I meant to say that there is a mx:Image component that may be worth changing to s:Image. Unfortunately, I wrote them as xml tags without formatting them as code, so they don’t show.

  54. jessewk April 11, 2012 at 21:40 | Reply

    To make SparkTree work with remote data (list classes that throw itemPending errors):

    • Change all index based branch references in TreeDataProvider to use getItemAt(), e.g branch[i] becomes branch.getItemAt(i). You should really always use the getItemAt() accessor for IList classes.
    • Your remote list class must implement ICollectionView (required by the getChildren() method of DefaultDataDescriptor). I just extended the built-in AsyncListView to AsyncListCollectionView and didn’t bother to implement the actual functionality. I just throw errors in all the ICollectionView specific methods.
    • Use a custom data descriptor class and override isBranch(), hasChildren(), and getChildren(). Your child property should be an instance of your remote collection class, AsyncListCollectionView in my case.
    • I used James Ward’s PagedList class (http://www.jamesward.com/2010/10/11/data-paging-in-flex-4/). In the getItemAt() function I had to add a null check in addition to the undefined check.
    • Depending on your model implementation, you may want to provide a ‘typicalItem’ that doesn’t have children so that itemPending errors won’t be thrown during default layout.

    Once it’s working, usage is simple:

    <fx:Declarations>
  <collections:PagedList id="pagedData"
    loadItemsFunction="loadItems" length="0"/>
</fx:Declarations>
	
<sparkTree:Tree labelField="label" typicalItem="{typicalNode}">
  <sparkTree:dataProvider>
    <collections:AsyncListCollectionView list="{pagedData}"
      createPendingItemFunction="{createPendingItem}"
      createFailedItemFunction="{createFailedItem}" />	
  </sparkTree:dataProvider>
  <sparkTree:dataDescriptor>
    <support:NodeDescriptor />
  </sparkTree:dataDescriptor>
</sparkTree:Tree>

    Hopefully that saves somebody a day of their life. I already paid that bounty…

    1. Maxim April 11, 2012 at 21:51 | Reply

      Thank you for this great contribution! I already changed all [i] to getItemAt(i) – https://github.com/kachurovskiy/Spark-Tree/blob/FlexSDK4.5/src/com/sparkTree/TreeDataProvider.as

      It would be great if you could provide a working sample project. Spark Tree is a very popular component and it will help many Flex developers. I would also be more than happy to recommend your work in a new post.

  55. Evan April 19, 2012 at 17:29 | Reply

    Hi Maxim,
    I’m attempting to set a spark VScrollBar skin against the SparkTree control using CSS, but finding that it’s not being recognised. I was thinking that doing this should be ok given SparkTree is based on the spark List control? I was wondering whether you might have any clues at all please?
    My CSS definition is as follows:

    s|List s|VScrollBar sparkTree|Tree {
    skinClass: ClassReference("com.arenaeast.localskins.VScrollBarSkin");
}

    Thanks very much! :)

    1. Maxim April 19, 2012 at 18:44 | Reply

      Hi! Thanks for using Spark Tree. This selector should work:

      sparkTree|Tree s|VScrollBar { ... }
  56. hstR April 27, 2012 at 13:00 | Reply

    Your components seems to be not compatible with the Mobile App developement.
    I met the following error when I tried to compile a Mobile Phone App :
    VerifyError: Error #1014: Class mx.controls.treeClasses::ITreeDataDescriptor2 could not be found.

    I don’t met this problem with AIR & Web Applications.

    Is this normal ?

    1. Maxim April 27, 2012 at 21:35 | Reply

      You can fix it now by loading the source code and removing MX dependencies from the component or wait until I create a separate branch and SWF for this case. Thanks.

      1. hstR May 2, 2012 at 13:28 | Reply

        Hello,

        I’d prefer to wait for your separate branch and SWF for this case. I’m actually a flex-newbie and I didn’t understood your previous explainations, haha.

        Thanks for your work.

      2. hstR May 2, 2012 at 14:37 | Reply

        My mistake. I found how to load the sources but I met some issues when I try to remove the mx dependencies. If you have any advice, please let me know.

        Bye.

        1. Maxim May 3, 2012 at 09:31 | Reply

          According to the doc you have to get rid of mx.controls.* and mx.containers.* packages which comes to replacing ITreeDataDescriptor2.

          The problem is that there is no spark tree data descriptor since there’s no spark tree or advanced grid.

          Solutions:
          1. Copy ITreeDataDescriptor2, DefaultDataDescriptor and related classes to your own package
          2. or replace all calls to ITreeDataDescriptor by replacing them with explicit logic not involving descriptor e.g. descriptor.getChildren(node) to node.children

          1. hstR May 3, 2012 at 17:16 |

            Hello Maxim,

            I have listened your advices and I choosed the first suggested solution. I think my classes are ok now because there is no more errors with my packages.
            Now I met another issue, which is a compiler issue.

            If you’re trying to create a separate branch and SWF, I hope you’ll be luckier than me.

            Thanks for you previous advices and solutions.

            hstR

  57. Sunil Rana May 17, 2012 at 14:34 | Reply

    Hi Maxim,

    As per your solution below
    1. Copy ITreeDataDescriptor2, DefaultDataDescriptor and related classes to your own package

    I have made my spark tree component for mobile.Thank you very much.

    Thanks,
    Sunil Rana

    1. zhd66 June 7, 2012 at 06:51 | Reply

      hi Sunil Rana,
      I Copy ITreeDataDescriptor2, ITreeDataDescriptor, DefaultDataDescriptor, HierarchicalViewCursor, version, HierarchicalCollectionView to src/com/sparktree directory, it can complie ok.
      But when i run it. It has following error info:
      ReferenceError: Error #1065: Variable SampleData_ICON1 is not defined.

      at flash.display::MovieClip/nextFrame()
      at mx.managers::SystemManager/deferredNextFrame()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\SystemManager.as:278]
      at mx.managers::SystemManager/preloader_preloaderDocFrameReadyHandler()[E:\dev\4.y\frameworks\projects\framework\src\mx\managers\SystemManager.as:2627]
      at flash.events::EventDispatcher/dispatchEventFunction()
      at flash.events::EventDispatcher/dispatchEvent()
      at mx.preloaders::Preloader/timerHandler()[E:\dev\4.y\frameworks\projects\framework\src\mx\preloaders\Preloader.as:515]
      at flash.utils::Timer/_timerDispatch()
      at flash.utils::Timer/tick()

      Did you meet it?

      Thanks,
      zhd

      1. zhd66 June 7, 2012 at 07:15 | Reply

        hi all,
        I create a new application and copy all source. And run it well.

        Thanks.
        zhd

    2. John June 13, 2012 at 12:47 | Reply

      Hi

      Where can I get related classes like “ITreeDataDescriptor2″ which are not available on mobile? (I’m new in flex development…)
      Could you share sources of tree view for mobile please?

      Thanks in advance.

      John N.

  58. ZiulDeArgn October 16, 2012 at 23:49 | Reply

    Eric September 2, 2011 at 14:36 | Permalink | Reply

    Hi,

    I found a bug, when you expand all nodes of a tree populated from XML, and try to close from the root node, there’s an exception.
    I have the same problem with your demo

    I have this very same issue, im getting a XML from an HTTPService and i couldnt find a “simple cast” for it, the best i could get was this:
    var arr:ArrayCollection = new ArrayCollection;
    for each (var value:XML in myXML.children())
    arr.addItem(value)
    And folders jump out to another level while exploring em (really weird behavior) =/

    1. Maxim October 16, 2012 at 23:53 | Reply

      It’s a known bug, don’t use XML or XMLList instances as items in tree – just create some custom class to hold item data or use anonymous objects e.g. {title: “Item 1″}

      1. ZiulDeArgon October 17, 2012 at 00:15 | Reply

        got it, imma try with regular Objects, but, can those be used as dataProvider?, i wanna use ur tree to show all dirs and files from some specific folder.

        thnx for the quick response =)

        1. Maxim October 17, 2012 at 00:18 | Reply

          Yes, anonymous objects can be used to show folders.

          P.S.: I would suggest you to create class that will hold item data – see SampleData.as in source view http://kachurovskiy.com/f/ria/10/sparkTree/srcview/index.html

          1. ZiulDeArgon October 17, 2012 at 04:34 |

            Using the class for the data did it, tyvm =)

  59. smival November 1, 2012 at 19:57 | Reply

    1) TypeError: Error #1034: Ошибка типа Coercion: невозможно преобразовать XMLList@8e348b1 в Class.
    at com.sparkTree::Tree/getOwnItemIcon()[C:\W\Flash\SparkTree\src\com\sparkTree\Tree.as:474]

    2) и еще если в примере нажать “Set XML as dataProvider” развернуть все три уровня и потом свернуть верхний то верхние два просто пропадают из видимости, третий остается неизменным.

  60. JTtheGeek November 10, 2012 at 04:15 | Reply

    great work bud! I think I inadvertently discovered a bug in that setting indentation on the tree never makes it too the itemrenderer and just sits at the default value of 17. So far haven’t been able to track down why this is but workin gon it. Put a break on TreeItemRenderer.as line 255
    ~ JT

  61. Zo December 5, 2012 at 07:14 | Reply

    Still get the same problem
    Class mx.controls.treeClasses::ITreeDataDescriptor2 could not be found.
    Under FlexBuilder 4.6

    how to solve the problem ?

  62. Rene April 23, 2013 at 15:06 | Reply

    Hi Maxim,

    If i have chapters with a children property which is an array with documents, how can i delete/remove a document? Removing a document from the children array works, but the tree is not updated visually. Is it a problem that the children property in the chapter is an array? Should it be an arraycollection?

    Thanks, Rene

  63. sam November 8, 2013 at 03:14 | Reply

    Spark tree really works awesome.
    Saved a lot of time.
    the current Adobe Mx:Tree sucks.

    Thanks much

  64. Fabian December 6, 2013 at 20:27 | Reply

    Hey guys,
    I currently have a project where I just want to have a visual representation of the structure of some IVisualElements + Containers inside the SparkTree,
    but having the top most Container (inside an ArrayCollection) added as the Dataprovider to the tree and using the normal Container.addElement Method doesn’t work as expected, in some cases adding a graphical object to a container crashes the whole tree with an Index out of Bounds exception
    what can I do, Ive been working on it for days!

  65. Kunal Sharma December 30, 2013 at 12:41 | Reply

    Hello Maxim,
    I am using your spark tree code. Can you please tell, how I can use Datadescriptor and Itemrenderer in Spark Tree. I changed my code as ItreeDescriptor2 after that it is showing error on “getParent”, “getNodeDepth” & “getHierarchicalCollectionAdaptor”. So, Please help me to know, will it work in Spark tree?,

    Thanks.

Leave a Reply