- Requirements
Prerequisite knowledge Required products Sample files
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

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.
 
Review your tasks for this exercise.
Figure 1. Review your tasks for this exercise.

 
Use 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 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).
See the EmployeeDisplay.mxml component.
Figure 2. See the EmployeeDisplay.mxml component.
  1. Open the ex1_05_starter.mxml file.
  2. Below the UI components comment, look for the Label control and the three instances of the EmployeeDisplay MXML component.
<components:EmployeeDisplay empImage="images/aparker.jpg" empName="Athena Parker" empTitle="Instructional Designer" y="86"/> <components:EmployeeDisplay empImage="images/stucker.jpg" empName="Saul Tucker" empTitle="Senior Hardware Engineer" x="138" y="197"/> <components:EmployeeDisplay empImage="images/sang.jpg" empName="Samuel Ang" empTitle="Vice President of Market Development" x="267" y="307"/>
Note the extra employees comment and the component instances within. You will use these component instances later in this exercise.
 
  1. Run the application.
    Note that the components are displayed diagonally from top left to bottom right (see Figure 3).
     
Run the application and see the components displayed diagonally.
Figure 3. Run the application and see the components displayed diagonally.

 
Adjust the application layout

 

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.
<!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <s:layout> </s:layout>
  1. Within the layout property, change the layout class to the BasicLayout class.
<s:layout> <s:BasicLayout/> </s:layout>
Run the application using the TileLayout class.
Figure 4. Run the application using the TileLayout class.
  1. Return to Flash Builder.
  2. Change the layout from TileLayout to HorizontalLayout.
<s:layout> <s:HorizontalLayout/> </s:layout>
  1. Save the file and run the application.
    Note that the x and y properties of the controls are ignored (see Figure 5).
     
  1. Save the file.
  2. Run the application.
    The application should look identical to Figure 3.
     
  1. Return to Flash Builder.
  2. Within the layout tags, change the layout from BasicLayout to TileLayout.
<s:layout> <s:TileLayout/> </s:layout>
  1. 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).
     
Run the application using the HorizontalLayout class.
Figure 5. Run the application using the HorizontalLayout class.
  1. Return to Flash Builder.
  2. Change the layout to VerticalLayout.
<s:layout> <s:VerticalLayout/> </s:layout>
  1. 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).
     
Run the application to see the components aligned vertically.
Figure 6. Run the application to see the components aligned vertically.
  1. Return to Flash Builder.
  2. To the VerticalLayout tag, add a paddingLeft property with a value of 15 and a paddingTop property with a value of 15.
<s:layout> <s:VerticalLayout paddingLeft="15" paddingTop="15"/> </s:layout>
  1. Save the file and run the application.
    Note the new position of the Label control and the EmployeeDisplay components in the browser.
     

 
Use 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/aparker.jpg" empName="Athena Parker" empTitle="Instructional Designer" y="86"/> <components:EmployeeDisplay empImage="images/stucker.jpg" empName="Saul Tucker" empTitle="Senior Hardware Engineer" x="138" y="197"/> <components:EmployeeDisplay empImage="images/sang.jpg" empName="Samuel Ang" empTitle="Vice President of Market Development" x="267" y="307"/> </s:Group>
  1. To the Group container, add the layout tags with a nested VerticalLayout tag.
<s:Group> <s:layout> <s:VerticalLayout/> </s:layout> ... </s:Group>
  1. Save the file and run the application.
    The employee thumbnails are still displayed vertically (see Figure 7).
     
The EmployeeDisplay components are ordered vertically.
Figure 7. The EmployeeDisplay components are ordered vertically.
  1. Return to Flash Builder.
  2. Change the Group container to a Panel container.
<s:Panel> <s:layout> <s:VerticalLayout/> </s:layout> ... </s:Panel>
  1. 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).
     
Display the employees using a Panel container.
Figure 8. Display the employees using a Panel container.
  1. Return to Flash Builder.
  2. Change the Panel container to a VGroup container.
<s:VGroup> <s:layout> <s:VerticalLayout/> </s:layout> ... </s:VGroup>
<s:VGroup> ... </s:VGroup>
  1. 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).
     
The employees are displayed vertically.
Figure 9. The employees are displayed vertically.
  1. Return to Flash Builder.
  2. Change the VGroup container to an HGroup container.
<s:HGroup> ... </s:HGroup>
  1. Save the file and run the application.
    The employees are ordered horizontally within the application (see Figure 10).
     
