Tree Control in Flex4


 

Tree Control in Flex4

The Tree control is used for a hierarchical data which is expandable in tree format. It has a leaf or branch node of the item.

The Tree control is used for a hierarchical data which is expandable in tree format. It has a leaf or branch node of the item.

Tree Control in Flex4:

The Tree control is used for a hierarchical data which is expandable in tree format. It has a leaf or branch node of the item. A leaf item is an end point but the branch node contains leaf nodes or it can be empty. By default the leaf and branch node are represented by file icon and folder icon respectively. The folder icon has a triangle that a user can open to expose children.
The tag of Tree Control is <mx:Tree>.

Example:

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

<fx:Declarations>

<fx:XMLList id="collegedata">

<node label="College">

<node label="History"/>

<node label="About us"/>

<node label="Courses">

<node label="B.Tech.">

<node label="CS"/>

<node label="EC"/>

<node label="EI"/>

<node label="IT"/>

</node>

<node label="MBA">

<node label="Finance"/>

<node label="Marketing"/>

<node label="HR"/>

</node>

<node label="MCA"/>

<node label="B.Pharma."/>

</node>

<node label="Department">

<node label="Computer Science"/>

<node label="Electronics"/>

<node label="Managenent"/>

</node>

0

<node label="Feedback"/>

<node label="Contact us"/>

</node>

1

</fx:XMLList>

</fx:Declarations>

<s:Panel title="Tree Control Example" width="261" height="224">

2

<mx:Tree id="collegetree"

labelField="@label"

showRoot="true"

3

dataProvider="{collegedata}"

x="10" y="11"

height="170"

4

width="239"

focusColor="#E67A7A"

rollOverColor="#010C10"

5

textRollOverColor="#FFFFFF"

textSelectedColor="#063741"

contentBackgroundColor="#BFCD9E"/>

6

</s:Panel>

</s:Application>

In this example you can see how we can use a Tree control in Flex4.

7

Output:

Running Application:

To view this page ensure that Adobe Flash Player version 10.0.0 or greater is installed.

Download this code

Ads