In this exercise, you will use an HTTPService object with result and fault events to populate the sample application with data and handle an invalid data URL (see Figure 1).

Figure 1. Review your task for this exercise.

In this exercise, you will learn how to:

• Use the HTTPService object
• Make the HTTPService request
• Use results in data bindings
• Creating the result event
• Examine the result event object
• Populate an ArrayCollection object with the result event
• Use the fault event
• Examine the fault event object
• Display the fault data in an Alert dialog box

Requirements

In order to complete this tutorial, you need the following software and files:

Flash Builder 4

• Try
• Buy

Exercise files:

• ex4_03_starter.zip (ZIP, 20 KB)
• ex4_03_solution.zip (ZIP, 20 KB)

Prerequisite knowledge:

• Exercise 1.1: Creating and skinning an application

Using the HTTPService object

In this section, you will use an HTTPService object to retrieve the data from the employees.xml file.

1. Download the ex4_03_starter.zip file if you haven't already and extract the file ex4_03_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_03_starter.fxp file.
4. Open the EmployeeDirectory.mxml file.
5. Locate the Declarations comment.
6. Below the comment, add a Declarations tag block:

   <!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   <fx:Declarations>
   
   </fx:Declarations>
   

7. Between the Declarations tag set, add an HTTPService object instance:

   <fx:Declarations>
   
   <s:HTTPService/>
   
   </fx:Declarations>
   

8. To the HTTPService object, assign the id property value to employeeService and the url property value to http://adobetes.com/f4iaw100/remoteData/employees.xml:

   <fx:Declarations>  
     <s:HTTPService id="employeeService" 
     url="http://adobetes.com/f4rca100/remoteData/employees.xml">
   </fx:Declarations>
   

   Note: You can browse to the URL to see the XML data.

9. Save the file.

Making the HTTPService request

In this section you will retrieve the XML data using the HTTPService object and the creationComplete event of the main application.

To the opening Application tag, add the creationComplete event and assign its value to the employeeService.send() method:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo" 
minWidth="1024" minHeight="768" 
creationComplete="employeeService.send()">

Using results in data bindings

In this section, you will map the result of the HTTPService object to Flex DataGrid and Label controls.

1. Locate the UIcomponents comment.
2. Below the comment, create a DataGrid control instance:

   <!-- UI components ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   <mx:DataGrid/>
   

   Note: In this exercise, you are simply using the DataGrid control as a simple mechanism to display data. You will learn more about the DataGrid control in later videos.

3. To the DataGrid control, bind the dataProvider property value to the last result from the employee data returned by the employeeService HTTPService object, employeeService.lastResult.employees.employee.
4. Save the file.
5. Run the application.

   The DataGrid control is populated with data (see Figure 2).

   

   Figure 2. Run the application to see the populated DataGrid control.

   Note: You will not be able to scroll to the left to see all of the data. Remember from a previous video that scrollbars are not created by default in most Flex applications. The point for this exercise is to verify that data is returned to the DataGrid control. You will explore how to display this data more efficiently as this training series progresses.

6. Return to Flash Builder.
7. Below the DataGrid control, create a Label control instance.

   <mx:DataGrid dataProvider="{employeeService.lastResult.employees.employee}"/>
   
   <s:Label/>
   

8. Bind the Label control's text property value to the firstname value of the fourth item within the employeeService.lastResult.employees.employee array collection.

   Note: Remember that ActionScript is a zero-indexed language. In other words, arrays, including ArrayCollection objects, start counting at zero.

   <s:Label text="{employeeService.lastResult.employees.employee.getItemAt(3).firstName}"/>

9. Save the file and run the application.

   You should see the name Ben displayed below the DataGrid control (see Figure 3).

   

   Figure 3. Display the fourth data item firstname value.

Create the result event

In the last section, you used the lastResult property of the returned data to bind the content to a DataGrid control. That is a very quick way to display data. However, if you want to manipulate the data first, or place it in a reusable variable, you should use the result event to handle the data and then bind it to the DataGrid control.

In this section, you define the result event handler for the HTTPService object.

1. Return to Flash Builder.
2. Locate the Script comment.
3. Below the Script comment, create a Script block:

   <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
     
     <fx:Script>
   <![CDATA[
   
   ]]>
   </fx:Script>
   

4. Locate the HTTPService object.

5. Within the HTTPService object tag, use the code lookup tool to generate the result event (see Figure 4).

   

   Figure 4. Use the code lookup tool to generate the result event for the HTTPService object.

   Using the code lookup tool to generate the result event causes the code lookup tool to display the Generate Result Handler option (see Figure 5).

6. Click the menu option or press Enter to generate the result handler function (see Figure 5).

   

   Figure 5. Use the code lookup tool to generate a result handler function for the HTTPService object.

7. Locate the Script block.
8. Note the generated import statement and employeeService_resultHandler() function:

   <!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
   
   <fx:Script>
   <![CDATA[
   
   import mx.rpc.events.ResultEvent;
   
   protected function employeeService_resultHandler(event:ResultEvent):void
   {
   // TODO Auto-generated method stub
   }
   ]]>
   </fx:Script>
   

Examining the result event object

