Introduction to 2 methods of Flex Changing tree node icon

Source: Internet
Author: User
Tags xmlns
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;


}


}


}

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.