Exercise 1.2: Creating an application user interface

In this exercise you will use Flash Builder to create the application user interface for the fictitious Employee Portal: Vehicle Request Form shown in Figure 1.

In this exercise you will learn how to:

• Add and configure controls in Design mode
• Compile and run an application
• Create a custom CSS style
• Add a video to the application
• Skin the application
• Change the component theme using the Theme Browser

In this section you will use Flash Builder Design mode to build the application user interface using Flex framework components.

1. If you haven't already, download the ex1_02_starter.zip file and extract the file ex1_02_starter.fxp to you computer.
2. Open Flash Builder and import the file ex1_02_starter.fxp.
3. From the Package Explorer open the ex1_02_starter.mxml file.
4. Switch to Design mode.
5. From the Components view's Controls branch, drag a Label control and drop it in the top left of the Design area (see Figure 2).

6. In the Properties view, locate the Text property and type Employee Portal: Vehicle Request Form.

   Note: The Properties view is displayed by default on the right side of the Flash Builder user interface (see Figure 3).

7. Using the Text section of the Style segment in the Properties view, change the font size to 16, and then click the left-most T button to set the font weight to bold (see Figure 3).

8. In the Properties view, locate the Size and Position segment and set the Label control's X and Y properties to 10 and 34, respectively (see Figure 4).

9. From the Components view Layout branch, drag a Form container and drop it below the Label control using the blue guidelines to align the controls vertically (see Figure 5).

10. The Insert Form dialog box will appear. Click OK to keep the default values (see Figure 6).

11. Make sure the Form container is selected and look at the Properties view’s Size and Position segment. If you used the blue guidelines to align the Form container and Label control vertically, then you should see that the X property value is 10. Change the Y property value to 70.
12. From the Components view Controls branch, drag a DropDownList control and drop it inside the Form container (see Figure 7). As you drag the DropDownList control over the Form container, you should see a dashed, pink line indicating the control will be placed inside the container.

13. Click the label that is created next to the DropDownList control to select the FormItem container that nests the control.
14. Using the Properties view, locate the FormItem container's Label property and type Employee:.
15. From the Components view Controls branch, drag a TextInput control and place it within the Form container, below the DropDownList control (see Figure 8).

16. Click the label that is created next to the TextInput control to select the FormItem container that nests the control.
17. Using the Properties view, locate the FormItem container's Label property and assign Office Phone: as its value.
18. Drag another TextInput control and drop it within the Form container below the TextInput control you created for the office phone number.
19. Select the FormItem container that surrounds the TextInput control and use the Properties view to assign Mobile Phone: as the value for the FormItem container's Label property.
20. From the Components view Layout branch, drag a FormHeading control and place it within the Form container, below the last TextInput control (see Figure 9).

21. Using the Properties view, type Dates Requested for the value of the new FormHeading control's Label property.
22. From the Components view Controls branch, drag a DateChooser control and drop it below the FormHeading control (see Figure 10).

23. Click the label that is created next to the DateChooser control to select the FormItem container that nests the control.
24. Using the Properties view, locate the FormItem container's Label property and type Pickup Date:.
25. Drag another DateChooser control and drop it within the Form container below the one you added for the pickup date.
26. Click the label that is created next to the DateChooser control to select the FormItem container that nests the control.
27. Using the Properties view, type Return Date: for value of the FormItem container's Label property.

    Lastly you will add a Button control using Source mode. This allows you to avoid the label value that is created for you when you drop a control into the Form container in Design mode.

28. Switch to Source mode.
29. At the bottom of the code, within the Form block and below the last FormItem container, create a new FormItem container block.

30. Within the FormItem block, create a Button control and a label property with a value of Submit Request.

31. Save the file.

In this section you will run the application to view it in a browser.

1. Run the application using the Run button (see Figure 11).

You should see the application shown in Figure 12.

Note: You may have to resize your browser to see the whole application.

In this section you will use Design mode to create a CSS style from a Label control.

1. Return to Flash Builder.
2. In Design mode, select the Label control that reads Employee Portal: Vehicle Request Form.
3. In the Properties view, give the Label control's width property a value of 690 and its height property a value of 40.
4. Save the file.
5. Still in the Properties view, locate the Style segment and click the Convert to CSS button (see Figure 13).

6. In the New Style Rule dialog box, click the New button located next to the Define style in drop-down list.
7. In the New CSS File dialog box, for the File name, type Styles (see Figure 14).

8. Click the Finish button.
9. In the New Style Rule dialog box do the following (see Figure 15):
   • For the Selector type, click the radio button next to All components with style name.
   • In the Name field, type titleHeader.

10. Click OK.

    You should see the Styles.css file open in Flash Builder (see Figure 16). You should also see the Styles.css file in the Package Explorer view within the default package.

11. In the Styles.css file, add a backgroundColor property with a value of #000000, a color property with a value of #FFFFFF, a paddingLeft property with a value of 20, and a verticalAlign property with a value of middle.

12. Save the file.

13. Switch to ex1_02_starter.mxml.

    Note the new layout of the Label control.

14. In Properties view, note that the Label control now has a Style property of titleHeader (see Figure 17). The titleHeader style is now available to all text controls through the drop-down list.

15. Save the file.

In this section you will use the Flex video components to add a video to the application.

