Exercise 2.2: Using the event object

In this exercise you will use the event object to create a reusable event handler function. You will also use a conditional statement to validate pickup and return dates (see Figure 1).

In this exercise you will learn how to:

• Use an event object
• Examine the complete Event object using debugging mode
• Reuse an event handler
• Validate a selection

In this section you will dispatch an event based on a change to the DateChooser control. More specifically, you will pass an event object from a DateChooser control to the event handler function.

1. Download the ex2_02_starter.zip file if you haven't done so already and extract the ex2_02_starter.fxp file to your computer.
2. Open Flash Builder.
3. Import the ex2_02_starter.fxp file.
4. Open the ex2_02_starter.mxml file.
5. In the Script block, locate the dateChangeHandler() function.
6. In the dateChangeHandler() function, accept a parameter named event data typed to the CalendarLayoutChangeEvent class:

7. Ensure that Flash Builder has imported the CalendarLayoutChangeEvent class. If not, use the following code to import the package:

8. Locate the DateChooser control with an id property of pickupDate.
9. To the change property's value, pass a parameter named event.

10. Repeat steps 8 and 9 for the returnDate DateChooser control.

11. Save the file.

In this section you will use the Flash Builder Debug perspective to explore how the event object works.

1. Double-click the line number of the line with the closing curly brace for the dateChangeHandler() function to add a breakpoint (see Figure 2).

2. Save the file and then click the Debug button (see Figure 3).

3. Select a start date from the DateChooser control.

   This opens the Confirm Perspective window (see Figure 4).

4. Click Yes to switch perspectives.
5. Double-click the Variables tab to maximize the view and examine the lengthy event object. Be sure to locate the type and target.id (see Figure 5).

6. Double-click the Variables tab to minimize the view.
7. Click the Terminate button to stop the debugging session (see Figure 6).

8. Switch back to the Flash perspective.

In this section you will make the dateChangeHandler() function work for both the pickupDate and the returnDate DateChooser controls.

1. Locate the dateChangeHandler() function.
2. For the call to the pickupDate.selectedDate.toDateString() function, add the event.target variable in place of the id of the DataChooser control:

Note: If you type event.target.selectedDate, Flash Builder will not automatically give you the toDateString() code hinting. This happens because Flash Builder does not know that this value is a Date instance. You can cast event.target.selectedDate as a Date instance by adding parentheses. Then when you type a period, the toDateSting() method will appear with content assist. Your code should read ((event.target.selectedDate) as Date).toDateString(). This will not change the functionality of the code.

3. Save the file and run the application.
4. Click a date on the pickupDate DateChooser control.

   You should see the Alert window display the date you selected.

5. Click a date on the returnDate DateChooser control.

   You should see the Alert window display the date you selected.

In this section you will make the application validate whether the return date request falls after the pickup date.

1. Return to Flash Builder.
2. Within the dateChangeHandler() function, below the Alert.show() method, press CTRL+Space twice to invoke the content assist tool's code templates and type if. Select the if statement template from the list of suggestions.
3. In the conditional statement, evaluate whether the DateChooser control selected is the returnDate instance and whether the date selected from the pickupDate DateChooser control is less than the date selected from the returnDate DateChooser control.

   Note: Use the equality operator (==) to test whether event.target.id is equal to the string returnDate.

4. If the conditional tests true, use the Alert.show() method to display the message, "Pickup date must be scheduled before return date."

5. Save the file and run the application.
6. Select a date from the pickupDate DateChooser.

   You should see the Alert message display the selected date (see Figure 7).

7. Click a date on the returnDate DateChooser control that is before the date you selected for the pickupDate DateChooser control.

   You should see the Alert window with the message: Pickup date must be scheduled before return date (see Figure 8).

   Note: Although this alert message is lower in the Script block than the first Alert message, it displays first because Flash layers alert message on top of each other.

8. Choose a returnDate from the DateChooser control.
   You should see an alert message that shows you the return date you just selected.
9. Choose a pickupDate from the DateChooser control that is after the returnDate that you chose in the previous step.
   You should see an alert message that shows you the selected pickup date, but notice that you do not see the message warning you to schedule the pickup date before the return date.
10. Return to Flash Builder.
11. Still within the dateChangeHandler() function, add another if statement below the first conditional statement, using the code template.
12. In the conditional statement, evaluate if the DateChooser control selected is the pickupDate instance and whether the date selected from the pickupDate DateChooser control is less than the date selected from the returnDate DateChooser control.
13. If the conditional statement tests true, use the Alert.show() method to display the message, Pickup date must be scheduled before return date.

14. Save the file and run the application.
15. Select a date from the returnDate DateChooser control.
    You should see an alert message that shows the selected date.
16. Select a date from the pickupDate DateChooser control that is after the date you selected in the returnDate DateChooser control.
    You should see the Alert window with the message: Pickup date must be scheduled before return date.

In this exercise you learned how to use the event object to handle events for multiple controls. In the next exercise you will use the addEventListener() method to handle a change in the date selected from a DateChooser control.