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.
Very cool, nicely done.
Thank you! :)
[...] just updated the Spark Tree custom component. Here are the improvements and new [...]
[...] have heavily used the Spark Tree in our project and have fixed plenty of bugs. Feel free to get the updated [...]
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!
Does the new dataProvider consist of the old objects or the whole collection is recreated?
The whole collection is recreated, but it’s the same items in the dataProvider. Thanks for the quick 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
Can you recommend an approach to create a duplicate tree with the same open branches? Many thanks in advance.
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:
Is there a way to open all nodes when first shown/loaded?
Many Thanks
Daniel
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.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.
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.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.
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!
Sorry that I didn’t answer, just forgot about your previous comment. My little daughter takes all my time :)
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 ?
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.
you have any advice on how i could make this tree animate when the branches open / close?
You can add animation in renderer on creation/show but the old good branch animation is not available.
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?
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.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!
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!
Thank your share the great component!
Looks good! Does this component support drag reordering?
In fact this Tree is just a Spark List. Not sure if Spark List has such feature.
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.
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. 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 inname
property, setlabelField="name"
.Awesome piece of code !
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
Great stuff, thanks for the contribution to the community!
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
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.
Hi,
Is there any way to scroll to a selected children node?
Thx
Tree is just a Spark List so use the same techniques.
I’m on mobile and unfortunately can’t elaborate more on this.
Hi,
Is there anyway to implement showRoot?
Cheers
Trist
Hi Trist, sorry for the delay. It’s easy to implement
showRoot
, this logic should be done inTree.dataProvider
setter or inTreeDataProvider
constructor. Unfortunatelly I have no time for that due to the tight work schedule.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. Make sure that your
children
property is bindable `[Bindable]` without custom event – tree can detect changes only in that case2. 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, callevent.preventDefault()
, make service call and calltree.expandItem(...)
when data arrives. Make sure not to cancel node expanding on the second time.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. :(
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
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 ?
ItemRenderer-s are recycled and there are always some cache of renderers that are out-of-stage.
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
“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
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.
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/
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
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.
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.
adjustSelectionAndCaretUponNavigation
is a method ofList
orListBase
, use Ctrl+Click on method in Flash Builder to see that.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.
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.
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
Hello Denis, thanks for using Spark Tree. License is MIT.
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 ?
Specify the list layout
horizontalAlign="justify"
and set the renderer backgroundwidth="100%"
.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 :-)
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);
Thanks, all sorted.
cheers Denis
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
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
Hello Eric, thank you for the bug report. Looks like the issue is that
XMLListCollection
can return differentXML
instances for two consequentgetItemAt(i)
calls.You can workaround this issue by parsing XML into an ArrayCollection of objects that is the most common approach.
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
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 hashorizontalAlign="justify"
and item renderer content scales to 100% width too.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
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.Apologies Maxim – the second one is not a bug with the tree.
I’m still fairly sure the first one is though
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!
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.
Maxim, thank you for quick answer!
Please, tell me – where i can see sample source code?
Sorry for my question :) For others – to view sources, press right button at example and choose “View source”
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!
Thank you for your comments and your patience!
Looks like that scroll bars issues are caused by
HorizontalLayout
used inDefaultTreeItemRenderer.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.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
Thank you for using Spark Tree!
You can prevent branch from closing by adding event listener for
itemOpening
event. In event handler check thatevent.opening == false
– that would mean that node is about to close.After that you can call
event.preventDefault();
to cancel closing.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
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.
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?
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.
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?
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?
defaultLeafIcon
is a style, usetree.setStyle("defaultLeafIcon", value);
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.
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
anddragMoveEnabled
.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!
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.
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
Hi,
I can’t see more than one level when I use an itemrenderer based on TreeItemRenderer. Any ideas?
Solved :)
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?
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.
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
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.
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
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.
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!
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!
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.
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!
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.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
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: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 ?
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:
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 :)
Hi,
Very nice component!
There is a bug that can be reproduced in your own demo:
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?
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.
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 !
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!!!!
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.
To make SparkTree work with remote data (list classes that throw itemPending errors):
Once it’s working, usage is simple:
Hopefully that saves somebody a day of their life. I already paid that bounty…
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.
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:
Thanks very much! :)
Hi! Thanks for using Spark Tree. This selector should work:
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 ?
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.
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.
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.
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
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
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
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
hi all,
I create a new application and copy all source. And run it well.
Thanks.
zhd
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.
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) =/
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″}
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 =)
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
Using the class for the data did it, tyvm =)
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” развернуть все три уровня и потом свернуть верхний то верхние два просто пропадают из видимости, третий остается неизменным.
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
Still get the same problem
Class mx.controls.treeClasses::ITreeDataDescriptor2 could not be found.
Under FlexBuilder 4.6
how to solve the problem ?
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
Spark tree really works awesome.
Saved a lot of time.
the current Adobe Mx:Tree sucks.
Thanks much
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!
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.