Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning

 

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).

This is the finished application.
Figure 1. This is the finished application.
 

 

Use an event object

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:
private function dateChangeHandler(event:CalendarLayoutChangeEvent):void { Alert.show('You have selected ' + pickupDate.selectedDate.toDateString()); }
  1. Ensure that Flash Builder has imported the CalendarLayoutChangeEvent class. If not, use the following code to import the package:
import mx.events.CalendarLayoutChangeEvent;
  1. Locate the DateChooser control with an id property of pickupDate.
  2. To the change property's value, pass a parameter named event .
<mx:DateChooser id="pickupDate" change="dateChangeHandler(event)"/>
  1. Repeat steps 8 and 9 for the returnDate DateChooser control.
<mx:DateChooser id="returnDate" change="dateChangeHandler(event)" />
  1. Save the file.

 

Examine the complete Event object

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).
Insert a breakpoint on the line with the closing brace of the event handler function.
Figure 2. Insert a breakpoint on the line with the closing brace of the event handler function.
 
  1. Save the file and then click the Debug button (see Figure 3).
Click the Debug button.
Figure 3. Click the Debug button.
 
  1. Select a start date from the DateChooser control.

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

The Confirm Perspective Switch window.
Figure 4. The Confirm Perspective Switch window.
 
  1. Click Yes to switch perspectives.
  2. 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).
Examine the event object.
Figure 5. Examine the event object.
 
  1. Double-click the Variables tab to minimize the view.
  2. Click the Terminate button to stop the debugging session (see Figure 6).
Click the Terminate button.
Figure 6. Click the Terminate button.
 
  1. Switch back to the Flash perspective.

 

Make the event handler function reusable

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:
private function dateChangeHandler(event:CalendarLayoutChangeEvent):void { Alert.show('You have selected ' + event.target.selectedDate.toDateString()) }

    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.

  1. Save the file and run the application.
  2. Click a date on the pickupDate DateChooser control.

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

  3. Click a date on the returnDate DateChooser control.

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

 

Validate the selected date

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.

private function dateChangeHandler(event:CalendarLayoutChangeEvent):void { Alert.show('You have selected ' + event.target.selectedDate.toDateString()); if ((event.target.id == "returnDate") && (pickupDate.selectedDate > returnDate.selectedDate)) { } }
  1. If the conditional tests true, use the Alert.show() method to display the message, "Pickup date must be scheduled before return date."
if ((event.target.id == "returnDate") && (pickupDate.selectedDate > returnDate.selectedDate)) { Alert.show("Pickup date must be scheduled before return date."); }
  1. Save the file and run the application.
  2. Select a date from the pickupDate DateChooser.

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

Select a date for the start date.
Figure 7. Select a date for the start date.
 
  1. 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.

Choose a vehicle return date that is before the pickup date.
Figure 8. Choose a vehicle return date that is before the pickup date.
 
  1. Choose a returnDate from the DateChooser control.
    You should see an alert message that shows you the return date you just selected.
  2. 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.
  3. Return to Flash Builder.
  4. Still within the dateChangeHandler() function, add another if statement below the first conditional statement, using the code template.
  5. 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.
  6. If the conditional statement tests true, use the Alert.show() method to display the message, Pickup date must be scheduled before return date.
if((event.target.id == “pickupDate”) && (pickupDate.selectedDate > returnDate.selectedDate) && (returnDate.selectedDate != null)) { Alert.show(“Pickup date must be scheduled before return date.”) }
  1. Save the file and run the application.
  2. Select a date from the returnDate DateChooser control.
    You should see an alert message that shows the selected date.
  3. 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.

 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


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.