Displaying the default icons from a Flex Tree control

By Peter deHaan On November 26, 2007 · 3 Comments

I was looking through the Tree class today and was a little curious about what the disclosureOpenIcon and disclosureClosedIcon styles were, and ended up making the following little sample.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/26/displaying-the-default-icons-from-a-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">
 
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.List;
            import mx.controls.Tree;
 
            private var arrColl:ArrayCollection;
            private var list:List;
            private var tree:Tree;
 
            private function init():void {
                arrColl = new ArrayCollection();
                arrColl.addItem({label:"defaultLeafIcon"});
                arrColl.addItem({label:"disclosureClosedIcon"});
                arrColl.addItem({label:"disclosureOpenIcon"});
                arrColl.addItem({label:"folderClosedIcon"});
                arrColl.addItem({label:"folderOpenIcon"});
 
                tree = new Tree();
                tree.visible = false;
                tree.includeInLayout = false;
                /* Add the Tree to the display list, but hide it. */
                addChild(tree);
 
                list = new List();
                list.dataProvider = arrColl;
                list.rowCount = arrColl.length;
                list.iconFunction = list_iconFunc;
                addChild(list);
            }
 
            private function list_iconFunc(item:Object):Class {
                return tree.getStyle(item.label);
            }
        ]]>
    </mx:Script>
 
</mx:Application>

View source is enabled in the following example.

Sure, the code is more than you really need if all you want is to display a single icon at a time, but I thought it may be a bit easier to just display them all at once in a nice easy to see format. Of course, if you only want to display a single icon, you could use the following snippet:

<!-- Add the Tree to the display list, but hide it. -->
<mx:Tree id="tree" includeInLayout="false" visible="false" />
<mx:Image id="img" source="{tree.getStyle('defaultLeafIcon')}" />

About The Author

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

3 Responses to Displaying the default icons from a Flex Tree control

Rajan says:

January 15, 2009 at 12:10 pm

I have a Tree Control and i am using the
disclosureOpenIcon
disclosureClosedIcon

styles.

But i want to change the location where are the disclosureOpenIcon/
disclosureClosedIcon icons are displayed.

I want to display them after the label of the tree. Bydefault icons are
displayed before the label.

Any pointers are highly appreciated.

Thanks
Rajan

vijender says:

November 1, 2009 at 12:03 am

you have to create the icon in custom class inherited from treeitemrenderer and add this icon.

the code is like this :-

