Home Tutorial Flex Flex4 Components Tree Control in Flex4

 
 

Share on Google+Share on Google+
Tree Control in Flex4
Posted on: May 19, 2010 at 12:00 AM
Advertisement
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>

<node label="Feedback"/>

<node label="Contact us"/>

</node>

</fx:XMLList>

</fx:Declarations>

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

<mx:Tree id="collegetree"

labelField="@label"

showRoot="true"

dataProvider="{collegedata}"

x="10" y="11"

height="170"

width="239"

focusColor="#E67A7A"

rollOverColor="#010C10"

textRollOverColor="#FFFFFF"

textSelectedColor="#063741"

contentBackgroundColor="#BFCD9E"/>

</s:Panel>

</s:Application>

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

Output:

Running Application:

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

Download this code

Advertisement

Related Tags for Tree Control in Flex4:


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: May 19, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com