Exercise 3.5: Using formatters

In this exercise you will use the Flex DateTimeFormatter component to format the selected date from a calendar as shown in Figure 1. You will also learn how to format a phone number.

In this exercise, you will learn how to:

• Create a DateTimeFormatter instance
• Use the DateTimeFormatter instance to format the selected date
• Create a PhoneFormatter instance
• Use the PhoneFormatter instance to format the mobile phone field

In this section you will create a DateTimeFormatter instance that will be used to format the date of the time entry.

1. Download the ex3_05_starter.zip file provided in the Exercise files section and extract the ex3_05_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex3_05_starter.fxp file.
4. From the Package Explorer view, components package, open the VehicleRequestForm.mxml file.
5. Run the application.
6. Select a Pickup Date.

   Note the format of the date you selected in the Alert window (see Figure 2).

7. Return to the VehicleRequestForm.mxml file in Flash Builder.
8. Locate the Declarations block.

9. Within the Declarations block, create a DateTimeFormatter instance.

10. To the DateTimeFormatter instance, add the id property with a value of requestDateFormatter and the dateTimePattern property with a value of MM-dd-yyyy.

11. Save the file.

In this section you will use the DateTimeFormatter instance format the date displayed in the Alert window.

1. Within the Script block, locate the dateChangeHandler() function.
2. Within the dateChangeHandler() function, to the Alert.show() method located outside the if statement, use the requestDateFormatter.format() method to format the event.result.selectedDate value.

3. Save the file.
4. Run the application.
5. Select a Pickup Date.

The date in the Alert window is formatted as specified by the DateTimeFormatter object (see Figure 3).

In this section you will create a PhoneFormatter instance that will be used to format the Office Phone and Mobile Phone fields of the Employee Portal Vehicle Request form.

1. Return to the VehicleRequestForm.mxml file in Flash Builder.
2. Within the Declarations block, below the DateTimeFormatter instance, create a PhoneFormatter instance.

3. To the PhoneFormatter instance, add the id property with a value of phoneFieldFormatter, the formatString property assigned to (###) ###-####.

4. Save the file.

In this section you will use the PhoneFormatter instance to format the mobile phone after a number has been inserted.

1. Within the Form container, locate the FormItem container that nests the TextInput control with an id property of mobilePhone.
2. For the TextInput control, use the content assist tool to generate the focusOut event (see Figure 4).

3. Use the content assist tool to generate a handler function for the focusOut event (see Figure 5).

4. Within the Script block, locate the mobilePhone_focusOutHandler() function and delete the generated stub code.
5. Within the function, for the mobilePhone.text value, use the phoneFieldFormatter.format() method to format the number entered in the mobilePhone field.

6. Save the file.
7. Run the application.
8. In the Mobile Phone field, type 5555555555.
9. Click the DateChooser below the Mobile Phone field to remove focus from the field.

The mobile phone number you entered is formatted as shown in Figure 6.

10. Delete the text from Mobile Phone field and type 555.
11. Click the DateChooser to remove focus from the field.

Note that this time the text you entered is deleted from the field. The formatter returns a blank field when the input is invalid. The only string that is valid is a 10 digit number without any characters.

Now you will add a custom validation check to return an Alert message if the input to the formatter is invalid.

12. Return to Flash Builder.
13. Locate the mobilePhone_focusOutHandler() function.
14. In the function and below the mobilePhone formatter, type if and press Ctrl+Space twice to show a list of code templates. Select the template for the if statement.
15. Check to see if the text entered in the Mobile Phone field is invalid by adding phoneFieldFormatter.error as the condition of the statement.
16. Within the conditional statement, use the Alert.show() method to display the text Phone format error: followed by the error by using phoneFieldFormatter.error.

17. Save the file and run the application.
18. Type 555 in the Mobile Phone field and click the DataChooser to remove focus.

Note that the formatter still returns a blank field because the number you entered was invalid, but an alert message also appears indicating an invalid value (see Figure 7).

In this tutorial you learned how to use a DateFormatter class to display a date selected from a DateChooser control. You also learned how to use the PhoneFormatter class. In the next exercise you will use Flex framework validation classes to validate a form.