When you retrieved data from an XML file in previous exercises, the Flex framework has automatically converted that data into an ArrayCollection instance of generic objects.

In this exercise you will convert this ArrayCollection of generic objects into an ArrayCollection of typed data. You will use the Employee class, which was created in Exercise 2.7 (Creating an ActionScript class and instances), as an ActionScript value object class. Its properties will correspond to the values in the XML data.

In this exercise you will learn how to:

Creating an ActionScript class
Create value object instances
View the value object in the Debugger
Populate an ArrayCollection with value objects
View the ArrayCollection of value objects in the Debugger

Creating an ActionScript class

In this section you will create an ActionScript class.

Download the ex2_08_starter.zip file if you haven't already and extract theex2_08_starter.fxp to your computer.
Open Flash Builder.
Import the ex2_08_starter.fxp file.
Within the Package Explorer view, right-click the ex2_08_starter project and select New > ActionScript class (see Figure 1).

Figure 1. Open the new ActionScript class dialog box.

Within the New ActionScript class dialog box, for the Package type valueObjects and for the Name type Employee (see Figure 2).

Figure 2. Name the class Employee.

Click Finish.
You should see the Employee.as file open in the Editor view.
Within the class declaration function, create the following public variables all data typed to the String class.

        public class Employee
{
   public var firstName:String;
   public var lastName:String;
   public var id:String;
   public var title:String;
   public var email:String;
   public var managerID:String;
   public var department:String;
   public var location:String;
   public var phone:String;
   public var directDial:String;
   public var deskLocation:String;
   public var city:String;
   public var state:String;
   public var countryCode:String;
   public var hireDate:String;
   public var evaluation:String;
   public var postalCode:String;
}
    

Save the file.

Create value object instances

In this section you will create a local variable, named employeeData, to store the data returned by the HTTPService object. You will then loop over the employeeData instance to access each generic object to create an equivalent value object, which you will then place into the employees ArrayCollection instance.

Return to Flash Builder and within the Package Explorer view, from the default package, open the ex2_08_starter.mxml file.
Within the Script block, locate the employeeService_resultHandler() function.
Delete everything within the function and create a local variable named employeeData data typed to the ArrayCollection class.

        protected function employeeService_resultHandler(event:ResultEvent):void
{
  var employeeData:ArrayCollection;
}
    

Set the employeeData variable's value as event.result.employees.employee:

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

Within the function, below the employeeData variable, declare a local variable named employee and use the content assist tool to data type it to the Employee class (see Figure 3).
This employee local variable will hold the data for the employee that is currently being evaluated in the loop.

Figure 3. Use the content assist tool to data type the employee variable.

Ensure an import statement for the valueObjects.Employee class has been generated below the others:

        <fx:Script>
