Posts Tagged ‘Flash Builder’

Layout Object type in Flash Builder or Flex 4

January 14th, 2011 by aabhaanjan

flex_cert3

Lets move to the Layout section.

The Basic Layout provides

1. Absolute positioning.

2. You need to record specific x,y position of each element of the layout.

<s:layout>

<s:BasicLayout/>

</s:layout>

In HorizontalLayout :

1. Children are arranged in a row.

2. Each child positioned to the right of previous one.

<s:layout>

<s:HorizontalLayout/>

</s:layout>

In VerticalLayout :

1. Children are arranged in a Column.

2. Each child positioned to the below of previous one.

<s:layout>

<s:VerticalLayout/>

</s:layout>

In TileLayout :

1. Children are arranged in row and Column necessary.

2. we can specify items positioning(horizontally or vertically )

before beginning of row and Column.

<s:layout>

<s:TileLayout/>

</s:layout>

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

Layout components-Flash Builder 4-Part-1

December 10th, 2010 by aabhaanjan

flex_cert

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:

Layout_components_flash_builder

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]

<?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:Declarations>

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

</fx:Declarations>

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

</s:BorderContainer>

</s:Application>

[/xml]

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 :

[xml]

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

<s:layout>

<s:VerticalLayout horizontalAlign=“center”/>

</s:layout>

</s:DataGroup>

[/xml]

Form :

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

Component.

[xml]

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

<mx:FormItem label=”Password”>

<s:TextInput/>

</mx:FormItem>

<mx:FormItem>

<s:Button label=”Login”/>

</mx:FormItem>

</mx:Form>

</s:Panel>

[/xml]

Group :

Group is a required skin part.

[xml]

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

<s:Skin

xmlns:fx=”http://ns.adobe.com/mxml/2009″

xmlns:s=”library://ns.adobe.com/flex/spark”

xmlns:mx=”library://ns.adobe.com/flex/halo”

width=”400″ height=”300″>

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

<s:layout>

<s:BasicLayout/>

</s:layout>

</s:Group>

</s:Skin

[/xml]

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