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

 

In this exercise you will use inline ActionScript to display the date selected from a DateChooser control. You will then use a function to achieve the same result as the inline ActionScript (see Figure 1).
 
This is the finished application.
Figure 1. This is the finished application.
In this exercise you will learn how to:
 

 
Add a Label and Button to the application

In this section you will use inline ActionScript to handle a change in the application.
 
  1. Download the ex2_01_starter.zip file if you haven't already and extract the file ex2_01_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex2_01_starter.fxp file.
  4. Open the ex2_01_starter.mxml file.
  5. In Design mode, select the DateChooser control for the Pickup Date.
  6. In the Properties view, assign the DateChooser control's id property a value of pickupDate (see Figure 2).
Select the DateChooser control and assign an id of pickupDate.
Figure 2. Select the DateChooser control and assign an id of pickupDate.
  1. Switch to Source mode.
  2. Below the Script comment, create a Script block.
  3. Within the Script block, import the Alert class:
import mx.controls.Alert;
  1. Locate the pickupDate DateChooser control.
  2. To the control, add the change property assigned to run the show() method of the Alert package:
<mx:DateChooser id="pickupDate" change="Alert.show()" ... />
  1. Use the Alert.show() function to display the text You have selected, followed by the date selected from the pickupDate DateChooser control, using the toDateString() function; this displays the date as a string.
    Note: Use single quotes inside of the Alert.show() method, because the change event already uses double quotes.
     
<mx:DateChooser id="pickupDate" change="Alert.show('You have selected ' + pickupDate.selectedDate.toDateString())" .../>
  1. Save the file.
  2. Run the application.
  3. From the pickupDate DateChooser control, click a date.
    You should see the Alert window with the date you selected (see Figure 3).
     
Choose a date and the Alert window will open.
Figure 3. Choose a date and the Alert window will open.
  1. Return to Flash Builder.
  2. To the DateChooser control for the Return Date, add the id property with a value of returnDate:
<mx:DateChooser id="returnDate" ... />
  1. Copy the change property and its value from the pickupDate DateChooser control and paste it within the opening tags for the returnDate DateChooser control.
<mx:DateChooser id="returnDate" change="Alert.show('You have selected ' + pickupDate.selectedDate.toDateString())" ... />
  1. Change the instance name reference within the Alert.show() method to returnDate.
<mx:DateChooser id="returnDate" change="Alert.show('You have selected ' + returnDate.selectedDate.toDateString())" ... />
  1. Save the file and run the application.
You should see that the date selected is displayed using the Alert window for both DateChooser controls.
 

 
Generate an event handler function

In this section, you will create a function to handle the change event for a DateChooser control.
 
  1. Return to Flash Builder.
  2. Locate the Script block.
  3. Below the import statement, create a private function named dateChangeHandler() that takes no parameters and returns a void data type.
private function dateChangeHandler():void { }
  1. Locate the pickupDate DateChooser control and cut the Alert.show() method from the change event.
  2. Replace it with a call to the dateChangeHandler() function:
<mx:DateChooser id="pickupDate" change="dateChangeHandler()" ... />
  1. In the Script block and within the dateChangeHandler() function, paste the Alert.show() method that you cut from the change event. Remember to append a semicolon.
private function dateChangeHandler():void { Alert.show('You have selected ' + pickupDate.selectedDate.toDateString()); }
  1. Save the file.
  2. Run the application.
  3. Click a date within the pickupDate DateChooser control.
    The Alert message displays the date you selected (see Figure 4).
     
Select a start date to open the Alert window.
Figure 4. Select a start date to open the Alert window.
  1. Return to Flash Builder.
  2. Locate the returnDate DateChooser control.
  3. For the change property, replace the value with a call to the dateChangeHandler() function:
<mx:DateChooser id="returnDate" change="dateChangeHandler()" />
  1. Save the file and run the application.
  2. Without selecting a pickup date, select a return date.
You should see the error display shown in Figure 5.
 
View the error that occurs when a return date is selected.
Figure 5. View the error that occurs when a return date is selected.
You will fix this error in the next exercise.
 
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.