Home Tutorial Flex Flex4 Components DividedBox Container in Flex4

 
 

Share on Google+Share on Google+
DividedBox Container in Flex4
Posted on: May 29, 2010 at 12:00 AM
Advertisement
The DividedBox container is a MX component. There is no Spark Component. The DividedBox container is used for both horizontal and vertical layout in which the children components are arrange in horizontal and vertical manner respectively.

DividedBox container in Flex4:

The DividedBox container is a MX component. There is no Spark Component.
The DividedBox container is used for both horizontal and vertical layout in which the children components are arrange in horizontal and vertical manner respectively.
You can set the direction property for horizontal and vertical layout. It is similar to a Box container, except the DividedBox container contains a divider between each child component. You can use a mouse to move a divider for resize the component area. The tag of DividedBox Container is <mx:DividedBox>.

In this example you can see that how we can use the DividedBox container as horizontally and vertically.

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"

minWidth="955" minHeight="600">

<fx:Script>

<![CDATA[

private function grid_initialize():void {

grid.dataProvider = [

{aName:'Bikrant', DOB:'01/01/1986',

City:'Delhi', State:'NewDelhi'},

{aName:'Brijesh', DOB:'15/07/1984',

City:'Noida', State:'Uttar Pradesh'},

{aName:'Gaurav', DOB:'27/06/1989',

City:'Mumbai', State:'Maharashtra'}

];

}

]]>

</fx:Script>

<s:Panel title="DividedBox Container Example" width="590" height="393">

<mx:DividedBox direction="horizontal" x="11" y="11">

<mx:Tree id="tree"

width="156" height="100%"

labelField="@label">

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

</mx:Tree>

<mx:DividedBox direction="vertical">

<mx:DataGrid id="grid"

width="100%" height="100%"

initialize="grid_initialize();"

change="txt.text='Name:'+ ' ' +

event.currentTarget.selectedItem.aName

+ '\n' + 'City:'+ ' ' +

event.currentTarget.selectedItem.City

+ '\n' + 'DOB:'+ ' ' +

event.currentTarget.selectedItem.DOB

+ '\n' + 'State:'+ ' ' +

event.currentTarget.selectedItem.State;"/>

<s:TextArea id="txt"

width="100%"

height="40%"

text="Select an item from Table"

textAlign="center"

color="#990000"

fontFamily="verdana"/>

</mx:DividedBox>

</mx:DividedBox>

</s:Panel>

</s:Application>

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 DividedBox Container 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 29, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com