Flex Tree –

The following example demonstrates, displaying elements from an ArrayCollection in a tree structure using the mx:tree component. It also displays the no of children under the parent item of the tree.

The labelFunction has been used in this example not only to display the no of children under the parent, It helps in displaying Items in a tree structure when dynamic data is used ex: XML, Json etc.

      
<?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[
	import mx.collections.ArrayCollection;
	[Bindable] public var ac:ArrayCollection= new ArrayCollection([
		{ name: "Animals", 
         	  children: new ArrayCollection([{name:"dog"},{name:"cat"},
                  {name:"kitten"}])},
		{ name: "Fruits",  
		  children: new ArrayCollection([{name:"orange"},{name:"apple"} 
          ])}
         ]);
			
	private function Tree_labelFunc(item:Object):String {
		var suffix:String = "";
		if (Tree.dataDescriptor.hasChildren(item)) {
			suffix = " (" + item.children.length + ")";
		}
		return item.name+" "+suffix;
	}		
]]>
</fx:Script>
<mx:Tree   id="Tree"
	   labelFunction="{Tree_labelFunc}"
	   dataProvider="{ac}" openItems="1"     
	   openDuration="500" width="100%" height="100%">
</mx:Tree>

</s:Application>


<mx:Tree   id=”contentManagementTree”  itemRenderer=”treeRenderer” defaultLeafIcon=”{leaf}”  labelFunction=”{contentManagementTree_labelFunc}” dataProvider=”{contentmodel.topiclist}” openItems=”1″fontSize=”12″ color=”#0d1b02″ filters=”{textEmboss}”  fontFamily=”Calibri” fontAntiAliasType=”advanced”
contentBackgroundAlpha=”0″ borderAlpha=”0″ selectionColor=”#cbec91″ rollOverColor=”#98b26b”
openDuration=”500″ width=”100%” height=”100%” creationComplete=”contentManagementTree_creationCompleteHandler(event)” itemClick=”contetntMang_itemClickHandler(event)”  >
<!–tree–>
</mx:Tree>

Advertisements

Tags: , ,

About Ajeeth Boaz

I am a freelance photographer you can find my clicks @ www.ajeethboaz.com. I am a Developer by profession, I like sharing my experience through blogs you can find it @ http://blog.ajeethboaz.com/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: