
Created
2 May 2011
Requirements
Prerequisite knowledge | Required products | Exercise files | User level | |
|
Flash Builder 4.7 Premium (Download trial) |
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).
In this exercise you will learn how to:
In this section you will use inline ActionScript to handle a change in the application.
- Download the ex2_01_starter.zip file if you haven't already and extract the file ex2_01_starter.fxp to your computer.
- Open Flash Builder.
- Import the ex2_01_starter.fxp file.
- Open the ex2_01_starter.mxml file.
- In Design mode, select the DateChooser control for the Pickup Date.
- In the Properties view, assign the DateChooser control's
id
property a value of pickupDate (see Figure 2).
- Switch to Source mode.
- Below the Script comment, create a Script block.
- Within the Script block, import the Alert class:
import mx.controls.Alert;
- Locate the pickupDateDateChooser control.
- To the control, add the change property assigned to run the show() method of the Alert package:
<mx:DateChooser id="pickupDate"
change="Alert.show()"
... />
- 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())"
.../>
- Save the file.
- Run the application.
- From the
pickupDate
DateChooser control, click a date.You should see the Alert window with the date you selected (see Figure 3).
- Return to Flash Builder.
- To the DateChooser control for the Return Date, add the id property with a value of returnDate:
<mx:DateChooser id="returnDate"
... />
- 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())"
... />
- 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())"
... />
- Save the file and run the application.
You should see that the date selected is displayed using the Alert window for both DateChooser controls.
In this section, you will create a function to handle the change event for a DateChooser control.
- Return to Flash Builder.
- Locate the Script block.
- Below the import statement, create a private function named dateChangeHandler() that takes no parameters and returns a void data type.
private function dateChangeHandler():void
{
}
- Locate the pickupDate DateChooser control and cut the Alert.show() method from the change event.
- Replace it with a call to the dateChangeHandler() function:
<mx:DateChooser id="pickupDate"
change="dateChangeHandler()"
... />
- 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());
}
- Save the file.
- Run the application.
- Click a date within the pickupDate DateChooser control.
The Alert message displays the date you selected (see Figure 4).
- Return to Flash Builder.
- Locate the returnDate DateChooser control.
- For the change property, replace the value with a call to the
dateChangeHandler() function:
<mx:DateChooser id="returnDate"
change="dateChangeHandler()" />
- Save the file and run the application.
- Without selecting a pickup date, select a return date.
You should see the error display shown in Figure 5.
You will fix this error in the next exercise.
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.