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

In earlier exercises, you have used the HTTPService component to retrieve data from both static and dynamic XML sources. In this exercise, you will use an HTTPService object 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.

Preview the application
Figure 1. Preview the application

Create the HTTPService instance

In this section you will create a HTTPService instance that will be used to send information to the server.

  1. Download the ex3_04_http_starter.zip file if you haven't already and extract the ex3_04_ http_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex3_04_ http_starter.fxp project file.
  4. From the Package Explorer view, open the ex3_04_http_starter.mxml file.
  5. Within the Declarations block, below the HTTPService instance, create another HTTPService instance by typing HTTP and pressing Ctrl+space twice to show code templates with content assist. Select the HTTPService object code template.
<fx:Declarations> <s:HTTPService id="employeeService" url="http://www.adobetes.com/f45iaw100/remoteData/employees.xml" result="employeeService_resultHandler(event)" fault="employeeService_faultHandler(event)" /> <s:HTTPService id="service" url="url" fault="onFault(event)" result="onResult(event)" resultFormat="object" showBusyCursor="true"/> </fx:Declarations>
  1. To the new HTTPService object, modify the id property to have a value of vehicleService and the url property to have a value of http://www.adobetes.com/f45iaw100/remoteData/addVehicleRequest.cfm, and the method property with a value of POST.
  2. Add the method property with a value of POST and delete the fault, result, resultFormat, and showBusyCursor properties.
<s:HTTPService id="vehicleService" url="http://www.adobetes.com/f45iaw100/remoteData/addVehicleRequest.cfm" method="POST"/>

    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.

  1. Save the file.

Initializing the data transfer

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

  1. Locate the component:VehicleRequestForm instance below the UI components comment.
  2. 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.

  3. Within the Script block, locate the vehiclerequestform1_vehicleRequestEventHandler() function.
  4. Within the function, delete the Alert.show() method.
  5. Use the vehicleService.send() method to pass the event.vehicleRequestData value to the server.
protected function vehiclerequestform1_vehicleRequestEventHandler(event:VehicleRequestEvent):void { vehicleService.send(event.vehicleRequestData); }
  1. Save the file.

Use the Network Monitor to view the result data

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 HTTPService object data transfer and response.

  1. For the vehicleService HTTPService object, use the content assist tool to generate the result event (see Figure 2).
Use the content assist tool to generate the result event.
Figure 2. Use the content assist tool to generate the result event.
  1. Use the content assist tool to generate a handler function for the result event (see Figure 3).
Generate a result handler function.
Figure 3. Generate a result handler function.
  1. Within the Script block, locate the vehicleService_resultHandler() function and delete the generated code stub..
  2. Save the file.
  3. Open the Network Monitor.
  4. Click the Enable Monitor button.
  5. Run the application.
  6. 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).
An error is displayed when you submit the form.
Figure 4. An error is displayed when you submit the form.
  1. Return to Flash Builder.
  2. Double-click the Network Monitor tab to maximize it.
  3. Select the POST 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_http_starter.'"

Select the POST operation.
Figure 5. Select the POST operation.
  1. Open the Response tab and switch to Raw View (see Figure 6).
Switch from Tree View to Raw View.
Figure 6. Switch from Tree View to Raw View.

    You should see the Response data. Note that the first line tells you that you have experienced the 500 Error Executing Database Query.

  1. Locate the message that reads: Field 'VEHICLEREQUESTS.MOBILEPHONE' cannot be a zero-length string (see Figure 7).
Locate the error message in the Response Tab of the Network Monitor.
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.

  1. Double-click the Network Monitor tab to minimize the view.
  2. To the vehicleService HTTPService object, add a fault property and, using the content assist tool, generate the fault handler.
  3. Locate the vehicleService_faultHandler() method in the Script block and delete the generated code stub.
  4. Within the function add the Alert.show() method to display the event.fault.faultString value as the text in the Alert pop-up.
  5. Make the title of the alert message Fault Information for POST.
protected function vehicleService_faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Fault Information for POST"); }
  1. Save the file.
  2. Run the application.
  3. Fill out everything except the Mobile Phone field in the form and click Submit Request.
  4. You should see the alert message displayed (see Figure 8).
View the alert message displaying the faultString value.
Figure 8. View the alert message displaying the faultString value.

Handle the result event

In this section, you will use the HTTPService object's result event and the id value to determine if the value object has been successfully written to the data table on the server.

  1. Locate the vehicleService_resultHandler() function.
  2. Within the function, type if and press Ctrl+Space twice to show code templates in the content assist tool. Select the if statement code template. You should see an if conditional statement added to your code.
protected function vehicleService_resultHandler(event:ResultEvent):void { if() { } }
  1. Set the if statement to evaluate the event.result.vehicleData.vehicleRequest.id value.
protected function vehicleService_resultHandler(event:ResultEvent):void { if(event.result.vehicleData.vehicleRequest.id) { }
  1. Within the if statement, use the Alert.show() method to display the text: The request was submitted. The record id is and then concatenate the event.result.vehicleData.vehicleRequest.id value.
protected function vehicleService_resultHandler(event:ResultEvent):void { if(event.result.vehicleData.vehicleRequest.id) { Alert.show("The request was submitted. The record id is " + event.result.vehicleData.vehicleRequest.id); } }
  1. Save the file and run the application.
  2. Within the DropDownList control, select an employee.
  3. In the Mobile Phone field, type the 555-555-5555.
  4. 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).

View the message in the Alert window.
Figure 9. View the message in the Alert window.

In this tutorial you learned use an HTTPService object 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.