
Content
- Create an ActionScript class that extends the Event class
- Add properties to the class to store the data
- Create the constructor function and populate the class properties
- Define the event type for the extended class
- Dispatch the event object with the data
- Handle the event object in the main application
Created
2 May 2011
Requirements
Prerequisite knowledge | Required products | Exercise files | User level | |
|
Flash Builder 4.7 Premium (Download trial) |
Beginning |
In Exercise 3.1 you learned how to dispatch an event from the
Choose
component instance and handle it in the main application to make the Preview
component instance visible.In this exercise you will pass data from the
Choose
component instance to the Preview
component instance (see Figure 1). To accomplish this, you must do more than just create, instantiate, and dispatch an event. To pass data with the event, you must extend the Event type by creating your own ActionScript class to manage the additional data.Figure 1. Review your task for this exercise.
You want all of the functionality of the Event class, but you need the ability to store custom data in the event object. In this section, you will create a new ActionScript class that extends the Event class with additional class properties. By extending the Event class, you maintain access to all of its functionality and can add your own properties to store the data.
- Download the ex3_02_starter.zip file if you haven't already and extract the file ex3_02_starter.fxp to your computer.
- Open Flash Builder.
- Import the ex3_02_starter.fxp file.
- Open the ex3_02_starter.mxml file.
- Run the application.
- Click the Preview Button control to display the
Preview
custom component which contains the Employee of the Month Panel container (see Figure 2). In the previous exercise you made the Employee of the Month panel invisible when the application started up, and then made it visible only when the user clicked the Preview button in theChoose
custom component.
Figure 2 . Click the Preview Button control to display the custom component.
- Return to Flash Builder.
- Open the Choose.mxml file in the components directory.You can see that the Preview button click is handled by the
preview_clickHandler()
function, which instantiates an event object of theshowPreview
event type and dispatches it to the main application. - Return to the ex3_02_starter.mxml file and locate the
chooseEmployee
component instance.You can see that the main application handles theshowPreview
event with thechooseEmployee_showPreviewHandler()
event handler, which makes thePreview
component instance visible. - In the Package Explorer view, right-click the src folder and select New > ActionScript Class (see Figure 3).
Figure 3 . Create a new ActionScript class file.
- In the New ActionScript Class dialog box, for the Package type events and for the Name, type ShowPreview. Remember that classes are by convention named with an initial capital letter. Do not confuse this class with the
showPreview
event type defined in theMetadata
tag block of theChoose
custom component. - Click the Browse button next to the Superclass field.
- In the SuperClass dialog box, type event and then select the Event class (see Figure 4).
Figure 4 . Assign the Superclass value to the Event class.
- Click OK. Your New ActionScript Class dialog box should appear as shown in Figure 5.
Figure 5. Name the new ActionScript class ShowPreview and assign it a Superclass of the flash.events.Event class.
- Click Finish. The ShowPreview.as file opens in the editor. Note that line 5 declares the ShowPreview class and extends the Event class (see Figure 6).
Figure 6 . The ShowPreview class extends the Event class.
In this section, you will declare the properties to be used with the ShowPreview class. Remember that each of these properties are the reason that you are creating an event class. They will hold the data from the
Choose
custom component. Specifically, they will hold information from the DropDownList control for the selected employee as well as the text that is typed into the congratulatory message TextArea control.- Within the class declaration, but above the
ShowPreview()
constructor function, type employeeInfo and use the quick assist tool (Ctrl+1) to create a variable. Modify the generated variable so that you have apublic
variable namedemployeeInfo
data typed to the Object class.
public class ShowPreview extends Event
{
public var employeeInfo:Object;
public function ShowPreview(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
- Below the
employeeInfo
variable, use quick assist to declare a public variable namedmessage
and data type it to theString
class:
Because the
employeeInfo
property is an object, it can contain many name-value pairs of data. It will be used to hold all the data for the selected item in the DropDownList control of the Choose
component. Remember that the DropDownList control is populated with data from the employees.xml file in the data directory. Although the control's labelField
property is set to display only the firstName
values from the XML file, remember that lastName
, id
, title
, and all the other nodes in the XML file are also stored as name-value pairs in the DropDownList control.public var employeeInfo:Object;
public var message:String;
The
message
property of this new class will hold the string data that is typed into the TextArea control of the Choose
custom component.You just created the properties, but now you must populate them with information.
When an ActionScript class is instantiated using the new keyword, data can be passed to the instance between the parentheses of the constructor. In this section, you will define arguments for the constructor function that will accept data.
- From the
ShowPreview()
constructor and the nestedsuper()
method, remove the bubbles and cancelable parameters.
public function ShowPreview(type:String)
{
super(type);
}
- To the
ShowPreview()
function, add theemployeeInfo
andmessage
variables as parameters; be sure to apply the corresponding data type to each.
The first argument in the constructor is the name of the event type. Remember the event types that you have already encountered are
click
and change
. In this case, the event type that you will declare is the showPreview
event type defined in the Metadata
compiler directive.public function ShowPreview(type:String, employeeInfo:Object, message:String)
{
super(type);
}
- Within the
ShowPreview()
function, below thesuper()
method, assign theemployeeInfo
and themessage
constructor arguments as the values for the corresponding class properties.
public function ShowPreview(type:String,employeeInfo:Object,message:String)
{
super(type);
this.employeeInfo = employeeInfo;
this.message = message;
}
You use the
this
keyword before the class properties to distinguish between the class property and the constructor arguments in the assignment.You will no longer be creating an instance of the default flash.events.Event class. You want to instantiate the ShowPreview class that can accept the additional data. In this section, you will adjust the Choose custom component's Metadata compiler directive to include the
showPreview
event type.- From the Package Explorer view, open the Choose.mxml file.
- Locate the
MetaData
tag set. - To the
type
parameter of the nestedEvent()
method, change the assigned value toevents.ShowPreview
.
<fx:Metadata>
[Event(name="showPreview", type="events.ShowPreview")]
</fx:Metadata>
The ShowPreview class is in the events folder of the Flex project so the class package references that folder. Keep in mind that the
showPreview
(lowercase s) value is the event type, similar to the click
or change
event types you've used in other components. ShowPreview (capital S) is the event class.In other words, you will be creating an instance of the ShowPreview class and dispatching the
showPreview
event that will be handled in the main application.Remember the scenario for this application includes the user choosing a name from the DropDownList control, typing a congratulatory message and then clicking the Preview button.
Currently, when the user clicks the Preview button, the
click
event is handled by the preview_clickHandler()
function, which creates a generic event object that dispatches the showPreview
event.In this section, you will modify the
preview_clickHandler()
function to create a ShowPreview event object that contains data and that dispatches the showPreview
event.- Within the
Script
block, below the event handlers comment, locate thepreview_clickHandler()
function.
protected function preview_clickHandler(event:MouseEvent):void
{
var eventObject:Event = new Event("showPreview");
dispatchEvent(eventObject);
}
- Within the function, change the
eventObject
variable data type toShowPreview
.
protected function preview_clickHandler(event:MouseEvent):void
{
var eventObject:ShowPreview = new Event("showPreview");
dispatchEvent(eventObject);
}
- Instantiate the
eventObject
variable to an instance of the ShowPreview class, passingshowPreview
as the type parameter, the selected entry from theemployeeList
DropDownList control as theemployeeInfo
parameter and the text value of the message TextArea control as themessage
parameter.Note: TheemployeeList.selectedItem
property holds the object data for the currently selected item in the DropDownList control.
protected function preview_clickHandler(event:MouseEvent):void
{
var eventObject:ShowPreview = new ShowPreview("showPreview", employeeList.selectedItem, message.text);
dispatchEvent(eventObject);
}
- Within the
Script
block, locate the import statements comment. - If the event.ShowPreview package is not present in an
import
statement, add it below the statement that imports the mx.collections.ArrayCollection package.
// import statements ----------------------------------------
import mx.collections.ArrayCollection;
import events.ShowPreview;
- Save the file.
Note: If you used the Flash Builder code hinting options when you created the ShowPreview event object, then the
import
statement would have been created automatically.When the user clicks the Preview button, the data from the DropDownList control and the congratulatory message are now packaged in the event object and dispatched to the main application.
In this section you will update the
showPreview
event's handler in the main application to pass the data into the Preview
component instance for display in the Employee of the Month panel.- Return to the ex3_02_starter.mxml file.
- Within the
Script
block, locate thechooseEmployee_showPreviewHandler()
function. - To the function's arguments, reassign the
event
parameter to be a data type of the ShowPreview class.
protected function chooseEmployee_showPreviewHandler(event:ShowPreview):void
{
previewEmployeeOfTheMonth.visible = true;
}
- Within the function, assign the
previewEmployeeOfTheMonth
component'semployeeInfo
property value toevent.employeeInfo
.
protected function chooseEmployee_showPreviewHandler(event:ShowPreview):void
{
previewEmployeeOfTheMonth.visible = true;
previewEmployeeOfTheMonth.employeeInfo = event.employeeInfo;
}
- Give the
previewEmployeeOfTheMonth
component'smessage
property a value ofevent.message
.
Remember that the
Preview
custom component expects two properties: employeeInfo
and message
. Open the Preview.mxml file to see those properties and how they are bound to the UI elements in the Panel container.protected function chooseEmployee_showPreviewHandler(event:ShowPreview):void
{
previewEmployeeOfTheMonth.visible = true;
previewEmployeeOfTheMonth.employeeInfo = event.employeeInfo;
previewEmployeeOfTheMonth.message = event.message;
}
- Within the
Script
block, locate theimport
statements comment. - Below the last
import
statement, import the events.ShowPreview package.
// import statements ----------------------------------------
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import events.ShowPreview;
- Save the file and run the application.
- Select an employee from the DropDownList control (see Figure 7).
Figure 7 . Choose an employee.
- Type a message to the employee (see Figure 8).
Figure 8. Type a message to the employee.
- Click the Preview button control.You should see the Employee of the Month container appear populated with data (see Figure 9).
Figure 9. Click the Preview button control to view the employee of the month.
In this exercise you learned how to extend an ActionScript class and dispatch and handle a custom event. In the next exercise you will aggregate data from the form into a second packet of data, or value object, that contains all the vehicle request information.