Preorder Estimated Availability Date. Your credit card will not be charged until the product is shipped. Estimated availability date is subject to change.Preorder Estimated Availability Date. Your credit card will not be charged until the product is ready to download. Estimated availability date is subject to change.

User level

Required products

Sample files

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

Within the New ActionScript class, set the Package value to valueObjects and the Name to VehicleRequest (see Figure 3).

Figure 3. Type valueObjects for the Package and VehicleRequest for the name.

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.

Figure 4. See the VehicleRequest.as file in the Package Explorer view.

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.

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.

From the Package Explorer view, components package, open the VehicleRequestForm.mxml file.

At the bottom of the Form container code, locate the FormItem container that nests the Button control.

To the Button control, add the click event using the content assist tool (see Figure 5).

Figure 5. Use the content assist tool to create the click event for the Button control.

Figure 6. Use the content assist tool to create a click handler function.

Within the Script block, locate the submitButton_clickHandler() function.

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

Figure 7. Use the content assist tool to data type the variable to the VehicleRequest class.

Ensure an import statement for the valueObjects.VehicleRequest class was created below the others.

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.

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.

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

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

Click the Debug button.

You should see the application run in a browser.

From the DropDownList control, select the employee with the last name Parker.

In the Mobile Phone field, type 415-555-5555.

From the Pickup Date DateChooser control, select a pickup date.

From the Return Date DateChooser control, select a return date.

Click the Submit Request Button control.

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

Figure 9. See the Confirm Perspective Switch dialog box.

Click Yes to confirm the switch.

Within the Flash Debug perspective, double-click the Variables tab to maximize the view.

Expand the vehicleRequestData node.

You should see the properties are populated with values from the Form container (see Figure 10).

Figure 10. Expand the vehicleRequestData node.

Double-click the Variables tab to minimize the view.

Click the Terminate button to stop the debugging session.

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.

From the Package Explorer view, right-click the src folder and select New > ActionScript Class.

In the New ActionScript Class dialog box, set the Package value to events and the Name to VehicleRequestEvent (see Figure 11).

Figure 11. Type events for the Package and VehicleRequestEvent for the Name.

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

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.

Return to the VehicleRequestForm.mxml in Flash Builder.

Below the Metadata comment, create a Metadata block.

<fx:Metadata>
</fx:Metadata>

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.

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.

You should see the Alert window displaying the message, "Your vehicle request has been submitted." (see Figure 17).

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.