Layout components-Flash Builder 4-Part-1

December 10th, 2010 by aabhaanjan


For adobe certifications  we are designing a tutorial series hope this will help many developers.

We are Starting from the Flash Builder. When you are preparing for an adobe certification keep in your mind that they will ask you

the most basic questions. We are writing these tutorials on the basis of our research on these certifications  and experiences.

Layout Comonents:


BorderContainer :

Boarder container is one of the Spark container extends for SkinnableContainer class.

We can change its appearance using the a set of CSS styles and class properties to control provided by the component.

the BorderContainer has the following styles and default values:

backgroundImage = “undefined”

backgroundImageFillMode = “scale”

borderAlpha = “1.0”

borderColor = “0xB7BABC”

borderStyle = “solid”

borderVisible = “true”

borderWeight = “1”

cornerRadius = “0”

dropShadowVisible = “false”

Example :


<?xml version=”1.0″ encoding=”utf-8″?>

<s:Application xmlns:fx=”″


xmlns:mx=”library://” minWidth=”955″ minHeight=”600″>


<!– Place non-visual elements (e.g., services, value objects) here –>


<s:BorderContainer x=”336″ y=”180″ width=”200″ height=”200″ backgroundColor=”#401E1E”>




DataGroup :

Mostly DataGroup is used to create sets of objects based on the contents of a collection

For example : 1.ArrayCollection

2. XMLListCollection,

3. ICollectionView implementation

And the best part is it support virtualized data layouts. Data virtualization works in a great manner for

Memory optimization.

Example :


<s:DataGroup itemRenderer=“ProductsRenderer” dataProvider=“{productData}” rollOverColor=“0xFFCC00”>


<s:VerticalLayout horizontalAlign=“center”/>




Form :

This is basically for creating a Form something like an input form. It is a mx



<s:Panel width=”250″ height=”150″ title=”Login” horizontalCenter=”0″ verticalCenter=”0″>

<mx:Form width=”100%” height=”100%” left=”0″ top=”0″>

<mx:FormItem label=”Username”>

<s:TextInput id=”Username”/>


<mx:FormItem label=”Password”>




<s:Button label=”Login”/>





Group :

Group is a required skin part.


<?xml version=”1.0″ encoding=”utf-8″?>





width=”400″ height=”300″>

<s:Group id=”contentGroup” left=”0″ right=”0″ top=”0″ bottom=”0″>







Tags: , , , , , , , , , , , , , , , , , ,