<![CDATA[
   import mx.collections.ArrayCollection;
   import mx.controls.Alert;
   import mx.rpc.events.FaultEvent;
   import mx.rpc.events.ResultEvent;

   import valueObjects.Employee;
...
    

Within the employeeService_resultHandler() function, below the employee variable, invoke the content assist tool by pressing Ctrl+Space, type fore and press Enter to create a for each loop.
You should see a code template generated for the for each loop.

        protected function employeeService_resultHandler(event:ResultEvent):void 
{ 
var employeeData:ArrayCollection = event.result.employees.employee; 
var employee:Employee; 
for each(var i:int in employeeData) 
{ 
} 

    

Modify the template generated for the for each loop by changing i to create an iterant named emp and change int so that it is data typed to the Object class. This parameter will be used to store the value being looped over in the data.
Note that the in operand automatically specifies the employeeData ArrayCollection variable as the data to loop over.

        for each(var emp:Object in employeeData)
{
}
    

Within the for each loop, to the employee variable, create a new instance of the Employee value object class:

        for each(var emp:Object in employeeData)
{
   employee = new Employee(); 
}
    

Set the value of the employee.firstName property to the emp.firstName value:

        for each(var emp:Object in employeeData)
{
   employee = new Employee(); 
   employee.firstName = emp.firstName;
} 
    

Below the employee.firstName value assignment, repeat step 11 for the rest of the Employee class properties.

        for each(var emp:Object in employeeData)
{
   employee = new Employee(); 
   employee.firstName = emp.firstName;
   employee.lastName = emp.lastName;
   employee.id = emp.id;
   employee.title = emp.title;
   employee.email = emp.email;
   employee.managerID = emp.managerID;
   employee.department = emp.department;
   employee.location = emp.location;
   employee.deskLocation = emp.deskLocation;
   employee.city = emp.city;
   employee.state = emp.state;
   employee.countryCode = emp.countryCode;
   employee.postalCode = emp.postalCode;
   employee.directDial = emp.directDial;
   employee.hireDate = emp.hireDate;
   employee.evaluation = emp.evaluation;
   employee.phone = emp.phone;
}
    

On each iteration of the loop, a new instance of the Employee class is created with data provided by the returned data from the HTTPService call. The loop will continue to run until all return data has been evaluated. Currently each of these employee instances is only available in this function. Later, you will populate the employees ArrayCollection variable with the typed data.

Save the file.

View the value object in the Debugger

In this section you will use the Flash Builder Debugger to view the first generated employee instance.

Within the Script block, locate the closing brace of the employeeService_resultHandler() function and double-click next to the line number to set a breakpoint (see Figure 4).

Figure 4. Add a breakpoint to the closing line of the employeeService_resultHanlder() function.

Click the Debug button.
When you see the Confirm Perspective Switch dialog box, click the Yes button (see Figure 5).

Figure 5. Click the Yes button to switch perspectives.

Within the Flash Debug perspective, double-click the Variables view to maximize it.
Expand the employee value object variable to reveal its properties.
This is only one of the value object instances that are created in the loop. Currently, each new loop iteration overwrites the previous instance with a new instance. In the next section, you will populate the employees ArrayCollection variable with the data before it is overwritten.

Figure 6. View the populated employee value object variable in the Variables view.

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

Figure 7. Click the Terminate button.

Return to the Flash perspective.

Populate an ArrayCollection with value objects

In this section you will add each employee value object created in the for each loop to an ArrayCollection variable.

At the bottom of the for each loop, add the employee object to the employees ArrayCollection using the addItem() method.
The employees ArrayCollection variable exists in the Script block below the variable declarations comment.

        for each(var  emp:Object in employeeData)
{
...
employee.phone = emp.phone;;
employees.addItem(employee);
}
    

Save the file.

View the ArrayCollection of value objects in the Debugger

In this section you will use the Flash Builder Debugger to view the populated employees variable populated with Employee value objects instances instead of generic objects.

Click the Debug button.
When you see the Confirm Perspective Switch dialog box, click the Yes button.
Double-click the Variables view to maximize it.
Open the this node to reveal the employees node.
Open the employees node (see Figure 8).
You should see that the employees ArrayCollection variable is populated with 12 Employee value objects.

Figure 8. Expand the employees node to reveal the Employee value objects.

Within the employees node, open each object node to see they have different property values.
Double-click the Variables tab to minimize the view.
Click the Terminate button to stop the debugging session.
Click the Run button to run the application.
Open the DropDownList control.
You should see the DropDownList control is populated with employees (see Figure 9).

Figure 9. Open the DropDownList control to see the control is populated with employees.

In this exercise you learned how to create a data model using typed data. In the next exercise you will use the Flash Builder Data Services wizard to connect to a web service and generate ActionScript value object classes.

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.

More Like This

Choose your region Products Downloads Learn & Support Company

AdChoices

Exercise 2.8: Creating an ArrayCollection of value objects

by Trilemetry

Content

Created

Page tools

Requirements

Prerequisite knowledge

User level

Required products

Sample files