Requirements

Prerequisite knowledge Required products Exercise files User level

Exercise 1.1: Setting up your project files

Exercise 1.1: Setting up your project files

Beginning

 

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.

Preview the application.
Figure 1. Preview the application.

 

Add and configure controls in Design mode

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

 

 Add a Label control to the application
 Figure 2. Add a Label control to the application
 
  1. 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).

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

 

Edit the Label control's text using the Properties view.
 Figure 3. Edit the Label control's text using the Properties view.
  1. 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).

 

Set the position of the Label control.
 Figure 4. Set the position of the Label control.
 
  1. 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).
Place a Form control below the Label control.
 Figure 5. Place a Form control below the Label control.
 
  1. The Insert Form dialog box will appear. Click OK to keep the default values (see Figure 6).
Keep the Form container's default values.
 Figure 6. Keep the Form container's default values.
 
  1. 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.
  2. 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.
Place a DropDownList control within the Form container.
 Figure 7. Place a DropDownList control within the Form container.
 
  1. Click the label that is created next to the DropDownList control to select the FormItem container that nests the control.
  2. Using the Properties view, locate the FormItem container's Label property and type Employee:.
  3. From the Components view Controls branch, drag a TextInput control and place it within the Form container, below the DropDownList control (see Figure 8).
Add a TextInput control to the Form container.
 Figure 8. Place a DropDownList control within the Form container.
 
  1. Click the label that is created next to the TextInput control to select the FormItem container that nests the control.
  2. Using the Properties view, locate the FormItem container's Label property and assign Office Phone: as its value.
  3. Drag another TextInput control and drop it within the Form container below the TextInput control you created for the office phone number.
  4. 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.
  5. 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).
Add a FormHeading control to the Form container.
 Figure 9. Add a FormHeading control to the Form container.
 
  1. Using the Properties view, type Dates Requested for the value of the new FormHeading control's Label property.
  2. From the Components view Controls branch, drag a DateChooser control and drop it below the FormHeading control (see Figure 10).
Add a DateChooser control to the application.
 Figure 10. Add a DateChooser control to the application.
 
  1. Click the label that is created next to the DateChooser control to select the FormItem container that nests the control.
  2. Using the Properties view, locate the FormItem container's Label property and type Pickup Date:.
  3. Drag another DateChooser control and drop it within the Form container below the one you added for the pickup date.
  4. Click the label that is created next to the DateChooser control to select the FormItem container that nests the control.
  5. 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.

  6. Switch to Source mode.
  7. At the bottom of the code, within the Form block and below the last FormItem container, create a new FormItem container block.
<s:Form> ... <s:FormItem label="Return Date:"> <mx:DateChooser/> </s:FormItem> <s:FormItem> </s:FormItem> </s:Form>
  1. Within the FormItem block, create a Button control and a label property with a value of Submit Request .
... <s:FormItem> <s:Button label="Submit Request"/> </s:FormItem>
  1. Save the file.

 

Compile and run the application

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).
Click the Run button to test the application
 Figure 11.  Click the Run button to test the application.
 

You should see the application shown in Figure 12.

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

Run the application.
 Figure 12.  Run the application.
 

Create a custom CSS style

 

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

 

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

 

Type Styles for the name of the CSS file.
 Figure 14. Type Styles for the name of the CSS file.
 
  1. Click the Finish button.
  2. 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.
Create a new CSS style named titleHeader.
 Figure 15. Create a new CSS style named titleHeader.
 
  1. 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.

View the Styles.css file with the defined titleHeader style.
 Figure 16. View the Styles.css file with the defined titleHeader style.
 
  1. 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.
