It's here! IKTree v1.0 (beta)
On April 3, 2008, Flash / Flex - 9 CommentsToday I’m releasing the first version of my tree component. This component is a substitute for the build-in tree of flex. Why? Because the build in tree is build on the list classes, which aren’t the most stable classes of flex. My tree is build entirely with UIComponents and VBoxes, no list class used here.
This gives you some advantages, like I mentioned in my previous post ‘Sneak Preview: Custom Tree Component for Flex’:
- Opening and closes is just a case of hiding boxes;
- It’s fast;
- Boxes are reliable, lists are not;
- Variable row height is no problem.
Update 04/03/08 15:59
I’ve uploaded a newer version (1.0.1b), which adds much of the ToDo functionality
This version (1.0.1b) supports:
- Drag ‘n Drop
- Custom Icons
- Lazy Loading
- Custom renderers (item renderer and drop indicator)
- Slightly stylable
- Drag from a component to the tree;
- Create folders on drop;
- Set default renderer automatically;
- Handle width and height as percentages
What the next version(s) need:
- Caching / recycling of children;
- Styles;
- Animations;
- Multiselect
The source is added to the demo as an swc file:
What others have to say:
Very nice, I’m curious how you’ll implement “create folders on drop”, because I’m struggling with that for a while now
Good job! Keep it up.
Well, I’ve added the create folders on drop functionality, which wasn’t too hard. I just check if the data provider has the ‘children’ property, if it has, you append the data to the existing arraycollection, if it hasn’t, you create a new arraycollection and set that arraycollection as children property to the parent. Get it?
First off, thank god you put this together…I’ve been looking for a way to lazy load the child items of a tree only when the user selects that node instead of loading a huge XML at once.
However, I’m having some trouble figuring out how to set up lazy loading with your tree component…any advice or guidance?
Thanks!
First, I want to point out that this is not the newest version of the tree. Actually, this blog isn’t really updated anymore (allthough I will react on comments
).
You can find the latest version of the tree at http://labs.flexperiments.nl/flptree/
Then your problem. The way I handle lazy loading is like this:
When you get your data, you have to know which nodes have children. The tree expects that when a node has the children property (or whatever field you specify to be the children field), that node has children. Each time you open a node, the tree dispatches an open event. In your eventhandler you check if the children field is there, but not filled (so it’s null). If so, you need to get the data (the children) for that node, and add them to your arraycollection. After you added them, call the refresh() method of the arraycollection and the tree should update.
Hope this helps!
Is the source of the demo available? It would be great to see the demo source for example usage.
Looks great..!!
Never mind. I see it when from the source link.
Thanks,
This is great!!
Note that this is the old component. See http://labs.flexperiments.nl/flptree/ for the newest version
Hi,
I really cant figure how to use it in ma existing project. Could you be kind enough to explain how i should go about incorporating this feature into my existing Flex 2 project?
Hi,
You can find more information and documentation at http://labs.flexperiments.nl/
This blog isn’t maintained anymore. Cheers!
I’m not sure if the tree works in Flex 2. I would suggest trying Flex 3
Leave a Reply