Exercise 2.5: Populating an application with data and handling faults (HTTPService)

Introduction

The HTTPService component can retrieve data over the Hypertext Transfer Protocol (HTTP). Since the returned data is not typed, this method is largely used to return simple strings or XML data, which can be static or dynamically generated.

In this exercise you will use the HTTPService object to retrieve dynamically generated content from a remote application server by supplying a direct URL to the template. You will retrieve all of the fictional employees in a company to display in a DropDownList control (see Figure 1). Lastly, you will learn how to use the fault event to show an alert message in the event of retrieval error.

In this exercise you will learn how to:

• Use the HTTPService component to retrieve XML data
• Implement the fault event
• Examine the fault event object
• Display the fault message in an Alert dialog box

In this section, you will create an instance of an HTTPService component to retrieve dynamically generated XML from a remote server.

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. Open a browser window and navigate to
   http://www.adobetes.com/f45iaw100/remoteData/employeeData.cfm.

   You should see the dynamically generated XML shown in Figure 2.

2. Download the ex2_05_http_starter.zip file if you haven't already and extract the ex2_05_http_starter.fxp to your computer.
3. Open Flash Builder.
4. Import the ex2_05_http_starter.fxp file.
5. Open the ex2_05_http_starter.mxml file.
6. The starter file for this application is the same as the solution file from Exercise 2.4: Populating an ArrayCollection with retrieved data.
7. Locate the Declarations block.
8. To the nested HTTPService object, change the value of the url property to http://adobetes.com/f45iaw100/remoteData/employeeData.cfm.

9. Save the file.
10. Run the application.

    Everything runs exactly the same as the previous exercise. The only difference is that you are now pulling XML data that is dynamically generated, rather than statically built.

11. Select an employee from the DropDownList control to see the Office Phone field populate with a phone number.

1. Return to the ex2_05_http_starter.mxml.
2. Within the Declarations block, locate the HTTPService object.
3. For the HTTPService object, use the content assist tool to generate the fault event (see Figure 3).

Using the content assist tool to generate the fault event causes the Generate Fault Handler option to display (see Figure 4).

4. Click the menu option or press the Enter key to generate a fault handler function.

In this section, you will use the Flash Builder Debugger to view the information returned from the fault event.

1. From the HTTPService object's url property value, remove the last character so that the URL will be invalid:

2. Within the Script block, locate the generated employeeService_faultHandler() function.

3. Add a breakpoint to the same line as the closing brace of the employeeService_faultHandler() function (see Figure 5).

4. Save the file.
5. Click the Debug button.
6. Click Yes when the Confirm Perspective Switch dialog box appears.
7. Double-click the Variables tab to maximize the view.
8. In the Variables view, expand the event object to reveal the fault event (see Figure 6).

   Note the faultString property and value.

9. Double-click the Variables tab to minimize it.
10. Click the Terminate button to end the debugging session.
11. Return to the Flash perspective by clicking the Flash perspective button (see Figure 7).

In this section, you will use the Flex Alert class to create a pop-up dialog box to display fault data.

1. Within the Script block, locate the employeeService_faultHandler() function.
2. Within the function, use the show() method of the mx.controls.Alert class to display the event.fault.faultString value as text in an Alert pop-up. Make the title of the alert Fault Information.

   Within the Script block, note the import statement for the mx.controls.Alert class. If this is not present, you will have to add it to make the application work.

3. Save the file and run the application.

   You will see the Alert dialog box display the fault event information (see Figure 8).

In this exercise you learned how to use an HTTPService object to retrieve data from an dynamically generated XML file and use the fault event.