Flex 改變樹結點圖標的2種方法介紹

fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默認文件夾圖標*/
folderClosedIcon: Embed(source='resource/region.png');
folderOpenIcon: Embed(source='resource/region.png');
/*去掉葉子節點圖標
defaultLeafIcon: ClassReference(null);
*/
/*
defaultLeafIcon 指定葉圖標
disclosureClosedIcon 指定的圖標旁邊顯示一個封閉的分支節點。默認的圖標是一個黑色三角形。
disclosureOpenIcon 指定的圖標旁邊顯示一個開放的分支節點。默認的圖標是一個黑色三角形。
folderClosedIcon 關閉指定的文件夾圖標的一個分支節點。
folderOpenIcon 指定打開的文件夾圖標的一個分支節點。
例：三角圖標修改如下代碼使用即可換成自己的了：
disclosureOpenIcon:Embed(source='resource/region.png');
disclosureClosedIcon:Embed(source='resource/region.png');
*/
}
/fx:Style>

?xml version="1.0" encoding="utf-8"?>
s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
fx:Script>
![CDATA[
]]>
/fx:Script>
fx:Declarations>
!-- 將非可視元素（例如服務、值對象）放在此處 -->
fx:XML id="treeData">
root>
node label="CI配置項" iconName="computer.png">
node label="資源" iconName="computer.png">
node label="硬件資源" iconName="computer.png">
node label="硬件設備" iconName="computer.png">
/node>
node label="硬件模塊" iconName="computer.png">
node label="端口" iconName="computer.png">
/node>
/node>
/node>
/node>
/node>
node label="字典" iconName="dictionary.png">
/node>
/root>
/fx:XML>
/fx:Declarations>
mx:Tree left="5" top="5" bottom="5" width="150" dataProvider="{treeData}"
id="myTree"
showRoot="false"
labelField="@label"
itemRenderer="com.flex.tree.dynamicicontree.IconTreeRenderer">
/mx:Tree>
/s:Application>
package com.flex.tree.dynamicicontree
{
import flash.xml.*;
import mx.collections.*;
import mx.controls.Image;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
import mx.styles.StyleManager;
/*
* ICON Tree的渲染器
*/
public class IconTreeRenderer extends TreeItemRenderer
{
protected var myImage:ImageRenderer;
private var imageWidth:Number = 16;
private var imageHeight:Number = 16;
private static var defaultImg:String = "windows.png";
public function IconTreeRenderer ()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
myImage = new ImageRenderer();
myImage.source = defaultImg;
myImage.width=imageWidth;
myImage.height=imageHeight;
myImage.setStyle( "verticalAlign", "middle" );
addChild(myImage);
}
//通過覆蓋data方法來動態設置tree的節點圖標
override public function set data(value:Object):void
{
super.data = value;
var imageSource:String=value.@iconName.toString();
if(imageSource!="")
{
myImage.source=imageSource;
}else{
myImage.source=defaultImg;
}
}
//隱藏原有圖標，并設置它的坐標
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data !=null)
{
if (super.icon != null)
{
myImage.x = super.icon.x;
myImage.y = 2;
super.icon.visible=false;
}
else
{
myImage.x = super.label.x;
myImage.y = 2;
super.label.x = myImage.x + myImage.width + 17;
}
}
}
}
}
package com.flex.tree.dynamicicontree
{
import mx.controls.Image;
public class ImageRenderer extends Image
{
private var defaultURL:String = "assets/icon/";
public var iconName:String;
public function ImageRenderer()
{
super();
}
override public function set source(url:Object):void{
super.source = defaultURL + url;
iconName = url as String;
}
}
}