I've always been a big fan of the column view in the Mac OS X Finder (and earlier on NeXT OS). It's a clear, intuitive way to navigate through hierarchical data, particularly when that data is nested many levels deep. For a while I've been wanting to create a generic Flex component to display data column-style, but I've never managed to set aside the time to do it... until now!
The TreeBrowser component can be used anywhere the standard Tree component can. Like Tree, it supports displaying data from xml and basic nested object stuctures by default, and you can set a custom data descriptor to display any other kind of complex data (more info on data descriptors can be found here). By default it uses the same folder and document icons as Tree, and style settings can be used to set custom icon classes. It also has iconFunction and iconField properties for setting icons on an object-by-object basis. Each column in the component is a standard Flex List, and the style of the columns can be set to customize their appearance.
The TreeBrowser can also optionally display a "details" pane that shows information about the currently selected leaf node of the tree. If enabled, the details pane defaults to a simple two column DataGrid displaying the name and value of each property of the selected object. A custom detailRenderer can be set to show information tailored to a particular kind of object or usage of the TreeBrowser.
Here's a source-enabled example showing usage of the TreeBrowser to navigate XML data. This example also uses the excellent flexmdi framework to demonstrate how TreeBrowser components behave when resized. The three buttons at the top will open windows with or without the details pane, or with a custom detailRenderer.
You can also download the project from our svn repository.
TreeBrowser API Documentation can be found here.
And be sure to let us know if you find any interesting uses for this component...
19 Comments
thank you so much for your contribution to the community! SB
Powerful component. Pretty neat work.
Are u open to doing some consulting work?
I found a bug. If you select some folder in first column, then in second one and then in third you can deselect current selected row in second column by using Ctrl+Click. Then null pointer exception occurs.
Hmm… hadn’t thought about control-clicking. I just updated the code, it should now respond properly when an item is deselected. Thanks for the bug report.
Ctrl+Click is a common issue with list based components. Almost everybody forget about it
Great component! I was looking for exactly something like this.
Any plans to implement changing of the column width how it is done in the Finder?
Thank you a LOT!
Just what we required. The standard tree component in our Flex based CMS was (still is) killing us!
Professional and essential component
I was sitting in front of my Mac, ready to code exactly that component, and I thought, man, what if I can find this out there…
So I found this.
Thank you so much guys!
I have a question though, maybe a stupid one but, anyways… How come it just render the XMLList as a single root XML.
I have a multi-root XMLList binded to it, I swear.
Thanks!
Sweet component man – exactly what I was looking for! Thanks for sharing!
I have been unsuccessful however in getting it to bind to my dataProvider of type ArrayCollection. It’s actually an AC containing multiple ACs. The only thing that shows up is the contents of the first child AC. Any thoughts?
example of my ac:
var dpAC:ArrayCollection = new ArrayCollection();
var fooAC:ArrayCollection = new ArrayCollection( [ someItem, someItem, someItem ... etc. ] );
var nestedAC:ArrayCollection = new ArrayCollection( [ someItem, someItem, someItem ... etc. ] );
var barAC:ArrayCollection = new ArrayCollection( [ nestedAC, someItem, someItem, someItem ... etc. ] );
dpAC.addItem( fooAC );
dpAC.addItem( barAC );
…mxml…
If you have a TreeBrowser and a style set for List alternatingItemColors Flex will fail with an error of:
ArgumentError: Error #2004: One of the parameters is invalid.
at flash.display::Graphics/drawRect()
You can easily reproduce this by editing TreeBrowserList.as and adding the following line to the contructor:
this.setStyle(“alternatingItemColors”,["#FF0000", "#00FF00"]);
The problem is that the height that is passed to List classes drawRowBackground is NaN and Flex does not check for this condition.
I resolved the issue with the following which may or may not be the best solution:
override protected function drawRowBackground(s:Sprite, rowIndex:int, y:Number, height:Number, color:uint, dataIndex:int):void
{
if (!isNaN(height))
super.drawRowBackground(
s,rowIndex,y,height,color,dataIndex);
}
Thanks for making this component available.
Hi, thanks for making this useful component. I found a bug in your source code: NODE_SELECTED in the TreeBrowserEvent class should be be set to “nodeSelected”, instead of “treeBrowserNodeSelected”. At the moment the Treebrowser does not fire the nodeChanged event. Bests
Hey there. Great Component. Do you have any advice where i could start modifying the code, so the new panels slide in and out?
Hi, Great work. thanks for sharing. Is there any way to add child(column) in tree browser dynamically?? I need to load larger tree structure. So i cannot make this in one request. I need to process some requests for sub directory. so i need to add child dynamically.
url is not working to dwnload the source
I want the view source for this component
@Anup,
we are in the process of changing over our svn. all links will be updated within a day or two, please check back soon.
Any suggestions on how to implement a behaviour similar to mx.controls.Tree.expandItem() ? It is a pity you cannot set the current view in a runtime.
Great component anyway!! Thank you for your work.
@ceiks – I had thought about implementing that feature originally, but it turned out to be fairly complicated to do. Just not enough time to devote to enhancing this component… sorry.
Hi
url is not working to dwnload the source
I want the view source for this component
I need it in my project
Thanks