Share on Google+Share on Google+

Flex tree control

In this tutorial you can see how to create Tree controls in flex for hierarchical structure.

Tree Control in Flex:-

The name suggest the behavior of that control, and as you know tree have branches and leafs node that are display in hierarchical structure. The flex Tree controls are also same as it is. Each item of the tree is called a nodes and can be either a leaf or branches. The Leaf are the end point of the tree control because leaf are represent a text label.

In this tutorial you can see how to create a  tree structure in flex. if you're dealing with hierarchical data.

In this tutorial illustrate creation process of the Tree control and process to access the value of the tree control. 


<?xml version="1.0"?>

<mx:Application xmlns:mx="">





import mx.controls.*;

private function changeEvent(event:Event):void {

var Data:String = ""

if ([email protected]) {

Data = [email protected];

}""[email protected] + Data);


private function OpenEvent(event:TreeEvent):void {""[email protected]);




<mx:Panel width="200" height="300" title="Tree Control">

<mx:Tree id="mytree" labelField="@label" showRoot="true" width="100%" height="100%" itemOpen="OpenEvent(event)" change="changeEvent(event)">

<mx:XMLListCollection id="Country">


<folder label="State">

<folder label="Up"/>

<folder label="Rajasthan">

<Dfolder label="Jaipur" />

<Dfolder label="JodhPur" />


<folder label="MP">

<Dfolder label="Bhopal"/>

<Dfolder label="Gwalier" isBranch="true"/>


<folder label="Hariyana"/>

<folder label="Panjab" />







We can create Tree control using <mx:Tree> tag and provide data to create data provider or create <mx:XMLListCollectio> which is provide a XMLList to provide data for Tree control. Tree control have property showRoot which accept boolean value to display full path of the Tree structure  and also use labelField to set label. user can use methods for access the data of that Tree control. you can see some methods to for Tree control.




Posted on: April 2, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.


Advertisement null