Flex tree control


 

Flex tree control

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

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

0

<folder label="Up"/>

<folder label="Rajasthan">

<Dfolder label="Jaipur" />

1

<Dfolder label="JodhPur" />

</folder>

<folder label="MP">

2

<Dfolder label="Bhopal"/>

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

</folder>

3

<folder label="Hariyana"/>

<folder label="Panjab" />

</folder>

4

</mx:XMLList>

</mx:XMLListCollection>

</mx:Tree>

5

</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.

6

Output:-

Ads