.titleHeader { backgroundColor: #000000; color: #FFFFFF; fontSize: 16; fontWeight: bold; paddingLeft: 20; verticalAlign: middle; }
  1. Save the file.
  2. Switch to ex1_02_starter.mxml.

    Note the new layout of the Label control.

  3. 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.
The addHeader style can be applied to any text controls.
 Figure 17. The addHeader style can be applied to any text controls.
 
  1. Save the file.

 

Add a video to the application

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).
Add a VideoDisplay control to the application.
 Figure 18. Add a VideoDisplay control to the application.
 
  1. Locate the Properties view.
  2. Set the Source property value to http://www.adobetes.com/f45iaw100/ex1_02_video.flv
  3. 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).
Set the Source and Width and Height values.
 Figure 19. Set the Source and Width and Height values.
 
  1. 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.

Run the application to see the video displayed.
Figure 20. Run the application to see the video displayed.
 
  1. Return to Flash Builder.
  2. Delete the VideoDisplay control.
  3. Repeat steps 2–5 of this section using the VideoPlayer control.
  4. Save the file and run the application.
  5. 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.

The VideoPlayer control has specialized Button controls.
Figure 21. The VideoPlayer control has specialized Button controls.
 
  1. Return to Flash Builder.
  2. Switch to Source mode and locate the VideoPlayer control.
  3. Add the autoPlay property to the VideoPlayer control and set its value to false.
    .
  4. Save the file and run the application.

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

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

 

Skin the application

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).
Find the AppSkin.mxml file.
Figure 22. Find the AppSkin.mxml file.
 
  1. 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.

  2. 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:

 

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" skinClass="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.

  1. 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.

View the application with a skin.
Figure 23. View the application with a skin.
 
  1. Return to Flash Builder.
  2. In the ex1_02_starter.mxml file, remove the 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.
  3. 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.

  4. Return to Flash Builder and open AppSkin.mxml.
  5. Note that the contentGroup Group container at the end of the file horizontally centers the application content and lays out the elements vertically:

<s:Group id="contentGroup" top="20" horizontalCenter="0"> </s:Group>

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

<s:Rect horizontalCenter="0" width="400" height="100%"> <s:fill> <s:SolidColor color="#CCCCCC" /> </s:fill> <s:stroke> <s:SolidColorStroke color="#AAAAAA" /> </s:stroke> </s:Rect>
  1. 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.
<s:Rect horizontalCenter="0" top="20" bottom="20" width="750" height="100%" radiusX="10" > ...
  1. Within the nested fill block, change the value of the SolidColor graphic's color property to #FFFBCF:
<s:fill> <s:SolidColor color="#FFFBCF" /> </s:fill>
  1. 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).

Change the fill color to light yellow and round the corners.
Figure 24. Change the fill color to light yellow and round the corners.
 
  1. Resize the browser and see that the bottom of the application does not resize correctly.
  2. Return to ex1_02_starter.mxml.
  3. Locate the opening Application tag and remove the minHeight property.
  4. Save the file and run the application.

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

  5. Return to AppSkin.mxml.
  6. 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.
  7. Change the Rect tag's height property so that it is bound to the height of the contentGroup and remove the bottom
    property.
<s:Rect horizontalCenter="0" top="20" bottom="20" width="750" height="{contentGroup.height}" radiusX="10">
  1. To the Group tag, add a bottom property with a value of 20.
<s:Group id="contentGroup" top="20" bottom="20" horizontalCenter="0">
  1. Save the file and run the application.

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

The application does not center as you make the browser smaller.
Figure 25. The application does not center as you make the browser smaller.
 
  1. Return to the main application file.
  2. Remove the minWidth property from the opening Application tag.
  3. Save the file and run the application.

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

 

Change the application theme using the Theme Browser

 

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).
Click the link next to the Current theme field.
Figure 26. Click the link next to the Current theme field.
 
  1. In the Select project theme dialog box, expand the Flex 4 CSS Samples section and select the Sky theme (see Figure 27).
Select the Sky theme.
Figure 27. Select the Sky theme.
 
  1. Click OK.
  2. Run the application.

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

Run the application to see the Sky theme applied.
Figure 28. Run the application to see the Sky theme applied.
 

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.

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


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.

Requirements

Prerequisite knowledge

User level

Beginning