Layout classes may be used with any Spark container to configure the way Flex components appear on the screen. Your finished application will appear as shown in Figure 1.

Figure 1. Take stock of your tasks in this exercise.

In this exercise, you will learn how to:

• Use absolute layout
• Adjust the application layout
• Use multiple layout containers
• Use multiple layouts

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Download
• Learn more

Sample files:

• ex1_05_starter.zip (ZIP, 20 KB)
• ex1_05_solution.zip (ZIP, 21 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application

Using absolute layout

In this section, you will create and configure a Flex application with an absolute layout.

1. Download the ex1_05_starter.zip file if you haven't done so already, and extract the file ex1_05_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex1_05_starter.fxp file.
4. In the Package Explorer, open the EmployeeDirectory.mxml file.

5. In the Package Explorer view, expand the components folder to reveal the EmployeeDisplay.mxml component (see Figure 2).

   

   Figure 2. See the EmployeeDisplay.mxml component.

6. Open the EmployeeDirectory.mxml file.

7. Below the UI components comment, look for the Label control and the four instances of the EmployeeDisplay MXML component (see Figure 3).

   

   Figure 3. View the custom component instances.

   Note the extra employees comment and the component instances within. You will use these component instances later in this exercise.

8. Run the application.

   Note that the components are displayed diagonally from top-left to bottom-right (see Figure 4).

   

   Figure 4. Run the application.

Adjusting the Layout

In this section you will change the layout of the application to see the differences between layouts.

1. Return to Flash Builder.

2. Below the Properties of parent comment, create a set of layout tags.

   <!-- Properties of the parent
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
   <s:layout>
   
   </s:layout>

3. Within the layout property, change the layout class to the BasicLayout class.

   <s:layout>
       <s:BasicLayout/>
   </s:layout>

4. Save the file.

5. Run the application.

   The application should look identical to Figure 4 (see Figure 5).

   

   Figure 5. Run the application and see there is no change.

6. Return to Flash Builder.

7. Within the Layout tags, change the layout from BasicLayout to TileLayout.

     <s:layout>
         <s:TileLayout/>
     </s:layout>

8. Save the file and run the application.

   You should see that the fields are now arranged using the TileLayout (see Figure 6).

   

   Figure 6. Run the application using the TileLayout class.

9. Return to Flash Builder.

10. Change the layout from TileLayout to HorizontalLayout.

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>

11. Save the file and run the application.

    You should see that the x and y properties of the Label controls are ignored as shown in Figure 7.

    

    Figure 7. Run the application using the HorizontalLayout class.

12. Return to Flash Builder.

13. Change the layout to VerticalLayout.

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

14. Save the file and run the application.

You should see the components aligned vertically as shown in Figure 8.

Figure 8. Run the application to see the components aligned vertically.

Using Flex layout containers

In this section you will use multiple Flex layout containers to change the display of the sample application.

1. Return to Flash Builder.

2. In Source mode, nest the instances of the EmployeeDisplay MXML component within a Group container.

   <s:Group>
       
       <components:EmployeeDisplay empImage="images/bvanbrocklin.jpg" 
           empName="Brad VanBrocklin" 
           empTitle="Instructional Designer" y="46"/>
           
       <components:EmployeeDisplay empImage="images/abrilliam.jpg"
           empName="Andrew Brilliam"
           empTitle="Senior Hardware Engineer"
           x="138" y="157"/>
           
       <components:EmployeeDisplay empImage="images/akotter.jpg" 
           empName="Annette Kotter" 
           empTitle="Vice President of Market Development" 
           x="267" y="267"/>
           
       <components:EmployeeDisplay empImage="images/rcrawley.jpg" 
           empName="Rosco Crawley" 
           empTitle="Regional Manager"
           x="413" y="378"/>
    
   </s:Group>

3. To the Group container, add the layout tags with a nested VerticalLayout class tag.

   <s:Group>        
       <s:layout>
          <s:VerticalLayout/>
       </s:layout>
   ...

4. Save the file and run the application.

   You should see the employes are displayed vertically as shown in Figure 9.

   

   Figure 9. See the EmployeeDisplay components are ordered vertically.

5. Return to Flash Builder.

6. Change the Group container to a Panel container.

   <s:Panel>
       <s:layout>
          <s:VerticalLayout/>
       </s:layout>
   ...  
   </s:Panel>

7. Save the file and run the application.

   You should see the Panel container displays the employees like the Group container, but has the panel look and feel (see Figure 10).

   

   Figure 10. Display the employees using a Panel container.

8. Return to Flash Builder.

9. Change the Panel container to a VGroup container.

   <s:VGroup>
       <s:layout>
          <s:VerticalLayout/>
       </s:layout>
   ...  
   </s:VGroup>

10. From the VGroup container, remove the layout tags.

    <s:VGroup>
    ...  
    </s:VGroup>

11. Save the file and run the application.

    You should see the employees are ordered the same way as they were with the Panel and Group containers without using the VerticalLayout class (see Figure 11).

    

    Figure 11. See the employees are displayed vertically.

12. Return to Flash Builder.

13. Change the VGroup container to an HGroup container.

    <s:HGroup>
    ...  
    </s:HGroup>

14. Save the file and run the application.

You should see the employees are ordered horizontally within the application as shown in Figure 12.

Figure 12. Display the employees using an HGroup container.

Using multiple layouts in an application

In this section you will use multiple layout tags to organize the application content.

1. Return to Flash Builder.

2. Below the Properties of the parent comment, change the layout property to use the TileLayout class.

   <!-- Properties of the parent
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
   <s:layout>        
       <s:TileLayout />
   </s:layout>

3. Locate and delete the HGroup container tags from around the EmployeeDisplay component instances.
4. Locate and delete the opening and closing extra employees comment so the within component instances will be added to the application.
5. Save the file.

6. Run the application.

   You should see the title and eight EmployeeDisplay instances arranged as shown in Figure 13.

   

   Figure 13. View the application using a TileLayout class.

7. Return to Flash Builder.

8. Revert the application's layout class to VerticalLayout.

   <s:layout>        
       <s:VerticalLayout/>
   </s:layout>

9. Nest all eight instances of the EmployeeDisplay component within a Group container. Ensure the Label control is not included in the group.

   <s:Label x="9" y="9" text="Employee Directory" ... />
    <s:Group>
    
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />
           <component:EmployeeDisplay ... />   
           
    </s:Group>

10. Within the new Group container, use the layout tags to apply the TileLayout class to the container.

    <s:Group>
        <s:layout>
            <s:TileLayout />
        </s:layout>
     ...      
    <s:Group>

11. Save the file.
12. Run the application.

You should see the Group container with the TileLayout class is placed below the Label control as shown in Figure 14.

Figure 14. Display the group of employees using the TileLayout class.

Using a layout class in a custom component

In this section you will organize the controls within the EmployeeDisplay component using a layout class and properties.

1. Return to Flash Builder.
2. From the Package Explorer, open the EmployeeDisplay.mxml file in the components directory.

3. From the Image and Label controls, delete the x and y properties and their values.

   <mx:Image source="{empImage}"/>
       
   <s:Label text="{empName}" 
       fontWeight="bold" 
       textAlign="center" 
       width="120"/>
       
   <s:Label width="120"
       text="{empTitle}"
       textAlign="center" />

4. Save the file and run the application.

   You should see the controls within the EmployeeDisplay component instances are displayed on top of one another (see Figure 15).

   

   Figure 15. View the application without a defined layout for the EmployeeDisplay component.

5. Return to Flash Builder.
6. In the EmployeeDisplay.mxml file, locate the Properties of the parent comment.

7. Below the comment, create a set of layout tags.

   <!-- Properties of the parent
   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       
   <s:layout>
    
   </s:layout>

8. Within the layout tags, add a VerticalLayout class.

   <s:layout>
      <s:VerticalLayout/>
   </s:layout>

9. Save the file and run the application.

   You should see that the controls are arranged vertically, but are not centered as shown in Figure 16. The text controls may appear centered, but that is only because the text controls themselves are set with textAlign="center" properties.

   

   Figure 16. View the application with the VerticalLayout class defined.

10. Return to Flash Builder.

11. To the VerticalLayout instance, add the horizontalAlign property and set its value to center.

    <s:VerticalLayout horizontalAlign="center"/>

12. Save the file and run the application.

You should see the controls are now centered within each EmployeeDisplay instance, as shown in Figure 17.

Figure 17. View the application with the EmployeeDisplay custom component UI controls horizontally centered.

Test your knowledge

In this exercise you learned how to use Flex layout containers and apply multiple layouts to an application.

Which Flex container component can be used to display objects horizontally?

The HGroup container.

Which layout class provides an absolute layout?

The BasicLayout class.

About the author