Exercise 2.3: Using the addEventListener() method
Content
Modified
2 May 2010
Requirements
Prerequisite knowledge
- Exercise 1.1: Setting up Flash Builder and your project files
- Exercise 2.1: Handling a user event
- Exercise 2.2: Using the event object
User level
Beginning
Required products
- Flash Builder 4.5 Premium (Download trial)
Sample files
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
Use addEventListener()
In this section you will change the sample application to use the addEventListener() method to assign an event handler.
- 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.
- Open Flash Builder.
- Import the ex2_03_starter.fxp file.
- Open the ex2_03_starter.mxml file.
- In the Application container,cut the
employeeService.send()method out of thecreationCompleteevent and call a new function namedinitApp():
<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()">
- Locate the
Scriptblock. - Within the
Scriptblock, below thedateChangeHandler()function, create aprivatefunction namedinitApp()that takes no parameters and returnsvoid.
private function initApp():void
{
}
- Within the
initApp()function, paste theemployeeService.send()method.
private function initApp():void
{
employeeService.send();
}
- And an
addEventListener()method to call thedateChangeHandler()function upon a change event to thepickupDateDateChooser control.
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);
}
- Copy the
pickupDate.addEventListener(...)line and paste it below the existing line. - Change the DateChooser control instance to
returnDate:
private function initApp():void
{
employeeService.send();
pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,_dateChangeHandler);
returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE,_dateChangeHandler);
}
- Save the file and run the application.
- Click a pickup date.
You should see the Alert message displayed twice, since the DateChooser instances still have defined change events (see Figure 2).
- 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.
- Return to Flash Builder.
- Remove the change events from both instances of the DateChooser control.
<mx:DateChooser id="pickupDate"/>
<mx:DateChooser id="returnDate"/>
- 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.
+
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.
More Like This
- Exercise 2.5: Retrieving and handling data with the RemoteObject object
- Exercise 2.6: Separating the model, view, and controller
- Exercise 2.7: Creating an ActionScript class and instances
- Exercise 2.8: Creating an ArrayCollection of value objects
- Exercise 2.9: Use the Data Services wizard to connect to a service
- Exercise 4.3: Creating item renderers for Spark List components
- Exercise 4.4: Using the Spark DataGrid control
- Exercise 3.4: Passing data to the server with the HTTPService class
- Exercise 3.4: Passing data to the server with the WebService class
- Exercise 4.8: Creating a scalable user interface
