Home Tutorial Flex Flex-components Flex tree control

 
 

Share on Google+Share on Google+
Flex tree control
Posted on: April 2, 2010 at 12:00 AM
Advertisement
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. 

Example:-

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

<![CDATA[

import flash.events.*;

import mx.events.*;

import mx.controls.*;

private function changeEvent(event:Event):void {

var Data:String = ""

if (event.currentTarget.selectedItem.@data) {

Data = event.currentTarget.selectedItem.@data;

}

Alert.show(""+event.currentTarget.selectedItem.@label + Data);

}

private function OpenEvent(event:TreeEvent):void {

Alert.show(""+event.item.@label);

}

]]>

</mx:Script>

<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">

<mx:XMLList>

<folder label="State">

<folder label="Up"/>

<folder label="Rajasthan">

<Dfolder label="Jaipur" />

<Dfolder label="JodhPur" />

</folder>

<folder label="MP">

<Dfolder label="Bhopal"/>

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

</folder>

<folder label="Hariyana"/>

<folder label="Panjab" />

</folder>

</mx:XMLList>

</mx:XMLListCollection>

</mx:Tree>

</mx:Panel>

</mx:Application>

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.

Output:-

Advertisement

Related Tags for Flex tree control:


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.

Posted on: April 2, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com