Display the employees using an HGroup container.
Figure 10. Display the employees using an HGroup container.

 
Use 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 paddingLeft="15" paddingTop="15"/> </s:layout>
  1. Locate and delete the HGroup container tags from around the EmployeeDisplay component instances.
  2. Locate and delete the opening and closing extra employees comment so the other component instances will be added to the application.
  3. Save the file.
  4. Run the application.
    You should see the title and the EmployeeDisplay instances arranged as shown in Figure 11.
     
View the application using a TileLayout class.
Figure 11. View the application using a TileLayout class.
  1. Return to Flash Builder.
  2. Revert the application's layout class to VerticalLayout.
<s:layout> <s:VerticalLayout paddingLeft="15" paddingTop="15"/> </s:layout>
  1. Nest all twelve instances of the EmployeeDisplay component within a Group container. Ensure the Label control is not included in the group.
<s:Label x="15" y="15" width="520" height="40" text="Employee Portal: Employee Directory" styleName="titleHeader"/> <s:Group> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> <component:EmployeeDisplay ... /> </s:Group>
  1. 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>
  1. Save the file.
  2. 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).
     
Display the group of employees using the TileLayout class.
Figure 12. Display the group of employees using the TileLayout class.
  1. From the VGroup container, remove the layout tags.
  1. Return to Flash Builder.
  2. To the TileLayout tag, add a paddingTop property with a value of 15.
<s:layout> <s:TileLayout paddingTop="15"/> </s:layout>
  1. Save the file and run the application.
    Note that there is more space between the Label control and the other components (see Figure 13).
     
Adding the paddingTop property to the TileLayout tag adds more spacing between the Label control and the EmployeeDisplay components.
Figure 13. Adding the paddingTop property to the TileLayout tag adds more spacing between the Label control and the EmployeeDisplay components.

 
Use 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 Bitmap Image and Label controls, delete the x and y properties and their values.
<s:BitmapImage source="{empImage}" width="74" height="74"/> <s:Label text="{empName}" fontWeight="bold" textAlign="center" width="120"/> <s:Label text="{empTitle}" textAlign="center" width="120"/>
  1. 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).
     
View the application without a defined layout for the EmployeeDisplay component.
Figure 14. View the application without a defined layout for the EmployeeDisplay component.
  1. Return to Flash Builder.
  2. In the EmployeeDisplay.mxml file, locate the Properties of the parent comment.
  3. Below the comment, create a set of layout tags.
<!-- Properties of the parent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <s:layout> </s:layout>
  1. Within the layout tags, add a VerticalLayout class.
<s:layout> <s:VerticalLayout/> </s:layout>
  1. Save the file and run the application.
    Note that the controls are arranged vertically, but are not centered (see Figure 15).
     
View the application with the VerticalLayout class defined.
Figure 15. View the application with the VerticalLayout class defined.
  1. Return to Flash Builder.
  2. To the VerticalLayout instance, add the horizontalAlign property and set its value to center.
<s:VerticalLayout horizontalAlign="center"/>
  1. Save the file and run the application.
    The BitmapImage controls are now centered within each EmployeeDisplay instance (see Figure 16).
     
The BitmapImage and Label controls of each of the EmployeeDisplay components are now centered properly.
Figure 16. The BitmapImage and Label controls of each of the EmployeeDisplay components are now centered properly.

 
Use the BorderContainer class

 

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.
<s:BorderContainer> <s:Group> <s:layout> <s:TileLayout/> </s:layout> <components:EmployeeDisplay ... /> ... </s:Group> </s:BorderContainer>
  1. 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:
<s:BorderContainer borderColor="#808080" width="500" cornerRadius="5" borderWeight="2">
  1. Save the file and run the application.
    The EmployeeDisplay components are now surrounded with a border (see Figure 17).
     
Run the application to see the border around the EmployeeDisplay components.
Figure 17. Run the application to see the border around the EmployeeDisplay components.

 
Apply scrollbars to an application

 

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.
<s:BorderContainer borderColor="#808080" width="500" cornerRadius="5" borderWeight="2"> <s:Group id="employeeGroup" height="260" width="500"> <s:layout> <s:TileLayout/> </s:layout> ... </s:Group>
  1. At the bottom of the BorderContainer block, between the closing BorderContainer tag and the closing Group container tag, create a Scroller component.
</s:Group> <s:Scroller/> </s:BorderContainer>
  1. To the Scroller component, add the viewport property and bind it to the value of the Group container's id property, employeeGroup.
</s:Group> <s:Scroller viewport="{employeeGroup}"/> </s:BorderContainer>
  1. 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).
     
Run the application to see the scrollbar applied.
Figure 18. Run the application to see the scrollbar applied.
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.
 
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.