Sneak Preview: Custom Tree Component for Flex

On March 27, 2008, Flash / Flex - 2 Comments

That’s right, I was so fed up with the tree component of flex, that I decided to build my own. And to make sure that it will not end up as crappy as the default one, my goal was to make sure no listclass or whatsoever would be used.

ikTree

This version is just an early release, it’s full of bugs, misses lots of features, has no documentation and is not very well designed. Therefore I’m not releasing the source code (yet) (however, you can see the source code of the example).

Features this version include:

  • Basic events (open, close, selectionChange)
  • Custom renderers, as long as you extend the IKTreeItemRenderer class.
  • Lazy loading, just add your data to the children property of the dataprovider
  • Custom icons, you can specify icons in multiple ways:
    • In the dataprovider (you can set an iconfield)
    • As a property of the tree, which accepts urls, objects (containing an folder and ‘normal’ icon url) or an array
  • Drag & Drop (buggy, drag from or to the root is not possible)
    • You can move items, or copy (press the alt key while dragging)

Like I said, I wanted to avoid the list classes, instead it uses VBoxes to do the trick. This has some advantages:

  • 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

The goal of this component is:

Having a reliable tree which is simple to use but powerful enough to do more than just display dummy data. It will support ArrayCollections only, no XML or objects, only ArrayCollections. It will be able to do everything that a normal tree can do, and more.

I will be releasing updated versions in the next couple of weeks / months / years / centuries. If you would like to see features in this tree, just let me know and I will take them in consideration.

Btw, you’ll find the example here.

 Update 04/03/08

First version released, check ‘It’s here! IKTree v1.0 (beta) ‘

Please, let me know what you think of it.

And before I forget, I want to thank <theFactor.e> for giving me the time to develop this component.



What others have to say:

1

GREAT!!!!! Who needs an advanced datagrid?……..I need this Tree!!! Than you can start building your own datagrid :)
Keep up the good work, almost there buddy..

2

Hi,
I like this. Could you please some guidelines or tips to develop a component or provide some useful links.

Thanks

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Submit comment