- Requirements
Prerequisite knowledge Required products Sample files
Exercise 2.1: Handling a user event
Flash Builder 4.7 Premium (Download trial)
User level    
Beginning    

 

 
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.
 
This is the finished application.
Figure 1. This is the finished application.
In this exercise you will learn how to:
 

 
Use the HTTPService component to retrieve XML data

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.
     
View the dynamic XML.
Figure 2. View the dynamic XML.
  1. Download the ex2_05_http_starter.zip file if you haven't already and extract the ex2_05_http_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex2_05_http_starter.fxp file.
  4. Open the ex2_05_http_starter.mxml file.
  5. The starter file for this application is the same as the solution file from Exercise 2.4: Populating an ArrayCollection with retrieved data.
  6. Locate the Declarations block.
  7. To the nested HTTPService object, change the value of the url property to http://adobetes.com/f45iaw100/remoteData/employeeData.cfm.
<s:HTTPService id="employeeService" url="http://adobetes.com/f45iaw100/remoteData/employeeData.cfm" result="employeeService_resultHandler(event)"/>
  1. Save the file.
  2. 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.
     
  3. Select an employee from the DropDownList control to see the Office Phone field populate with a phone number.

 
Implement the fault event

  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).
Use the content assist tool to generate the fault event for the HTTPService object.
Figure 3. Use the content assist tool to generate the fault event for the HTTPService object.
    Using the content assist tool to generate the fault event causes the Generate Fault Handler option to display (see Figure 4).
     
Generate a fault handler function.
Figure 4.Generate a fault handler function.
  1. Click the menu option or press the Enter key to generate a fault handler function.

 
Examine the fault event object

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:
<fx:Declarations> <s:HTTPService id="employeeService" url="http://adobetes.com/f45iaw100/remoteData/employeeData.cf" result="employeeService_resultHandler(event)" fault="employeeService_faultHandler(event)"/> </fx:Declarations>
  1. Within the Script block, locate the generated employeeService_faultHandler() function.
protected function employeeService_faultHandler(event:FaultEvent):void { // TODO Auto-generated method stub }
  1. Add a breakpoint to the same line as the closing brace of the employeeService_faultHandler() function (see Figure 5).
Place the breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.
Figure 5. Place the breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.
  1. Save the file.
  2. Click the Debug button.
  3. Click Yes when the Confirm Perspective Switch dialog box appears.
  4. Double-click the Variables tab to maximize the view.
  5. In the Variables view, expand the event object to reveal the fault event (see Figure 6).
    Note the faultString property and value.
     
View the debugging information for the fault event in the Variables view.
Figure 6. View the debugging information for the fault event in the Variables view.
  1. Double-click the Variables tab to minimize it.
  2. Click the Terminate button to end the debugging session.
  3. Return to the Flash perspective by clicking the Flash perspective button (see Figure 7).
Click the Flash perspective button.
Figure 7. Click the Flash perspective button.

 
Display the fault data in an Alert dialog box

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.
     
protected function employeeService_faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Fault Information"); }
  1. Save the file and run the application.
    You will see the Alert dialog box display the fault event information (see Figure 8).
     
View the fault information within an Alert class dialog box.
Figure 8. View the fault information within an Alert class dialog box.
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.
 
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.