Exercise 5.4: Styling the Form container

The Spark Form container lays out its children in three ways:

• Horizontal layout, which is the default
• Stacked layout, and
• Customized using a grid-based constraint layout

This exercise will focus on the stacked layout. The constraint layout is outside the scope of this course.

In this exercise you will style the Employee Portal: Vehicle Request Form application that you created and customized in the first three days of this series (see Figure 1).

In this exercise, you will learn how to:

• Use the Form stacked layout skin
• Add sequence labels
• Add text prompts
• Customize the required and error icons

In this section, you will use the stacked layout skin in your form.

1. Download the ex5_04_starter.zip file if you haven't already and extract the file ex5_04_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex5_04_starter.fxp file.
4. Open the ex5_04_starter.mxml file.
5. Run the application.

You should see the application that you created in Exercise 3.6 (Validating form data). Note that the Form is set in the default horizontal layout (see Figure 2).

6. Return to the ex5_04_starter.mxml file.
7. Below the Styles comment and above the existing Style instance, add a Style block. The application namespaces are automatically added to the Style block.

8. After the namespace definitions, add a CSS style selector for the Spark FormItem container.

9. In the FormItem selector block, use the skinClass property to reference the StackedFormItemSkin class.

Note: You can also add the skinClass property to each FormItem container in the Form within the MXML code. However, CSS is used to easily apply the skinClass property to all FormItem containers at once.

10. Save the file and run the application. You should get an error because you also have to apply the stacked skin to the FormHeading control so that the columns match the stacked FormItem controls.
11. Return to the ex5_04_starter.mxml file.
12. Before the selector for the Form and FormItem controls, add a selector for the Spark FormHeading control.
13. In the FormHeading selector block, use the skinClass property to reference the StackedFormHeadingSkin.

14. Save the file and run the application.You should see that the FormItem labels appear above the input controls in the stacked layout (see Figure 3).
15. Click the Submit Request button.

    Note that the error icons appear, but there is no error message. This occurs because, in a horizontal layout, the error message will display to the right of the TextInput control, but in a stacked layout the error message will display at the top of the container. The error message will not display in the application without the Form selector, so as a best practice, you should add the StackedFormSkin class to the code.

16. After the namespace definitions and before the selector for the FormHeading control, add a CSS style selector for the Spark Form container.

17. In the Form selector block, use the skinClass property to reference the StackedFormSkin class.

18. Save the file and run the application. You should see that the application is exactly the same as in Figure 3.
19. Click the Submit Request button. You should see that the errors now display at the top of the form.

In this section, you will add sequence labels which are displayed to the left of FormItem containers.

1. Return to Flash Builder.
2. From the components package, open the VehicleRequestForm.mxml file.
3. Locate the Employee FormItem container.
4. To the opening FormItem tag, add the sequenceLabel property with a value of 1).

5. To the opening tag for the Office Phone FormItem container, add the sequenceLabel property with a value of 2).

6. To the opening tag for the Mobile Phone FormItem container, add the sequenceLabel property with a value of 3).

7. To the opening tag for the Pickup Date FormItem container, add the sequenceLabel property with a value of 4).

8. To the opening tag for the Return Date FormItem container, add a sequenceLabel property with a value of 5).

9. Save the file and run the application.

   You should see the sequence numbers in front of each FormItem label (see Figure 4).

In this section, you will add text prompts to the form to describe the input controls. The prompt property is supported by the Spark TextInput and TextArea controls.

1. Return to the VehicleRequestForm.mxml file in Flash Builder.
2. Locate the phone TextInput control in the Office Phone FormItem tag block.
3. To the TextInput control, add the prompt property with a value of Select employee.

4. Save the file and run the application. You should see the text prompt in the Office Phone text field (see Figure 5).

5. Click in the Office Phone input control area. The prompt disappears when the input gets focus.
6. Leave the Office Phone input control area blank and click in the Mobile Phone input control. Note that the text prompt reappears when the input control loses focus and no value is entered.

The Spark FormItem container supports customization of the required and error fields. You can use a custom icon image and change the background color and text properties. In this section, you will customize the required and error icon images.

1. Return to VehicleRequestForm.mxml file in Flash Builder.
2. To the opening tag of the Mobile Phone FormItem container, add the requiredIndicatorSource property and assign the value to assets/required.png .

3. Save the file and run the application.

   You should see the newly customized required icon (see Figure 6).

4. Without entering a value in the Mobile Phone field, click the Submit Request button. Note the yellow triangle with the exclamation point. This is the default error icon (see Figure 7).

5. Return to the VehicleRequestForm.mxml file.
6. To the opening Mobile Phone FormItem tag, add the errorIndicatorSource property and assign the value to assets/invalid.png.

7. Save the file and run the application.
8. Without entering a value in the Mobile Phone field, click the Submit Request button.

   You should see the newly customized error icon (see Figure 8).

In this exercise you styled the Employee Portal: Vehicle Request Form application that you created and customized in the first three days of this series. In the next exercise you will create a skin for the Employee Portal application and use the provided skinning components to configure the application.