Share on Google+Share on Google+

Grid Layout Container in Flex4

Advertisement
The Grid Layout Container is a MX container. There is no Spark equivalent. It's like an HTML Table. You can arrange children(Component) in a row and column format.

Grid Layout Container in Flex4:

The Grid Layout Container is a MX container. There is no Spark equivalent.
It's like an HTML Table. You can arrange children(Component) in a row and column format. The height of cells in a row are same but each row can have a different height. You can take many cells in a row and each cell can have a Grid container. The default Horizontal and Vertical alignment of cell is left, Top.
You can use three things for creating a Grid layout container.
1. <mx:Grid> THis is the Grid layout container tag it holds numbar of <mx:GridRow>.
2. <mx:GridRow> It is used for make a row and it holds number of <mx:GridItem>.
3. <mx:GridItem> It is used for make a cell in a row.
You can use the rowSpan and colSpan property for merge rows and columns.

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

<s:Panel title="Grid Layout Container Example" width="342" height="239">

<mx:Grid id="languageGrid"

paddingLeft="20"

paddingTop="20"

width="340"

height="206"

backgroundColor="0x808080">

<mx:GridRow id="row1" height="26">

<mx:GridItem horizontalAlign="center" colSpan="4">

<s:Label text="Language Known" fontFamily="verdhana" fontSize="18"

 fontWeight="bold"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row2">

<mx:GridItem>

<s:TextInput id="txt1" text="First language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk1" label="Read"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk2" label="Write"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk3" label="Speak"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row3">

<mx:GridItem>

<s:TextInput id="txt2" text="Second language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk4" label="Read"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk5" label="Write"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk6" label="Speak"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row4">

<mx:GridItem>

<s:TextInput id="txt3" text="Third language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk7" label="Read"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk8" label="Write"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk9" label="Speak"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row5">

<mx:GridItem>

<s:TextInput id="txt4" text="Fourth language" fontStyle="italic"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk10" label="Read"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk11" label="Write"/>

</mx:GridItem>

<mx:GridItem>

<s:CheckBox id="chk12" label="Speak"/>

</mx:GridItem>

</mx:GridRow>

<mx:GridRow id="row6">

<mx:GridItem colSpan="4" horizontalAlign="right">

<s:Button id="btn" label="Submit"/>

</mx:GridItem>

</mx:GridRow>

</mx:Grid>

</s:Panel>

</s:Application>

In this example you can see how we can use a Grid Layout Container 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

Advertisements

Advertisement

Posted on: May 18, 2010 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial 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.