Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.

html

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

In this exercise, you will learn how to:

Handle the result event (www.adobe.com#resultevent)

Monitor the data request and retrieval using the Network Monitor (www.adobe.com#Monitor)
Examine the result event object using the Flash Builder Debugger (www.adobe.com#Examine)
Populate an ArrayCollection object with the retrieved data (www.adobe.com#Populate)

Requirements

In order to complete this tutorial, you need the following software and files:
Flash Builder 4
Try (www.adobe.com/go/try_flashbuilder) Buy (www.adobe.com/go/flashbuilder_buy)

Exercise files:

1 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

ex2_04_starter.zip (www.adobe.comex2_04/ex2_04_starter.zip) (ZIP, 21 KB)

ex2_04_solution.zip (www.adobe.comex2_04/ex2_04_solution.zip) (ZIP, 21 KB)

Prerequisite knowledge:
Exercise 1.1: Setting up Flash Builder and your project files (www.adobe.comex1_01.html)
Exercise 2.1: Handling a user event (www.adobe.comex2_01.html)

Preview the application

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

1. Download the ex2_04_starter.zip (www.adobe.comex2_04/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).

Figure 2. Choose an employee from the DropDownList control.

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 two phone number fields.

Handle the result event

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

2 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

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, and the light purple shape with the dots in the four corners represents an effect.

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

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

Figure 4. Use the content assist tool to generate a result handler function for the HTTPService object.

5. Locate the Script block.

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

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

3 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

Figure 5. Open the Network Monitor view.

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

Figure 6. Turn on the Network Monitor.

3. Click the Run button to run the application (see Figure 7).

Figure 7. Use the Run button to 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 8).

Figure 8. Select the HTTPService recording.

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

4 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

Figure 9. Expand the Response body tree to reveal the employee data.

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

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

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

5 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

Figure 11. Click the Debug button.

4. The browser will open and return you to Flash Builder. When you see the Confirm Perspective Switch dialog box
(see Figure 12), click the Yes button to switch to the Flash Builder Debug perspective.

Figure 12. 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 13). Note the employee node (the repeating node) is automatically
an ArrayCollection instance.

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

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

8. Click the Terminate button to end the debugging session (see Figure 14).

6 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

Figure 14. Terminate the debugging session.

9. 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, create a Bindable private variable named
employees and use the content assist tool to data type it to the ArrayCollection class (see Figure 15). You
should also see an import statement for the ArrayCollection class created within the Script block.

Figure 15. Use the content assist tool to assign a data type to the variable.

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.

7 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

protected function employeeService_resultHandler(event:ResultEvent):void

{
employees = event.result.employees.employee;
}

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:

<mx:FormItem label="Employee:">
<s:DropDownList id="dropDownList"
labelField="LASTNAME"
dataProvider="{employees}"/>
</mx:FormItem>

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

Figure 16. Run the application to see no change.

Test your knowledge

8 of 9 16/04/2010 2:42 PM
Flex in a Week - Populating an ArrayCollection with retrieved data usin... http://www.adobe.com/devnet/flex/videotraining/exercises/ex2_04.html

In this tutorial 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.

What event can be used to handle the data being returned by an HTTPService object?
The result event.

What class of variable can be used to create a variable that can store data?
The ArrayCollection class.

About the author

Trilemetry, Inc is a development and education organization that implements a human-centered design approach to
the creation of software and content. Their Adobe portfolio includes the Adobe ColdFusion Getting Started Experience,
the Adobe Flex Getting Started Experience, the Flex in a Week video series, the official Adobe instructor-led training
course Flex 3: Extending and Styling Components and more. They also create and support many Web applications
from interactive Flash sites and corporate web sites to mission-critical business applications.
Copyright © 2010 Adobe Systems Incorporated. All rights reserved.

9 of 9 16/04/2010 2:42 PM