Tag Archives: minimal-comps

Added TreeList to MinimalComps

I love the MinimalComps set of components, but always thought it was missing a folder type tree component. I finally needed one the other day, and found other tree components that where too bloated, and not “in the spirit” on MinimalComps, so decided to make one myself. +1 for opensource :)

It inherits from the standard MinimalComps List component, so has basically the same interface. It also uses it’s own custom ListItem called TreeListItem. The data object you pass in is almost the same as the List, except each item object can contain and array of its children items, using the key “items”, and you can optionally set an “expanded” flag on any item. Expanded is set to true for each item by default.

[actionscript3]var treeItems:Array = [
{ label:’treelist_test_app’, items:[
{ label:’bin’, expanded:false, items:[
{ label:’js’, items:[
{ label:’swfobject.js’ }
] },
{ label:’expressInstall.swf’ },
{ label:’index.html’ },
{ label:’TreeListTestApp.swf’ }
] },
{ label:’lib’, items:[] },
{ label:’obj’ , items:[
{ label:’TreeListTestAppConfig.old’ },
{ label:’TreeListTestAppConfig.xml’ }
] },
{ label:’src’, items:[] },
{ label:’file_tree_test.as’ },
{ label:’TreeList Test App.as3proj’ },
] }
];[/actionscript3]

Then just create the TreeList like any other component.

[actionscript3]testTree = new TreeList(mainContainer , 0, 0, treeItems);
testTree.setSize(200, 200);
testTree.addEventListener(Event.SELECT, handleTestTreeSelect);[/actionscript3]

Once the component is setup, just handle the SELECT event just like you would with the List

[actionscript3]private function handleTestTreeSelect(e:Event):void
{
trace(‘TreeList select:’, TreeList(e.target).selectedItem.label);
}[/actionscript3]

There are a few new methods to the TreeList, such as collapseAll(), expandAll(), collapseItem(item:Object), expandItem(item:Object), and toggleExpandItem(item:Object). They should all be pretty straight forward. To have a play and see what the TreeList is about, take a look at the quick example I made here : Adam Harte – MinimalComps TreeList test.

You can grab the TreeList and TreeListItem from my fork on GitHub for now (AdamHarte / minimalcomps – GitHub), but I am hoping it will be merged into the main repo soon. I think the TreeList will need a bit of real-world testing, but most of the functionality comes from the List anyway. Feel free to have a play and let me know if there are any bugs.

Cheers,
Adam