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

 

In this exercise, you will learn how to lay out an application by understanding the relationship between containers and their children. In some instances, you can use the container to give layout directions to the children and, in other instances, the children can give directions to the parent.
 
In the last exercise, you create a static interface using absolute positioning and pixel dimensions. In this exercise, you will create a dynamic interface using percentages and constraints (see Figure 1).
 
Review your task for this exercise.
Figure 1. Review your task for this exercise.
 
In this exercise, you will learn how to:
 

 
Lay out an application with constraints

In this section, you will use Flex layout properties to constain controls to the application edges. As the application size changes, the components will automatically resize.
 
  1. Download the ex4_08_starter.zip file provided in the Exercise files section and extract the ex4_08_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex4_08_starter.fxp file.
  4. Open ex4_08_starter.mxml.
  5. Run the application.
  6. Click the Submit button in the Login Panel container to switch to the portalState view.
  7. Expand the size of your browser.
    You should see that the application is fixed in size (see Figure 2).
     
Run the application to see there are no size constraints.
Figure 2. Run the application to see there are no size constraints.
  1. Return to Flash Builder.
  2. Switch to Design mode.
  3. In the States view, select the portalState.
  4. Select the Monthly Events Panel container
  5. In the Properties view's Size and Position segment, check the bottom constraint and set the value to 15.
    The bottom layout constraint defines the number of pixels from the bottom edge of the component to the bottom of the browser. Notice that the container moved down when you added the constraint (see Figure 3).
The Monthly Events panel shifted downward when a bottom constraint was added.
Figure 3. The Monthly Events panel shifted downward when a bottom constraint was added.
  1. Still in Size and Position segment of the Properties view, delete the Height value.
  2. Check the top constraint on the left side and set its value to 95.
    The top constraint defines the number of pixels from the top edge of the component to the top of the browser. Notice that the container's height changes (see Figure 4).
The Monthly Events panel's height changes when you add a contraint.
Figure 4. The Monthly Events panel's height changes when you add a contraint.
  1. Check the left constraint on the top and set its value to 574 and check the right constraint on the top and set its value to 24.
  2. Save the file and run the application.
  3. Click the Submit button in the Login Panel to switch to the portalState.
  4. Resize your browser.
    Notice that the Monthly Events Panel container resizes with the browser, but the text within the panel does not (see Figure 5).
The text within the Panel container does not resize with the browser.
Figure 5. The text within the Panel container does not resize with the browser.
  1. Return to Flash Builder.
  2. Still in Design mode, select the Label control in the Monthly Events Panel container.
  3. In the Properties view, set the Width and Height properties to 100%.
  4. Save the file and run the application.
  5. Switch to the portalState of the application by clicking the Submit button.
  6. Resize your browser.
    You should see that the text within the Monthly Events Panel container now resizes with the browser (see Figure 6).
The text within the Monthly Events Panel container resizes with the browser.
Figure 6. The text within the Monthly Events Panel container resizes with the browser.
  1. Return to Flash Builder.
  2. Select the Cafeteria Special Panel container.
  3. In the Properties view, check the top constraint on the left and set its value to 95 and check the bottom constraint on the left and set its value to 15. By doing this the Panel container will be constrained to the top and bottom of the application
  4. Switch to Source mode.
  5. Locate the Employee Directory Panel container.
  6. To the opening Panel tag, add the top property with a value of 410 and the bottom property with a value of 15. Remove the y property and its value.
<s:Panel id="search" includeIn="portalState" x="24" top="410" bottom="15" width="250" title="EMPLOYEE DIRECTORY">
  1. Save the file and run the application.
  2. Switch to the portalState of the application.
  3. Resize your browser.
    Note that the panels expand, but they also collapse (see Figure 7). Next, you will set a minHeight on the Employee Directory Panel.
     
The Employee Directory and Cafeteria Special Panel containers expand as well as collapse.
Figure 7. The Employee Directory and Cafeteria Special Panel containers expand as well as collapse.

 
Set the minimum height of the application

In this section, you will add the minHeight property to the Employee Directory Panel container.
 
  1. Return to Flash Builder.
  2. To the Employee Directory Panel container, add a minHeight property with a value of 160.
<s:Panel id="search" includeIn="portalState" x="24" top="410" bottom="15" width="250" title="EMPLOYEE DIRECTORY" minHeight="160">
  1. Save the file and run the application.
    You should see the Employee Directory Panel collapses until it reaches the minHeight of 160 pixels, while the Cafeteria Special and Monthly Events Panels continue to collapse (see Figure 8). Instead of adding the minHeight property to each of the Panel containers, you will add it to the application.
The Employee Directory Panel only collapses until it reaches the minHeight value of 160.
Figure 8. The Employee Directory Panel only collapses until it reaches the minHeight value of 160.
  1. Return to Flash Builder.
  2. Delete the minHeight property from the Employee Directory Panel.
  3. Locate the opening Application tag and add the minHeight property with a value of 575.
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" currentState="loginState" minHeight="575">
  1. Save the file and run the application.
  2. Switch to the portalState.
    Note that the panels do not collapse past the value set for the minHeight property.
     

 
Constrain the header and Button control

In this section, you will set the constraints for the Employee Portal header bar and the Logout button.
 
  1. Return to Flash Builder.
  2. Switch to Design mode.
  3. Select the Employee Portal title bar.
  4. In the Properties view, check the right constraint on the top and set its value to 24.
    The right constraint defines the number of pixels from the right edge of the component to the right side of the container's content area.
  5. Check the left constraint in the top row and set its value to 24.
  6. Save the file and run the application.
  7. Click the Submit button.
  8. Resize the browser.
    Notice that the Logout button does not expand with the title bar (see Figure 9).
The Logout button does not expand with the title bar.
Figure 9. The Logout button does not expand with the title bar.
  1. Return to Flash Builder.
  2. Select the Logout Button control.
  3. Check the right constraint at the top and set the value to 44.
  4. Save the file and run the application.
  5. Click Submit and resize the browser.
    You should see that the Logout button now expands with the title bar. Notice that when you reduce the width of the browser, the Employee Portal Label control collapses, while the other Panel containers do not (see Figure 10).
The Employee Portal Label control continues to collapse as the browser width is reduced.
Figure 10. The Employee Portal Label control continues to collapse as the browser width is reduced.
  1. Return to Flash Builder and switch to Source mode.
  2. To the opening Application tag, add the minWidth property with a value of 800. By adding the minWidth property, you are making sure that when you reduce the browser size, none of the components in the application will collapse when the browser reaches a width of 800 pixels.
<s:Application xmlns:fx=http://ns.adobe.com/mxml/2009 xmlns:s="library://ns.adobe.com/flex/spark" currentState="loginState" minHeigt="575" minWidth="800">
  1. Save the file and run the application.
  2. Switch to the portalState and resize the browser.
    You should see that the title bar, Logout button, and Monthly Events Panel container collapse with the browser until the application reaches 800 pixels in width.
In this exercise you created a dynamic interface using percentages and constraints. In the next exercise you will use Spark effects to animate a user login panel when invalid information is submitted.
 
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.