1. Return to the ex1_02_starter.mxml file in Flash Builder.
2. From the Components view Controls branch, drag a VideoDisplay control and drop it to the right of the Form container, using the blue guidelines to align it (see Figure 18).

3. Locate the Properties view.
4. Set the Source property value to http://www.adobetes.com/f45iaw100/ex1_02_video.flv
5. Set the Width property value to 325, the Height property value to 267, the X property value to 350, and the Y property value to 90 (see Figure 19).

6. Save the file and run the application.

   You should see the video next to the Pickup Date field in the Form container (see Figure 20). Note that the VideoDisplay control has no playback controls.

7. Return to Flash Builder.
8. Delete the VideoDisplay control.
9. Repeat steps 2–5 of this section using the VideoPlayer control.
10. Save the file and run the application.

The VideoPlayer control now has a play/pause button, a seek bar, volume controls, and a full-screen option embedded with it (see Figure 21). Also note that the video starts automatically when the application launches.

11. Return to Flash Builder.
12. Switch to Source mode and locate the VideoPlayer control.
13. Add the autoPlay property to the VideoPlayer control and set its value to false.

14. Save the file and run the application.

    You should see that the video does not start when the application is launched.

15. Click the play button in the video player to start the video.

In this section, you will apply a pre-made skin to the Application container using the skinClass property. You will also modify the skin background.

1. Return to Flash Builder.
2. In the Package Explorer, expand the skins directory to reveal the AppSkin.mxml file (see Figure 22).

3. Open the AppSkin.mxml file and switch to Source mode to see the code.

   The AppSkin.mxml file is based on the SparkSkin class and consists of two required states (normal and disabled) and a Metadata block. You will learn more about states in later videos; for now just understand that these two are required in a skin.

   The HostComponent() method located within the MetaData block is a contract between the skin and the spark.components.Application container class. This gives the AppSkin.mxml skin class access to the public properties of the Application container class and allows the file to be used as a skin for the Application container. The Rect block draws the application background, in this case, setting it to a gray color. The required Group container with an id property of contentGroup represents all of the content within the Application container.

4. In the ex1_02_starter.mxml file, make sure that you are in Source mode and add the skinClass property to the opening Application tag, assigning it a value of skins.AppSkin:

Note: If you used the content assist tool to add the value to the skinClass property, you will see that a Script block and import statement are generated. Neither the Script block nor the import statement are needed and may be deleted from the application.

5. Save the file and run the application.

   Note that the application is skinned with a grey background (see Figure 23). Also note that the Employee Portal: Vehicle Request Form Label control is not centered in the application.

6. Return to Flash Builder.
7. In the ex1_02_starter.mxml file, remove the x property of the Employee Portal: Vehicle Request Form Label control. The x property was automatically added to your code when you dropped the Label control onto the stage in Design mode.

8. Save the file and run the application.

   It is a subtle change, but you should see that the Label control is now centered in the application.

9. Return to Flash Builder and open AppSkin.mxml.

Note that the contentGroup Group container at the end of the file horizontally centers the application content and lays out the elements vertically:

Note also that the Rectangle component is horizontally centered with width, height, fill, and stroke properties:

10. To the opening Rect tag, add the radiusX property with a value of 10, the top property with a value of 20, and the bottom property with a value of 20.

11. Within the nested fill block, change the value of the SolidColor graphic's color property to #FFFBCF:

12. Save the file and run the application.

    The background color of the skin is now light yellow, the corners are rounded, and there is some space between the tops and bottoms of the rounded rectangle and the browser window (see Figure 24).

13. Resize the browser and see that the bottom of the application does not resize correctly.
14. Return to ex1_02_starter.mxml.
15. Locate the opening Application tag and remove the minHeight property.

16. Save the file and run the application.

    Note that when you resize the browser, the application still does not resize appropriately.

17. Return to AppSkin.mxml.
18. Locate the Rect tag and notice that the height property is set to 100%. If you set this property to 100% the bottom of the rectangle resizes based on the browser, but the contentGroup does not resize with the browser.
19. Change the Rect tag's height property so that it is bound to the height of the contentGroup and remove the bottom property.

20. To the Group tag, add a bottom property with a value of 20.

21. Save the file and run the application.

You should see that the bottom of the application now resizes appropriately. Note that the space between the bottom of the rectangle and the bottom of the browser window stays the same when you enlarge the browser. However, when you make the browser smaller, notice that the content does not automatically center (see Figure 25).

22. Return to the main application file.
23. Remove the minWidth property from the opening Application tag.
24. Save the file and run the application.

Note that the application moves and resizes appropriately when you make the browser window larger or smaller.

By default, the Flex components use either the Spark or MX themes. In this section you will use the Flash Builder Theme Browser to change the application theme to a different look and feel.

1. Return to the ex1_02_starter.mxml file in Flash Builder and switch to Design mode.
2. Open the Appearance tab and click the link located next to the Current theme field (see Figure 26).

3. In the Select project theme dialog box, expand the Flex 4 CSS Samples section and select the Sky theme (see Figure 27).

4. Click OK.
5. Run the application.

The application controls are now styled using the Sky theme (see Figure 28).

In this exercise you learned how to create a Flex application and navigate Flash Builder 4.5. In the next excercise, you learn how to customize Flex components and bind them to data to create an auto-generating email address.