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

 

In previous exercises you created an Employee Portal: Vehicle Request Form. The application UI (the form) is encapsulated in a custom component file and the main application manages the data retrieval and transforms the returned employee data into an ArrayCollection instance of employee value objects. This data is passed to the custom component, via a custom property, and then displayed in the DropDownList control.

Remember that a value object is a packet of related data that you want to treat as a unit. For example, in the case of an employee, the first name, last name, email address, and so on, constitute a unit of data. In the first part of this exercise, you will aggregate data from the form into a second packet of data, or value object, that contains all the vehicle request information.

In the second part of this exercise, you will create a custom event class to dispatch the vehicle request data from the custom component back to the main application. Keep in mind that a custom event class is required when you are dispatching custom data in an event object.

When the user clicks the Submit button for the form, the vehicle request value object is created, passed to the new custom event object and then dispatched to the main application. The user is presented with an alert message that the form has been submitted (see Figure 1).

Preview the application.
Figure 1. Preview the application.
Create the value object to hold the form data
In this section you will create a new ActionScript class to represent the Employee Portal: Vehicle Request form data.
  1. Download the ex3_03_starter.zip file if you haven't already and extract the ex3_03_starter.fxp file to your computer.
  2. Open Flash Builder.
  3. Import the ex3_03_starter.fxp project file.
  4. Within the Package Explorer view, right-click the src folder and select New > ActionScript class (see Figure 2).
Create a new ActionScript class.
Figure 2. Create a new ActionScript class.
  1. Within the New ActionScript class, set the Package value to valueObjects and the Name to VehicleRequest (see Figure 3).
Type valueObjects for the Package and VehicleRequest for the name.
Figure 3. Type valueObjects for the Package and VehicleRequest for the name.
  1. Click Finish.
    You should see the VehicleRequest.as file in the Package Explorer view (see Figure 4). You should also see the VehicleRequest.as file open in the Editor view.
See the VehicleRequest.as file in the Package Explorer view.
Figure 4. See the VehicleRequest.as file in the Package Explorer view.
  1. In the VehicleRequest.as file, within the class definition, type id, press CTRL+1 to invoke the quick assist tool, and select the Create instance variable id option. This declares a private variable named id data typed to the Object class. Modify this variable so that the access modifier is public and so it is data typed to the String class.

     

public class VehicleRequest { public var id:String; public function VehicleRequest() { } }
  1. Below the id variable, use the quick assist tool to create four more public variables named phone, mobilePhone, pickupDate, and returnDate. Data type the variables to the String class.
public class VehicleRequest { public var id:String; public var phone:String; public var mobilePhone:String; public var pickupDate:String; public var returnDate:String; public function VehicleRequest() { } }
  1. Save the file.
Populate the value object with data

In this section you will use the click event of the Submit Request Button control to call a function that will assign property values to the VehicleRequest value object based on the information in the form fields.

  1. From the Package Explorer view, components package, open the VehicleRequestForm.mxml file.
  2. At the bottom of the Form container code, locate the FormItem container that nests the Button control.
  3. To the Button control, add the click event using the content assist tool (see Figure 5).
Use the content assist tool to create the click event for the Button control.
Figure 5. Use the content assist tool to create the click event for the Button control.
  1. Using the content assist tool, select the Generate Click Handler option (see Figure 6).
Use the content assist tool to create a click handler function.
Figure 6. Use the content assist tool to create a click handler function.
  1. Within the Script block, locate the submitButton_clickHandler() function.
  2. Within the submitButton_clickHandler() function, delete the generated code stub, create a local variable named vehicleRequestData and use the content assist tool to data type it to the VehicleRequest class (see Figure 7).
 Use the content assist tool to data type the variable to the VehicleRequest class.
Figure 7. Use the content assist tool to data type the variable to the VehicleRequest class.
  1. Ensure an import statement for the valueObjects.VehicleRequest class was created below the others.
<fx:Script> <![CDATA[ import mx.collections.ArrayCollection; import mx.controls.Alert; import mx.events.CalendarLayoutChangeEvent; import valueObjects.VehicleRequest;
  1. Within the submitButton_clickHandler() function, set the vehicleRequestData instance to a new instance of the VehicleRequest class. The vehicleRequestData instance is a value object that you will now populate with data from the form.
protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); }
  1. Below the vehicleRequestData variable declaration, set the vehicleRequestData.id value to the dropDownList.selectedItem.id value.

     

protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); vehicleRequestData.id = dropDownList.selectedItem.id; }
  1. Set the vehicleRequestData.phone value to the phone TextInput control's text property value.
protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); vehicleRequestData.id = dropDownList.selectedItem.id; vehicleRequestData.phone = phone.text; }
  1. Set the vehicleRequestData.mobilePhone value to the mobilePhone TextInput control's text property value.
protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); vehicleRequestData.id = dropDownList.selectedItem.id; vehicleRequestData.phone = phone.text; vehicleRequestData.mobilePhone = mobilePhone.text; }
  1. Set the vehicleRequestData.pickupDate value to the pickupDate.selectedDate.toDateString() value.
    Using the toDateString() method allows you to format the selected date as a String value so that it is compatible with the data on the server.
protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); vehicleRequestData.id = dropDownList.selectedItem.id; vehicleRequestData.phone = phone.text; vehicleRequestData.mobilePhone = mobilePhone.text; vehicleRequestData.pickupDate = pickupDate.selectedDate.toDateString(); }
  1. Set the vehicleRequestData.returnDate value to the returnDate.selectedDate.toDateString() value.
protected function submitButton_clickHandler(event:MouseEvent):void { var vehicleRequestData:VehicleRequest = new VehicleRequest(); vehicleRequestData.id = dropDownList.selectedItem.id; vehicleRequestData.phone = phone.text; vehicleRequestData.mobilePhone = mobilePhone.text; vehicleRequestData.pickupDate = pickupDate.selectedDate.toDateString(); vehicleRequestData.returnDate = returnDate.selectedDate.toDateString(); }
  1. Save the file.
View the populated value object in the Debugger

In this section you will use the Flash Builder Debugger to view the data in the value object that you just created.

  1. Place a breakpoint on the closing line of the submitButton_clickHandler() function (see Figure 8).

     

Place a breakpoint on the closing line of the submitButton_clickHandler() function.
Figure 8. Place a breakpoint on the closing line of the submitButton_clickHandler() function.
  1. Click the Debug button.
    You should see the application run in a browser.
  2. From the DropDownList control, select the employee with the last name Parker.
  3. In the Mobile Phone field, type 415-555-5555.
  4. From the Pickup Date DateChooser control, select a pickup date.
  5. From the Return Date DateChooser control, select a return date.
  6. Click the Submit Request Button control.

    You should see the Confirm Perspective Switch dialog box shown in Figure 9.

See the Confirm Perspective Switch dialog box.
Figure 9. See the Confirm Perspective Switch dialog box.
  1. Click Yes to confirm the switch.
  2. Within the Flash Debug perspective, double-click the Variables tab to maximize the view.
  3. Expand the vehicleRequestData node.
    You should see the properties are populated with values from the Form container (see Figure 10).
Expand the vehicleRequestData node.
Figure 10. Expand the vehicleRequestData node.
  1. Double-click the Variables tab to minimize the view.
  2. Click the Terminate button to stop the debugging session.
  3. Click the Flash perspective button to return to the Flash perspective.
Create a custom event class to dispatch the form data
You will dispatch the value object from the custom component to the main application. Remember that in order to pass custom data in an event, you must create a custom event class, which you will do in this section.
  1. From the Package Explorer view, right-click the src folder and select New > ActionScript Class.
  2. In the New ActionScript Class dialog box, set the Package value to events and the Name to VehicleRequestEvent (see Figure 11).
Type events for the Package and VehicleRequestEvent for the Name.
Figure 11. Type events for the Package and VehicleRequestEvent for the Name.
  1. Next to the Superclass field, click the Browse button.
  2. In the Superclass dialog box, select the Event class and click OK (see Figure 12).
Select the Event class and click OK.
Figure 12. Select the Event class and click OK.
  1. In the New ActionScript Class dialog box, click Finish.
    You should see the VehicleRequestEvent.as file in the Package Explorer view (see Figure 13). You should also see the VehicleRequestEvent.as file open in the Editor view.
View the VehicleRequestEvent.as file in the Package Explorer view.
Figure 13. View the VehicleRequestEvent.as file in the Package Explorer view.
  1. In the VehicleRequestEvent.as file, within the class definition, use quick assist to declare a public variable named vehicleRequestData and use the content assist tool to data type it to the VehicleRequest class (see Figure 14).
Use the content assist tool data type the vehicleRequestData variable.
Figure 14. Use the content assist tool data type the vehicleRequestData variable.
  1. Ensure that an import statement for the valueObjects.VehicleRequest class has been created above the class definition.
