Introduction to 2 methods of Flex Changing tree node icon

This article introduces two methods to change the tree node icon: According to whether there are child nodes to change, according to the properties of the node, flexible change icon, the specific implementation of the following, interested friends can refer to ha, I hope to help you

Method One: Depending on whether there are child nodes to change

Copy Code code as follows:


<fx:Style>


@namespace S "Library://ns.adobe.com/flex/spark";


@namespace mx "library://ns.adobe.com/flex/mx";


mx| tree{


/* Remove default folder icon * *


folderclosedicon:embed (source= ' resource/region.png ');


folderopenicon:embed (source= ' resource/region.png ');


/* Remove leaf node icon


defaultleaficon:classreference (NULL);


*/


/*


defaultleaficon Specifies the leaf icon

A closed branch node is displayed next to the icon specified by the
Disclosureclosedicon. The default icon is a black triangle.

An open branch node is displayed next to the icon specified by the
Disclosureopenicon. The default icon is a black triangle.


Folderclosedicon closes a branch node of the specified folder icon.


folderopenicon Specifies a branch node of the Open folder icon.


Example: Triangle icon to modify the following code can be replaced by their own:


Disclosureopenicon:embed (source= ' resource/region.png ');


disclosureclosedicon:embed (source= ' resource/region.png ');


*/


}


</fx:Style>

method Two: According to the properties of the node, flexible change Icon

Copy Code code as follows:

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

<fx:Script>


<! [Cdata[


]]>


</fx:Script>


<fx:Declarations>


<!--place non-visual elements (such as services, value objects) here-->


<fx:xml id= "Treedata" >


<root>


<node label= "CI Configuration Items" iconname= "Computer.png" >


<node label= "Resources" iconname= "Computer.png" >


<node label= "Hardware Resources" iconname= "Computer.png" >


<node label= "Hardware Device" iconname= "Computer.png" >


</node>


<node label= "Hardware module" iconname= "Computer.png" >


<node label= "Port" iconname= "Computer.png" >


</node>


</node>


</node>


</node>


</node>


<node label= "dictionary" iconname= "dictionary.png" >


</node>


</root>


</fx:XML>


</fx:Declarations>


<mx:tree left= "5" top= "5" bottom= "5" width= "" 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 renderer


*/


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);


}


///By overwriting the data method to dynamically set the tree node icon


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;


}


}


//Hide the original icon and set its coordinates


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;


}


}


}