Displaying the default icons from a Flex Tree control

by Peter deHaan on November 26, 2007

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')}" />

Tagged as: defaultLeafIcon, disclosureClosedIcon, disclosureOpenIcon, folderClosedIcon, folderOpenIcon

{ 3 comments… read them below or add one }

1 Rajan 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

2 vijender 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);
          }
       }
}

3 Crsitian August 4, 2009 at 8:08 am

Thanks soooooooooooooooooooo much :D

Very useful!!!

Displaying the default icons from a Flex Tree control

Pages

Recent Posts

Archives

But wait, there’s more…

Advertising

Displaying the default icons from a Flex Tree control

Pages

Recent Posts

Archives

Blogroll

But wait, there’s more…

Advertising