package events { import flash.events.Event; import valueObjects.VehicleRequest; public class VehicleRequestEvent extends Event { ...
  1. From the VehicleRequestEvent() function, remove the last two arguments.
    The type argument is used by the Event class to define the event type.
  2. To the VehicleRequestEvent() function add the vehicleRequestData argument and data type it to the VehicleRequest class.
    With this code, you are declaring that this custom event class requires two arguments: the event type and the data from the form, packaged as a VehicleRequest value object.
public class VehicleRequestEvent extends Event { public var vehicleRequestData:VehicleRequest; public function VehicleRequestEvent(type:String, vehicleRequestData:VehicleRequest) { super(type, bubbles, cancelable); } }
  1. Within the VehicleRequestEvent() function, from the super() method, remove the bubbles and cancelable arguments.
public function VehicleRequestEvent(type:String, vehicleRequestData:VehicleRequest){ super(type); }
  1. Below the super() method, set the this.vehicleRequestData value to the vehicleRequestData object from the constructor's argument.
public function VehicleRequestEvent(type:String, vehicleRequestData:VehicleRequest){ super(type); this.vehicleRequestData = vehicleRequestData; }
  1. Save the file.
Dispatch and handle the custom event
In this section you will learn how to dispatch the custom event, with the form data, from the custom component to the main application and then handle the event by displaying an alert message to the user.
  1. Return to the VehicleRequestForm.mxml in Flash Builder.
  2. Below the Metadata comment, create a Metadata block.
<fx:Metadata> </fx:Metadata>
  1. Within the Metadata block, type [Ev to invoke the content assist tool and declare the Event() method with the name argument set to vehicleRequestEvent and the type argument set to the events.VehicleRequestEvent class.
<fx:Metadata> [Event(name="vehicleRequestEvent", type="events.VehicleRequestEvent")] </fx:Metadata>
  1. Within the >code>Script block, import the events.VehicleRequestEvent class.
import events.VehicleRequestEvent;
  1. Locate the submitButton_clickHandler() function.
  2. At the bottom of the submitButton_clickHandler() function, create a local variable named eventObject and data type it to the VehicleRequestEvent class.
protected function submitButton_clickHandler(event:MouseEvent):void { ... vehicleRequestData.returnDate = returnDate.selectedDate.toDateString(); var eventObject:VehicleRequestEvent; }
  1. To the eventObject variable, assign a new instance of the VehicleRequestEvent class, passing vehicleRequestEvent as the type argument and the local vehicleRequestData variable value as the vehicleRequestData argument.
protected function submitButton_clickHandler(event:MouseEvent):void { ... vehicleRequestData.returnDate = returnDate.selectedDate.toDateString(); var eventObject:VehicleRequestEvent = new VehicleRequestEvent("vehicleRequestEvent",vehicleRequestData); }
  1. Below the eventObject variable declaration, use the dispatchEvent() method to dispatch the eventObject event.

     

protected function submitButton_clickHandler(event:MouseEvent):void { ... vehicleRequestData.returnDate = returnDate.selectedDate.toDateString(); var eventObject:VehicleRequestEvent = new VehicleRequestEvent("vehicleRequestEvent",vehicleRequestData); dispatchEvent(eventObject); }
  1. Save the file.
  2. From the Package Explorer view, open the ex3_03_starter.mxml file.
  3. Locate the components:VehicleRequestForm instance.
  4. Within the tag, use the content assist tool to add the vehicleRequestEvent event (see Figure 15).
Use the content assist tool to add the vehicleRequestEvent.
Figure 15. Use the content assist tool to add the vehicleRequestEvent.
  1. Use the content assist tool to generate an event handler function for the vehicleRequestEvent (see Figure 16).
    Note that Flash Builder automatically gave the component an instance name of vehiclerequestform1.
Use the content assist tool to generate an event handler function.
Figure 16. Use the content assist tool to generate an event handler function.
  1. Within the Script block, locate the vehiclerequestform1_vehicleRequestEventHandler() function.
  2. Within the function, delete the generated code stub and use the Alert.show() method to display the message, Your vehicle request has been submitted.
protected function vehiclerequestform1_vehicleRequestEventHandler(event:Event):void { Alert.show("Your vehicle request has been submitted."); }
  1. Save the file.
  2. Run the application.
  3. From the DropDownList control, select an employee.
  4. In the Mobile Phone field, type 415-555-5555.
  5. From the Pickup Date DateChooser control, select a pickup date.
  6. From the Return Date DateChooser control, select a return date.
  7. Click the Submit Request Button control.
    You should see the Alert window displaying the message, "Your vehicle request has been submitted." (see Figure 17).
Click the Button control to dispatch the event and see the Alert window.
Figure 17. Click the Button control to dispatch the event and see the Alert window.
In this tutorial you consolidated your knowledge about creating custom events and value objects by creating a custom event that dispatched a value object, representing data from a form. You also handled the custom event in the main application and displayed an alert dialog to the user.
 
In the next videos and exercises, you will learn how to pass this data back to the server for insertion into the database.
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.