- Requirements
Prerequisite knowledge Required products Sample files
Exercise 3.6: Validating form data
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

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).
 
Preview the application.
Figure 1. Preview the application.
In this exercise, you will learn how to:
 

 
Use the Form stacked layout skin

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).
 
The form is in the default horizontal layout.
Figure 2. The form is in the default horizontal layout.
  1. Return to the ex5_04_starter.mxml file.
  2. Below the Styles comment and above the existing Style instance, add a Style block. The application namespaces are automatically added to the Style block.
<fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; @namespace components "components.*"; </fx:Style>
  1. After the namespace definitions, add a CSS style selector for the Spark FormItem container.
s|FormItem { }
  1. In the FormItem selector block, use the skinClass property to reference the StackedFormItemSkin class.
s|FormItem { skinClass:ClassReference("spark.skins.spark.StackedFormItemSkin"); }
    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.
     
  1. 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.
  2. Return to the ex5_04_starter.mxml file.
  3. Before the selector for the Form and FormItem controls, add a selector for the Spark FormHeading control.
  4. In the FormHeading selector block, use the skinClass property to reference the StackedFormHeadingSkin.
s|FormHeading { skinClass:ClassReference("spark.skins.spark.StackedFormHeadingSkin"); }
  1. 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).
  2. 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.
     
The Form is now set in the stacked layout.
Figure 3. The Form is now set in the stacked layout.
  1. After the namespace definitions and before the selector for the FormHeading control, add a CSS style selector for the Spark Form container.
s|Form { }
  1. In the Form selector block, use the skinClass property to reference the StackedFormSkin class.
s|Form { skinClass:ClassReference("spark.skins.spark.StackedFormSkin"); }
  1. Save the file and run the application. You should see that the application is exactly the same as in Figure 3.
  2. Click the Submit Request button. You should see that the errors now display at the top of the form.

 
Add sequence labels

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).
<s:FormItem label="Employee:" sequenceLabel="1)">
  1. To the opening tag for the Office Phone FormItem container, add the sequenceLabel property with a value of 2).
<s:FormItem label="Office Phone:" sequenceLabel="2)">
  1. To the opening tag for the Mobile Phone FormItem container, add the sequenceLabel property with a value of 3).
<s:FormItem label="Mobile Phone:" required="true" sequenceLabel="3)">
  1. To the opening tag for the Pickup Date FormItem container, add the sequenceLabel property with a value of 4).
<s:FormItem label="Pickup Date:" sequenceLabel="4)">
  1. To the opening tag for the Return Date FormItem container, add a sequenceLabel property with a value of 5).
<s:FormItem label="Return Date:" sequenceLabel="5)">
  1. Save the file and run the application.
    You should see the sequence numbers in front of each FormItem label (see Figure 4).
     
The sequence labels are added to each FormItem control.
Figure 4. The sequence labels are added to each FormItem control.

 
Add text prompts

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.
<s:TextInput id="phone" text="{dropDownList.selectedItem.phone}" prompt="Select employee"/>
  1. Save the file and run the application. You should see the text prompt in the Office Phone text field (see Figure 5).
The text prompt in the Office Phone field.
Figure 5. The text prompt in the Office Phone field.
  1. Click in the Office Phone input control area. The prompt disappears when the input gets focus.
  2. 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.

 
Customize the required and error icons

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 .
<s:FormItem label="Mobile Phone:" required="true" sequenceLabel="3)" requiredIndicatorSource="assets/required.png">
  1. Save the file and run the application.
    You should see the newly customized required icon (see Figure 6).
     
The customized required icon.
Figure 6. The customized required icon.
  1. 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).
The default error icon.
Figure 7. The default error icon.
  1. Return to the VehicleRequestForm.mxml file.
  2. To the opening Mobile Phone FormItem tag, add the errorIndicatorSource property and assign the value to assets/invalid.png.
<s:FormItem label="Mobile Phone:" required="true" sequenceLabel="3)" requiredIndicatorSource="assets/required.png" errorIndicatorSource="assets/invalid.png">
  1. Save the file and run the application.
  2. 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).
     
The customized error icon.
Figure 8. The customized error icon.
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.
 
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.