public class CustomTreeItemRenderer extends TreeItemRenderer
	{
		public var imgEdit:Image;
		public var imgDelete:Image;
		public var imgCancel:Image;
		public var imgOk:Image;
		public var imgUnselectedLeaf:Image;
		public var hboximg:HBox;
		private var srcEditImage:String ="Images/Edit.png";
		private var srcCancelImage:String ="Images/Cancel.png";
		private var srcDeleteImage:String ="Images/Delete.png";
		private var srcOkImage:String ="Images/Ok.png";
		private var srcUnselectedLeaf:String="Images/Unselect.png";
		private var ltxtWidth:int;
		private var stxtvalue:String;
		private var objtreeControl:com.crawford.controls.TreeControl;
		public var bEditLeaf:Boolean=false;
		public var bDeleteLeaf:Boolean=false;
		public var bselectLeaf:Boolean=false;
		public var bunselectLeaf:Boolean=false;
		private static var bFromEditEvent:Boolean=false;
 
		public function CustomTreeItemRenderer()
		{		
			if(objtreeControl==null)
			{
				objtreeControl=new com.crawford.controls.TreeControl;
				bEditLeaf=objtreeControl.EditLeaf;
				bDeleteLeaf=objtreeControl.DeleteLeaf;
				bselectLeaf=objtreeControl.selectLeaf;
				bunselectLeaf=objtreeControl.UnselectLeaf;
			}	
		}
 
		// Override the set method for the data property
        // to set the font color and style of each node.        
        override public function set data(value:Object):void 
        {
            super.data = value;
            if(TreeListData(super.listData).hasChildren)
            {
               // setStyle("color", 0xff0000);
 
                setStyle("fontWeight", 'bold');
            }
            else
            {
 
                setStyle("color", 0x000000);
                setStyle("fontWeight", 'normal');                
            }  
        }
 
        // Override the updateDisplayList() method 
        // to set the text for each tree node.      
        override protected function updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void 
        {   
            super.updateDisplayList(unscaledWidth, unscaledHeight);
 
            if(super.data)
            {
                if(TreeListData(super.listData).hasChildren==false)
                {
                    var tmp:XMLList = new XMLList(TreeListData(super.listData).item);
                    var myStr:int = tmp[0].children().length();
 
                    super.label.text=  TreeListData(super.listData).label;
 
                    var lineMetrics:TextLineMetrics = measureText(TreeListData(super.listData).label);
        			ltxtWidth = lineMetrics.width ;
 
                   if(bEditLeaf)
                   {
                     imgEdit.visible=true;
                     imgCancel.visible=true;
                     imgOk.visible=true;
                   }
 
                   if(bDeleteLeaf)
                   {
                   	 imgDelete.visible=true;
                   }                    
 
                    if (super.icon != null)
			       {
					    imgUnselectedLeaf.x = super.icon.x+50;
					    imgUnselectedLeaf.y = 2;
 
					    hboximg.x= super.icon.x+ltxtWidth+50;
				  		hboximg.y=0;
				   }
				   else
			       {
					    imgUnselectedLeaf.x = super.label.x+50;
					    imgUnselectedLeaf.y = 2;
 
					    hboximg.x= super.label.x+ltxtWidth+50;
				  		hboximg.y=0;
				   } 
 
 
 
				    if(bFromEditEvent==false)
				    {
				    	txtEditvalue.visible=false;
				    	hboximg.visible=false;
				    }
				    bFromEditEvent=false;
 
				                }                
            }
        }
 
 
        private function ImageEditing(evt:MouseEvent):void
        {
 
        	hboximg.removeAllChildren();
        	hboximg.addChildAt(imgOk,0);
        	hboximg.addChildAt(imgCancel,1);
 
 
        	imgEdit.visible=false;
        	imgDelete.visible=false;
 
        	imgCancel.visible=true;
        	imgOk.visible=true;
 
        	var lineMetrics:TextLineMetrics = measureText(TreeListData(super.listData).label);
        	ltxtWidth = lineMetrics.width ;
 
        	txtEditvalue.visible=true;
        	txtEditvalue.setFocus();
        	txtEditvalue.height=super.label.height+3;
        	txtEditvalue.width=ltxtWidth+10;
        	txtEditvalue.x=super.label.x;
        	txtEditvalue.y=super.label.y;
        	txtEditvalue.setStyle("borderWidth",3);
        	txtEditvalue.setStyle("borderColor","black");
        	txtEditvalue.text= super.label.text;
        	stxtvalue=super.label.text;   
        	txtEditvalue.visible=true;  
        	hboximg.visible=true;   
        	bFromEditEvent=true;	
        }
 
 
        private function ImageDelete(evt:MouseEvent):void
        {
        	var node:XMLList = new XMLList(TreeListData(super.listData).item);
        	delete node[0];
        }
 
 
        private function onChangeTextValue(evt:KeyboardEvent):void
        {	        	
        	hboximg.visible=true;        	        	
        	if(evt.keyCode==Keyboard.ENTER)
        	{
        		okEnter();
        	}
 
        	if(evt.keyCode==Keyboard.ESCAPE)
        	{
        		cancelEnter();
        	}
        }
 
        private function ImageOk(evt:MouseEvent):void
        {	
        	okEnter();
        }
 
        private function ImageCancel(evt:MouseEvent):void
        {
        	cancelEnter();
        }
 
        private function cancelEnter():void
        {
        	txtEditvalue.visible=false;
        	txtEditvalue.text=stxtvalue;
 
        	hboximg.removeAllChildren();
 
        	hboximg.addChild(imgEdit);
        	if(bDeleteLeaf)
        	{
        		hboximg.addChild(imgDelete);
        		imgDelete.visible=true;
        	}        	
        	imgEdit.visible=true;       	
        }
 
        private function okEnter():void
        {
        	var ltxtWidth:int;
 
        	super.label.text=txtEditvalue.text;
        	TreeListData(super.listData).label=txtEditvalue.text;        	
        	txtEditvalue.visible=false;
 
        	hboximg.removeAllChildren();
 
        	var lineMetrics:TextLineMetrics = measureText(TreeListData(super.listData).label);
        	ltxtWidth = lineMetrics.width ;
 
        	hboximg.addChild(imgEdit);
        	if(bDeleteLeaf)
        	{
        		hboximg.addChild(imgDelete);
        		imgDelete.visible=true;
        	}        	
        	imgEdit.visible=true;
 
 
        	hboximg.x= super.icon.x+ltxtWidth+50;        	
			hboximg.y=0;
        }
 
        private function onImageUnselectedLeaf(evt:Event):void
        {
        	Alert.show("hi");
        }
 
        override protected function createChildren():void
        {
        	super.createChildren();
 
        	if(hboximg==null)
        	{
        		hboximg=new HBox();
        		hboximg.height=16;
        		hboximg.width=100;
        		hboximg.setStyle("horizontalGap",4);
        	}
 
        	if(imgEdit==null)
        	{
        		imgEdit=new Image();
        		imgEdit.source=srcEditImage;
        		imgEdit.height=15;
        		imgEdit.width=15;
        		imgEdit.visible=false;
        		imgEdit.setStyle("verticalAlign", "middle");
        		imgEdit.addEventListener(MouseEvent.CLICK,ImageEditing);										
        	}
 
        	if(imgCancel==null)
        	{
        		imgCancel=new Image();
        		imgCancel.source=srcCancelImage;
        		imgCancel.height=15;
        		imgCancel.width=15;
        		imgCancel.visible=false;
        		imgCancel.setStyle("verticalAlign", "middle");			
        		imgCancel.addEventListener(MouseEvent.CLICK,ImageCancel);							
        	}
 
        	if(imgDelete==null)
        	{
        		imgDelete=new Image();
        		imgDelete.source=srcDeleteImage;
        		imgDelete.height=15;
        		imgDelete.width=15;
        		imgDelete.visible=false;
        		imgDelete.setStyle("verticalAlign", "middle");
        		imgDelete.addEventListener(MouseEvent.CLICK,ImageDelete);										
        	}
 
        	if(imgOk==null)
        	{
        		imgOk=new Image();
        		imgOk.source=srcOkImage;
        		imgOk.height=15;
        		imgOk.width=15;
        		imgOk.visible=false;
        		imgOk.setStyle("verticalAlign", "middle");
        		imgOk.addEventListener(MouseEvent.CLICK,ImageOk);										
        	}
 
        	if(imgUnselectedLeaf==null)
        	{
        		imgUnselectedLeaf=new Image();
        		imgUnselectedLeaf.source=srcUnselectedLeaf;
        		imgUnselectedLeaf.height=15;
        		imgUnselectedLeaf.width=15;
        		imgUnselectedLeaf.visible=false;
        		imgUnselectedLeaf.setStyle("verticalAlign", "middle");
        		imgUnselectedLeaf.addEventListener(MouseEvent.CLICK,onImageUnselectedLeaf);
        	}
 
        	if(txtEditvalue==null)
        	{
        		txtEditvalue=new TextInput();
        		txtEditvalue.visible=true;
        		txtEditvalue.addEventListener(KeyboardEvent.KEY_UP,onChangeTextValue);	
        	}
 
 
        	if(bEditLeaf)
        	{
        		hboximg.addChild(imgEdit);
        	}   
 
        	if(bDeleteLeaf)
        	{     	
        		hboximg.addChild(imgDelete);
        	}
 
        	if(bEditLeaf || bDeleteLeaf)
        	{
        		this.addChild(hboximg);		
        	}
 
        	this.addChild(txtEditvalue);
        	this.addChild(imgUnselectedLeaf);
          }
       }
}

Crsitian says:

August 4, 2009 at 8:08 am

Thanks soooooooooooooooooooo much :D

Very useful!!!

Reply

M	T	W	T	F	S	S
« Oct				Dec »
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30

Just a bunch of Adobe Flex Examples

Displaying the default icons from a Flex Tree control

Peter deHaan

Add Widgets (Content Sidebar)

3 Responses to Displaying the default icons from a Flex Tree control

Leave a Reply Cancel reply

Categories

Articles

Calendar

Meta

Pages

The Latest

Setting the icon placement on a Spark Button control in Flex Hero

More