Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning

 

In this exercise you will learn how to use the HTTPService object's result event to store data in a variable that is bound to Flex controls.

Figure 1 shows employees listed in a DropDownList control at the top of the Employee Portal: Vehicle Request Form. The data for the selected user, which is retrieved from the database via an HTTPService object call, is bound to the office phone number field.

Figure 1. Preview the application.
 

 

Preview the application

In this section you will review the Employee Portal: Vehicle Request Form that you built in Day 1 of this training series.

  1. Download the ex2_04_starter.zip file if you haven't already and extract the ex2_04_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex2_04_starter.fxp file.
  4. Within the ex2_04_starter project, open the ex2_04_starter.mxml file.
  5. Run the application.
  6. Select an employee last name from the DropDownList control.

    The Office Phone field populates with the selected employee's phone number (see Figure 2).

Choose an employee from the DropDownList control.
Figure 2. Choose an employee from the DropDownList control.
 
  1. Return to Flash Builder and examine the code in the ex2_04_starter.mxml file.You should see the HTTPService object that defines the XML file to be retrieved for the application data. The lastResult property of the service object is bound to the DropDownList control and the office phone number field.

 

Handle the result event

Using the lastResultproperty of the service object is a very quick way to display data. However, if you want to manipulate the data first, or place it into a reusable variable, you should use the result event to handle the data and then bind it to the controls.

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

  1. Return to Flash Builder.
  2. Within the Declarations block, locate the HTTPService object.
  3. Within the HTTPService object tag, use the content assist tool to generate the result event (see Figure 3).

    The content assist tool is activated by placing your cursor inside the MXML tag (but outside any existing properties) and pressing the spacebar. If you place each of your property/value pairs on a new line of code (see Figure 3) and want to activate the content assist tool, simply, type Ctrl+spacebar. In either case, start typing the name of the desired property or event, in this case result, to see that value selected.

  4. Note: The lightening bolt icon indicates an event while the green circle indicates a property. The three square blocks represent a style, the light purple shape with the dots in the four corners represents an effect, and the maroon circle with an "M" in the middle represents metadata.

Use the content assist tool to generate the result event for the HTTPService object.
Figure 3. Use the content assist tool to generate the result event for the HTTPService object.
 

    Using the content assist tool to generate the result event displays the Generate Result Handler option (see Figure 4).

  1. Click the menu option or hit the Enter key to generate the result handler function.
Use the content assist tool to generate a result handler function for the HTTPService object.
Figure 4. Use the content assist tool to generate a result handler function for the HTTPService object.
 
  1. Locate the Script block.
  2. Note the generated import statement and employeeService_resultHandler() function:
import mx.rpc.events.ResultEvent; ... protected function employeeService_resultHandler(event:ResultEvent):void { // TODO Auto-generated method stub }

 

Monitor the data request and retrieval using the Network Monitor

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.

Before you handle the data in the result handler you just created, you will make sure that the request and response for data were properly made. You will use the Network Monitor view to examine the request being made by Flash Builder and the retrieved XML data from the server.

  1. Open the Network Monitor view (see Figure 5).
Open the Network Monitor view.
Figure 5. Open the Network Monitor view.
 
  1. Click the Enable Monitor button (see Figure 6).
Turn on the Network Monitor.
Figure 6. Turn on the Network Monitor.
 
  1. Save the file and run the application.
  2. Return to Flash Builder and double-click the Network Monitor view's tab to maximize the view.
  3. Select the recording of the HTTPService object (see Figure 7).
  4. 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 'ex2_04_starter."

Select the HTTPService recording.
Figure 7. Select the HTTPService recording.
 
  1. On the right side, within the Response tab, expand the Response body tree to reveal the employee data (see Figure 8).
Expand the Response body tree to reveal the employee data.
Figure  8. Expand the Response body tree to reveal the employee data.
 
  1. Double-click the Network Monitor view's tab to minimize the view.

 

Examine the result event object using the Flash Builder Debugger

Now that you have verified that the server request and response have been properly sent and received, you will use the Flash Builder Debugger to examine the data that is in your Flex application.

  1. Within the Script block, locate the employeeService_resultHandler() function.
  2. Double-click the Editor gutter on the same line as the closing brace of the employeeService_resultHandler( ) function to add a breakpoint (see Figure 9).
Place a breakpoint on the ending line of the employeeService_resultHandler() function.
Figure 9. Place a breakpoint on the ending line of the employeeService_resultHandler() function.
 
  1. Click the Debug button to debug the application (see Figure 10).
Click the Debug button.
Figure 10: Click the Debug button.
 
  1. The browser will open and return you to Flash Builder. When you see the Confirm Perspective Switch dialog box (see Figure 11), click the Yes button to switch to the Flash Builder Debug perspective.
Click the Yes button to switch to the Flash Builder Debug perspective.
Figure 11. Click the Yes button to switch to the Flash Builder Debug perspective.
 
  1. Double-click the Variables tab to maximize the view.
  2. Within the Variables view, expand the event object to reveal the result event and the employee data that has been retrieved into the application (see Figure 12). Note the employee node (the repeating node) is automatically an ArrayCollection instance.
Expand the result object to reveal the employees data.
Figure  12. Expand the result object to reveal the employees data.
 
  1. Double-click the Variables tab to minimize the view.
  2. Click the Terminate button to end the debugging session (see Figure 13).
 Terminate the debugging session.
Figure 13. Terminate the debugging session.
 
  1. Return to the Flash perspective.

 

Populate an ArrayCollection instance with the retrieved data

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

  1. Locate the Script block.
  2. Within the Script block, below the import statements, use the content and quick assist tools to create a Bindable private variable named employees and use the content assist tool to data type it to the ArrayCollection class (see Figure 14).

    You should also see an import statement for the ArrayCollection class created within the Script block.

Use the content assist tool to assign a data type to the variable.
Figure 14. Use the content assist tool to assign a data type to the variable.
 
  1. Locate the employeeService_resultHandler() function.
  2. Within the function, assign the returned data in the event object to the employees variable (the new instance of the ArrayCollection class). Use event.result.employees.employee to reference the repeating node that you saw in the Flash Builder Debugger.
protected function employeeService_resultHandler(event:ResultEvent):void { employees = event.result.employees.employee; }
  1. Below the UI components comment, locate the Form container.
  2. Within the Form container, locate the FormItem container that nests the DropDownList control.
  3. Reassign the DropDownList control's dataProvider property value so that it is bound to the employees class variable:
<s:FormItem label="Employee:"> <s:DropDownList id="dropDownList" labelField="lastName" dataProvider="{employees}"/> </s:FormItem>
  1. Save the file and run the application.

    There is no visual change to the application; the application runs as it did at the beginning of the exercise (see Figure 15).

Run the application to see no change.
Figure 15. Run the application to see no change.
 

In this exercise you learned how to use the HTTPService object's result event to store data in a variable and how to map the data to Flex controls using the variable. In the next exercises you learn how to populate an application with data and handling faults, using HTTPService, RemoteService, and WebService components.

 

Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights


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.