Exercise 2.3: Using the addEventListener() method

In this exercise you will use the addEventListener() method to handle a change in the date selected from a DateChooser control (see Figure 1).

In this exercise you will learn how to:

• Use the addEventListener() method to handle a change event

In this section you will change the sample application to use the addEventListener() method to assign an event handler.

1. Download the ex2_03_starter.zip file if you haven't done so already and extract the file ex2_03_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex2_03_starter.fxp file.
4. Open the ex2_03_starter.mxml file.
5. In the Application container,cut the employeeService.send() method out of the creationComplete event and call a new function named initApp():

6. Locate the Script block.
7. Within the Script block, below the dateChangeHandler() function, create a private function named initApp() that takes no parameters and returns void.

8. Within the initApp() function, paste the employeeService.send() method.

9. And an addEventListener() method to call the dateChangeHandler()function upon a change event to the pickupDate DateChooser control.

Note: Remember to use the event constant CalendarLayoutChangeEvent.CHANGE rather than the change string for the event type.

10. Copy the pickupDate.addEventListener(...) line and paste it below the existing line.
11. Change the DateChooser control instance to returnDate:

12. Save the file and run the application.
13. Click a pickup date.

    You should see the Alert message displayed twice, since the DateChooser instances still have defined change events (see Figure 2).

14. Click a return date.

    If the return date is before the pickup date, you will see the image in Figure 3. If it is after the pickup date, your Alert message will appear, similar to Figure 2. You should also see the Alert message display a message according to the date selected. The Alert messages will appear twice because the DateChooser controls still have events defined.

15. Return to Flash Builder.
16. Remove the change events from both instances of the DateChooser control.

17. Save the file and run the application.

You should see that the Alert messages only appear once as expected.

In this exercise you learned how to use the addEventListener() method to handle a change in a DateChooser control. In the next exercise you will learn how to use the HTTPService object's result event to store data in a variable that is bound to Flex controls.