Flex Examples
The following example shows how you can change the default folder and leaf node icons in a Flex Tree control.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/14/customizing-folder-and-leaf-icons-in-the-flex-tree-control-using-the-folderopenicon-folderclosedicon-and-defaultleaficon-styles/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
[Bindable]
[Embed("assets/folder.png")]
private var myFolderClosedIcon:Class;
[Bindable]
[Embed("assets/folder_page.png")]
private var myFolderOpenIcon:Class;
[Bindable]
[Embed("assets/arrow_right.png")]
private var myDefaultLeafIcon:Class;
]]>
</mx:Script>
<mx:XML id="dp">
<mlb>
<league label="American League">
<division label="East">
<team label="Boston" />
<team label="New York" />
<team label="Toronto" />
<team label="Baltimore" />
<team label="Tampa Bay" />
</division>
<division label="Central">
<team label="Cleveland" />
<team label="Detroit" />
<team label="Minnesota" />
<team label="Chicago" />
<team label="Kansas City" />
</division>
<division label="West">
<team label="Los Angeles" />
<team label="Seattle" />
<team label="Oakland" />
<team label="Texas" />
</division>
</league>
</mlb>
</mx:XML>
<mx:Tree id="TreeProject"
dataProvider="{dp.league}"
labelField="@label"
showRoot="true"
defaultLeafIcon="{myDefaultLeafIcon}"
folderOpenIcon="{myFolderOpenIcon}"
folderClosedIcon="{myFolderClosedIcon}"
width="320"
height="240" />
</mx:Application>
View source is enabled in the following example.
You can also set the defaultLeafIcon, folderClosedIcon, folderOpenIcon styles in a style sheet, as seen in the following snippet:
<mx:Style>
Tree {
defaultLeafIcon: Embed("assets/arrow_right.png");
folderOpenIcon: Embed("assets/folder_page.png");
folderClosedIcon: Embed("assets/folder.png");
}
</mx:Style>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Can you programatically set the folder close/open icons so they take the icon from the xml nodes icon attribute instead?
Gary,
Does something like, “Setting a custom icon field in a Flex Tree control”, work for you?
Peter
Is it possible to use different folder icons within a tree?
It seems I have to use the same icon for all folders. Can I override this behavior programmtically?
- Chris
Yes, this would be a nice feature. I am also searching for a solution.
Is it possible to use different folderOpenIcon’s / folderClosedIcon’s in a tree?
Marcus
Hi there, I’ve also been looking into this, and found a solution on a Google group, using the
iconFunctionproperty:private function setIcons(item:Object):Class { var iconClass:Class; var classType:String = XML(item).attribute("icon"); if(classType!="") return this[classType]; else return null; }ok so that didn’t post the XML!
Thank you so much! Your blog is a rich source during my development!
I created my own setIcons fuction that will enable you to set the icons on branch nodes to be anything you want. In my tree, folders are branching nodes and so are tables (which open to show the columns contained in them). Using the setItemIcon call, you can set both open and closed icons for these nodes.
private function setIcons(item:Object):void { /* the setItemIcon function at the end has 3 elements: item = a reference to the item in the tree iconClosedorLeaf = the icon for a closed branch object or leaf object iconOpen = the icon for an open branch object */ var iconClosedorLeaf:Class; var iconOpen:Class; var classType:String = XML(item).attribute("classType"); iconOpen = null; switch (classType){ case "map": iconClosedorLeaf = mapIcon; break; case "job": iconClosedorLeaf = jobIcon; break; case "table": iconClosedorLeaf = tableIcon; iconOpen = tableOpenIcon; break; case "column": iconClosedorLeaf = columnIcon; break; case "deployedJob": iconClosedorLeaf = deployedJobIcon; break; case "deployedFlow": iconClosedorLeaf = deployedFlowIcon; break; case "folder": iconClosedorLeaf = folderClosedIcon; iconOpen = folderOpenIcon; break; default: iconClosedorLeaf = unknownIcon; break; } CustomTree.setItemIcon(item, iconClosedorLeaf, iconOpen); }Trying to implement the different methods of choosing a custom icon in a tree control, and regardless of whether I browse using the design view/properties, type the “@Embed(source=’…’)” into the tag, or set up a class in actionscript, I get this error at compile time:
Unable to resolve ‘file:///C|/ColdFusion8/wwwroot/images/nav_icon.gif’ for transcoding
Unable to transcode file:///C|/ColdFusion8/wwwroot/images/nav_icon.gif.
what am I missing?
How can I change the image of a Root folder If the leaf/Children is not fine.
how to restrict the leafs of a tree to 5 if there are 20 leafs
hoe to restrict the leafs of a tree to 5 if there are 20 leafs and remaining by scrolling
hello friend i wan to tree lok for my website . and i want to display full folder and files from my domain like
public_html
..
.
..
.
..
.index.php
etc…
ok so if you know then please send me on my email id “rakesh.guest@gmail.com”
thanks..
Hallo,
I use setIcons function by Elizabeth Lyen,
but I have problem when I use Flex 4.0 SDK.
When I use Flex 3 SDK, there is no problem.
But I have to use Flex 4.0 SDK.
Can you help me how to solve this problem?
Thanks,
Jakub
Thanks for an example! very usefull! but i have some question about default folder icons:
i load all data for a tree from XML and folders icons too. but if there is no icon parameter in XML, i have error:
private function setIcons(item:Object):Class {
var iconClass:Class;
var classType:String = tree.selectedItem.@foldicon;
if(classType!=”")
return this[classType];
else
return // HERE i should insert some code with default folder’s icons. any ideas? paint? :)
;
}
HElp HElp Help !!!
Can anyone knows how to add an image at the last of lable in a flex tree leaf…i.e. i want to add icon on right side of label in a tree…???
hi friend am using flex 4.0 version. i need code to customize folder icons in tree. instead of folder sysmbol i need “+” symbol in that. such that wen i press on + symbol it should display inner nodes. hope u do need thank you.