In this section, you will use the Flash Builder debugger to examine the data returned by the HTTPService object.

1. Double-click the Editor gutter on the same line as the closing brace of the employeeService_resultHandler() function to add a breakpoint (see Figure 6).

   

   Figure 6. Place a breakpoint on the ending line of the employeeService_resultHandler() function.

2. Click the Debug button to debug the application (see Figure 7).

   

   Figure 7. Click the Debug button.

3. When you see the Confirm Perspective Switch dialog box (see Figure 8), click Yes to switch to the Flash Builder Debug perspective.

   

   Figure 8. Click Yes to switch to the Flash Builder Debug perspective.

4. Double-click the Variables tab to maximize the view.

5. In the Variables view, expand the event object to reveal the result event and the employee data being pulled into the application (see Figure 9).

   

   Figure 9. Expand the result object to reveal the employees data.

6. Double-click the Variables tab to minimize the view.

7. Click the Terminate button to end the debugging session (see Figure 10).

   

   Figure 10. Terminate the debugging session.

8. Return to the Flash perspective.

Populating an array collection with the result event

Remember that the event object inside the employeeService_resultHandler() function is only available within that function. To access that data outside the function, you will place the returned data into a class property.

In this section, you will place the returned data into a variable that is data typed to the ArrayCollection class.

1. Locate the Script block.
2. Within the Script block, below the import statement, import the mx.collections.ArrayCollection class.

   <fx:Script>
     <![CDATA[
     
     import mx.rpc.events.ResultEvent;
     
     import mx.collections.ArrayCollection; 
     protected function employeeService_resultHandler(event:ResultEvent):void
     {
     // TODO Auto-generated method stub
     } 
     
     ]]>
     </fx:Script>

3. Below the second import statement, declare a bindable private variable named employees and data type it to the ArrayCollection class:

   ...
     import mx.collections.ArrayCollection;
     
     [Bindable]
     private var employees:ArrayCollection;
     ...
   

4. Locate the employeeService_resultHandler() function.
5. Within the function, assign the returned data in the event object to the employees variable (the new instance of the ArrayCollection class):

   protected function employeeService_resultHandler(event:ResultEvent):void
   {
   employees = event.result.employees.employee;
   }

6. Below the UI components comment, locate the DataGrid control.
7. Reassign the DataGrid control's dataProvider property value so that it is bound to the employees class variable.

   <mx:DataGrid dataProvider="{employees}"/>

8. Reassign the Label control's text property value so that it uses the employees class property to display the fourth employee's firstName value in the data.

   <s:Label text="{employees.getItemAt(3).firstName}"/>
   

9. Save the file and run the application.

   You should see there has been no visual change to the application; the DataGrid control and Label control display the same information as they did before (see Figure 11).

   

   Figure 11. Run the application to see no change

Using the fault event

In this section, you will use the fault event to handle an invalid URL error.

1. Return to Flash Builder and locate the HTTPService object.

2. For the HTTPService object, use the code lookup tool to generate the fault event (see Figure 12).

   

   Figure 12. Use the code lookup tool to generate the fault event for the HTTPService object.

3. Using the code lookup tool to generate the fault event causes the code lookup tool to display the Generate Result Handler option (see Figure 13). Click the menu option or press Enter to generate the fault handler function.

   

   Figure 13. Generate a fault handler function.

Examining 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 url property value, remove the last character so that the URL will be invalid:

   <fx:Declarations>
   
   <s:HTTPService id="employeeService" 
   url="http://adobetes.com/f4iaw100/remoteData/employees.xml" 
   result="employeeService_resultHandler(event)"
   fault="employeeService_faultHandler(event)"/>
   
   </fx:Declarations>
   

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

   protected function employeeService_faultHandler(event:FaultEvent):void
   {
   // TODO Auto-generated method stub
   }
   

3. Save the file.

4. Move the breakpoint to the same line as the closing brace of the employeeService_faultHandler() function (see Figure 14).

   

   Figure 14. Place the breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.

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 15). Specifically take note of the faultString property and value.

   

   Figure 15. View the debugging information for the fault event in the Variables view.

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.

Displaying the fault data in an Alert dialog box

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

1. Within the Script block, locate the employeeService_faultHandler() function:

     protected function employeeService_faultHandler(event:FaultEvent):void
     {
     // TODO Auto-generated method stub
     }
   

2. Within the function, use the mx.controls.Alert class' show() method to display the event.fault.faultString value as text in an Alert pop-up. Use the string Fault Information for the title of the alert:

   protected function employeeService_faultHandler(event:FaultEvent):void
   {
   mx.controls.Alert.show(event.fault.faultString,"Fault Information");
   }
   

3. Save the file and run the application.

   You will see the Alert dialog box displaying the fault event information (see Figure 16).

   

   Figure 16. View the fault information within an Alert class dialog box.

Test your knowledge

In this exercise, you learned how to use result and fault events with the HTTPService object.

What event handles the returned data from an HTTPService object?

The result event.

What property of the fault event can be used to view the fault in string form?

The faultString property.

What method of the HTTPService object is used to initiate data retrieval?

The send() method.

What is the index of the fourth item in an array?

The index is 3.

About the author