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>
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?