Exercise 1.5: Experimenting with container layouts

You can use layout classes with any Spark container to configure the way Flex components appear on the screen. Figure 1 shows the finished application.

In this exercise you will learn how to:

• Use absolute layout
• Adjust the application layout
• Use Flex layout containers
• Use multiple layouts in an application
• Use a layout class in a custom component
• Use the BorderContainer class
• Apply scrollbars to an application

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 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 view, expand the components folder to reveal the EmployeeDisplay.mxml component (see Figure 2).

5. Open the ex1_05_starter.mxml file.
6. Below the UI components comment, look for the Label control and the three instances of the EmployeeDisplay MXML component.

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

7. Run the application.

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

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

1. Return to Flash Builder.
2. Below the Properties of the parent comment, create a set of layout tags.

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

4. Save the file.
5. Run the application.

   The application should look identical to Figure 3.

6. Return to Flash Builder.
7. Within the layout tags, change the layout from BasicLayout to TileLayout.

8. Save the file and run the application.

   You should see that all the controls, including the Label control, are now arranged using the TileLayout. You should also see that the Employee Portal: Employee Directory label resizes to the height of the components.  (see Figure 6).

9. Return to Flash Builder.
10. Change the layout from TileLayout to HorizontalLayout.

11. Save the file and run the application.

    Note that the x and y properties of the controls are ignored (see Figure 5).

12. Return to Flash Builder.
13. Change the layout to VerticalLayout.

14. Save the file and run the application.

    You should see the components aligned vertically. Notice that the Label control and the components are flush with the left edge of the browser(see Figure 6).

15. Return to Flash Builder.
16. To the VerticalLayout tag, add a paddingLeft property with a value of 15 and a paddingTop property with a value of 15.

17. Save the file and run the application.

    Note the new position of the Label control and the EmployeeDisplay components in the browser.

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.

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

4. Save the file and run the application.

   The employee thumbnails are still displayed vertically (see Figure 7).

5. Return to Flash Builder.
6. Change the Group container to a Panel container.

7. Save the file and run the application.

   The Panel container displays the employees like the Group container, but has the panel look and feel (see Figure 8).

8. Return to Flash Builder.
9. Change the Panel container to a VGroup container.

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

11. Save the file and run the application.

    The employees are now ordered the same way as they were with the Panel and Group containers without using the VerticalLayout class (see Figure 9).

12. Return to Flash Builder.
13. Change the VGroup container to an HGroup container.

14. Save the file and run the application.

    The employees are ordered horizontally within the application (see Figure 10).

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.

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 other component instances will be added to the application.
5. Save the file.
6. Run the application.

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

7. Return to Flash Builder.
8. Revert the application's layout class to VerticalLayout.

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

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

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

    The Group container with the TileLayout class is placed below the Label control. Note that the spacing between the Label controls and the EmployeeDisplay components can be improved (see Figure 12).

13. Return to Flash Builder.
14. To the TileLayout tag, add a paddingTop property with a value of 15.

15. Save the file and run the application.

    Note that there is more space between the Label control and the other components (see Figure 13).

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 Bitmap Image and Label controls, delete the x and y properties and their values.

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 14).

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.

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

9. Save the file and run the application.

   Note that the controls are arranged vertically, but are not centered (see Figure 15).

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

12. Save the file and run the application.

    The BitmapImage controls are now centered within each EmployeeDisplay instance (see Figure 16).

In this section, you will use the Spark BorderContainer class to create a border around the employee images. The BorderContainer container can be used in place of a skin to create a border and background for a component.

1. Return to the ex1_05_starter.mxml file in Flash Builder.
2. In Source mode, surround the Group container that nests the EmployeeDisplay component blocks with a BorderContainer component.

3. To the opening BorderContainer tag, add the borderColor property with a value of #808080,a width property with a value of 500, a cornerRadius property with a value of 5 and a borderWeight property with a value of 2:

4. Save the file and run the application.

   The EmployeeDisplay components are now surrounded with a border (see Figure 17).

In this section, you will use the Scroller component to add scrollbars to the application.

1. Return to the ex1_05_starter.mxml file in Flash Builder.
2. To the Group container that nests the EmployeeDisplay component blocks, add an id property with a value of employeeGroup, a height property of 260 and a width property of 500.

3. At the bottom of the BorderContainer block, between the closing BorderContainer tag and the closing Group container tag, create a Scroller component.

4. To the Scroller component, add the viewport property and bind it to the value of the Group container's id property, employeeGroup.

5. Save the file and run the application.

   The application now has a vertical scrollbar that allows you to scroll the employee list (see Figure 18).

In this exercise you learned how to use Flex layout containers and apply multiple layouts to an application. In the next exercise you will use Flash Builder to create an MXML class and reuse the class to display employee information.