trilemetry_bio

Contents

Created

2 May 2010

Requirements
     
Prerequisite knowledge Required products Sample files User level
Flash Builder 4.7 Premium (Download trial)

ex2_03_starter.zip

ex2_03_solution.zip

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

Figure 1. This is the finished application.

In this exercise you will learn how to:
 
  • Use the addEventListener() method to handle a change event

 
Use addEventListener()

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():
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="850" creationComplete="initApp()">
  1. Locate the Script block.
  2. Within the Script block, below the dateChangeHandler() function, create a private function named initApp() that takes no parameters and returns void.
private function initApp():void { }
  1. Within the initApp() function, paste the employeeService.send() method.
private function initApp():void { employeeService.send(); }
  1. And an addEventListener() method to call the dateChangeHandler()function upon a change event to the pickupDate DateChooser control.
  2. Note: Remember to use the event constant CalendarLayoutChangeEvent.CHANGE rather than the change string for the event type.
     
private function initApp():void { employeeService.send(); pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChangeHandler); }
  1. Copy the pickupDate.addEventListener(...) line and paste it below the existing line.
  2. Change the DateChooser control instance to returnDate:
private function initApp():void { employeeService.send(); pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChangeHandler); returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,dateChangeHandler); }
  1. Save the file and run the application.
  2. Click a pickup date.
    You should see the Alert message displayed twice, since the DateChooser instances still have defined change events (see Figure 2).
     
Choose a pickup date.

Figure 2. Choose a pickup date.

  1. 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.
     
Choose return date that is before the pickup date.

Figure 3. Choose return date that is before the pickup date.

  1. Return to Flash Builder.
  2. Remove the change events from both instances of the DateChooser control.
<mx:DateChooser id="pickupDate"/> <mx:DateChooser id="returnDate"/>
  1. 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.