Exercise 2.4: Populating an ArrayCollection with retrieved data using the result event

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.

In this exercise you will learn how to:

• Preview the application
• Handle the result event
• Monitor the data request and retrieval using the Network Monitor
• Examine the result event object using the Flash Builder Debugger
• Populate an ArrayCollection object with the retrieved data

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).

7. 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.

Using the lastResult property 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.

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.

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

4. Click the menu option or hit the Enter key to generate the result handler function.

5. Locate the Script block.
6. Note the generated import statement and employeeService_resultHandler() function:

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).

2. Click the Enable Monitor button (see Figure 6).

3. Save the file and run the application.
4. Return to Flash Builder and double-click the Network Monitor view's tab to maximize the view.
5. Select the recording of the HTTPService object (see Figure 7).

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."

6. On the right side, within the Response tab, expand the Response body tree to reveal the employee data (see Figure 8).

7. Double-click the Network Monitor view's tab to minimize the view.

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).

3. Click the Debug button to debug the application (see Figure 10).

4. 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.

5. Double-click the Variables tab to maximize the view.
6. 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.

7. Double-click the Variables tab to minimize the view.
8. Click the Terminate button to end the debugging session (see Figure 13).

9. Return to the Flash perspective.

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.

3. Locate the employeeService_resultHandler() function.
4. 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.

5. Below the UI components comment, locate the Form container.
6. Within the Form container, locate the FormItem container that nests the DropDownList control.
7. Reassign the DropDownList control's dataProvider property value so that it is bound to the employees class variable:

8. 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).

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.