Components and Layouts

Spark v/s MX components

MX components used to be called "Hallo components", these were included in Flex 3 and each component contains behavior, layout, styles and data.

Spark components are new components in Flex 4 and spark separates behavior, layout, styles and data into different classes.

Spark and MX components can be used together based upon UIComponent design.

There are around 50 MX components and 20 Spark components.

Understanding Components

Components can be classified as -

Controls - UI components like Button, Label, TextInput, DropDownList etc.

Containers - Hold controls and other containers used to layout an application.

Spark Layout classes 

1. Basic Layout - use absolute positioning.

2. Horizontal Layout - lay out children in rows.

3. Vertical Layout - lay out children in columns.

4. Tile Layout - lay out children in rows and columns.

You can also create your own custom layout class.

Will see these 4 layout classes with an example below -

Create a Flex Project as Layouts, open Layouts.mxml file.

Create a Package name it as images and add any four image files(of different dimensions).

Declare a layout for this application as -

<s:layout>
  <s:BasicLayout/>

</s:layout>

Now Layouts.mxml application is on basic layout.

Switch to design mode.

Add four image controls on layout and assign source to there image fields.

Switch to source mode(View Code) -

Run Layouts.mxml application and review your output.

Now we will change layout from basic to horizontal-
<s:layout>

  <s:HorizontalLayout/>

</s:layout>

Run Layouts.mxml application and review your output.

You will see that the height of the row is the height of the tallest child(Image). X and Y values are ignored when you switch from basic to horizontal layout.

Will change layout from horizontal to vertical -
<s:layout>

    <s:VerticalLayout/>

</s:layout>

Run Layouts.mxml application and review your output.

You will see that the width of the column is the width of the widest child(Image).

Will change layout from vertical to tile -
<s:layout>

    <s:TileLayout/>

</s:layout>

Run Layouts.mxml application and review your output.

You will see that the height of the row is the height of the tallest child and the width of the column is the width of the widest child.