In this exercise, you will use the RemoteObject component to send data to a server to insert it into the database. You will also handle the confirmation message from the server to display in an alert dialog box (see Figure 1).

Remember that, in a previous exercise, you consolidated the form data in a value object and dispatched it from a custom component using a custom event.

To the new RemoteObject instance, add the id property with a value of vehicleService, the destination property with a value of ColdFusion, the source property with a value of f4iaw100.remoteData.vehicleRequestData and the endpoint property with a value of http://adobetes.com/flex2gateway/.

Note: This example generates the XML using an Adobe ColdFusion server, but you can use any server to generate the XML file. Refer to the Flex and ColdFusion, PHP, Java, or .NET integration pages for more information.

Save the file.

Initialize the data transfer

In this section you will add the code to make the RemoteObject request and transfer the Form container data, as a value object dispatched from a custom component using a custom event, to the server.

Open the VehicleRequest.as file from the valueObjects package in the Package Explorer view.

Within the VehicleRequest.as file, above the VehicleRequest() class definition function, type [Rem to invoke the content assist tool and press Enter to insert the RemoteClass metadata tag into your code.

Place your cursor inside the closing bracket of the RemoteClass tag, type an opening parentheses and press Ctrl+Space to invoke the content assist tool. You should see the following:

Change the value of the alias property to f45iaw100.remoteData.VehicleRequest. This will map the VehicleRequest value object to the f45iaw100.remoteData.VehicleRequest Java object on the ColdFusion server.

Note the vehicleRequestEvent property with a value of vehiclerequestform1_vehicleRequestEventHandler(event).

The vehiclerequestform1_vehicleRequestEventHandler() function was created in Exercise 3.3 (Dispatching a value object from the custom component) to handle the vehicleRequestEvent custom event in the main application.

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

Within the function, delete the Alert.show() method.

Use the vehicleService.addVehicleRequest() method to pass the argument data set to the event.vehicleRequestData value.

The vehicleService.addVehicleRequest() method references the addVehicleRequest() cffunction located in the employeeData.cfc that the RemoteObject component is calling. The addVehicleRequest() cffunction requires the argument data, which is why you have to send the event.vehicleRequestData value object using the data parameter.

Use the Network Monitor to view

Note: In order to complete this part of the exercise, you must have Flash Builder Premium Edition installed. If you have Flash Builder Standard Edition installed, skip this section and continue with the next section. If you want to download and install a trial version of Flash Builder Premium Edition, be sure to: 1) back up your existing workspace and projects; 2) uninstall Flash Builder Standard Edition; and then 3) install the trial version of Flash Builder Premium Edition. To compare the Standard Edition with the Premium Edition, check out the Upgrade Details page.

In this section you will use the Flash Builder Network Monitor to analyze the result of the vehicleService RemoteObject instance.

For the vehicleService RemoteObject object, use the content assist tool to generate the result event (see Figure 2).

Figure 2. Use the content assist tool to generate the result event.

Use the content assist tool to generate a handler function for the result event (see Figure 3).

Figure 3. Generate a result handler function.

Within the Script block, locate the vehicleService_resultHandler() function and delete the generated code stub.

Save the file.

Open the Network Monitor.

Click the Enable Monitor button.

Run the application.

Select an employee, a pickup date and a return date, leave the Mobile Phone field empty and click Submit Request.

You should see an error (see Figure 4).

Figure 4. An error is displayed when you submit the form.

Return to Flash Builder.

Double-click the Network Monitor tab to maximize it.

Select the addVehicleRequest operation (see Figure 5).

Note the red circle with an X in it, signifying an error has occurred.

Note: If the workspace you are using has multiple projects open, you may not see the recording in the Network Monitor. Close all other projects and enable the monitor again for your current project and make sure the message in the Network Monitor view reads, "Enabled for project 'ex3_04_remote_starter.'"

Figure 6. Switch from Tree View to Raw View.

Locate the message that reads: Field 'VEHICLEREQUESTS.MOBILEPHONE' cannot be a zero-length string (see Figure 7).

Figure 7. Locate the error message in the Response tab of the Network Monitor.

Next, you will add a fault handler to show an Alert message when the Mobile Phone field is left blank.

Double-click the Network Monitor tab to minimize the view.

To the vehicleService RemoteObject object, add a fault event and, using the content assist tool, generate the fault handler.

Locate the vehicleService_faultHandler() method in the Script block and delete the generated code stub.

Within the function add the Alert.show() method to display the event.fault.faultString value as the text in the Alert pop-up.

Make the title of the alert message: Fault Information for addVehicleRequest.

Choose a Pickup Date and a Return Date, then click the Submit Request button.

You should see the Alert window display the message that your request was submitted successfully and you should also see the record id (see Figure 9).

Figure 9. View the message in the Alert window.

In this exercise, you learned how to use the RemoteObject component to send data to a server to insert it into the database. You also learned how to handle the confirmation message from the server to display an alert dialog box.