Previously when you have retrieved data from an XML file, 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. The data type you will create for this example is Employees, which is an ActionScript value object class that you will create with properties that correspond to the values in the XML data.

In this exercise, you will learn how to:

• Create an ActionScript class
• Define class properties
• Populate an ArrayCollection with value objects

Requirements

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

Flash Builder 4

• Download
• Learn more

Sample files:

• ex4_07_starter.zip (ZIP, 40 KB)
• ex4_07_solution.zip (ZIP, 40 KB)

Prerequisite knowledge

• Exercise 1.1: Creating and skinning an application
• Exercise 1.4: Creating an ActionScript class and instances
• Exercise 4.4: Separating the model from the view

Creating an ActionScript class

In this section you will create a new ActionScript class using Flash Builder 4.

1. Download the ex4_07_starter.zip file if you haven't already and extract the file ex4_07_starter.fxp to your computer.
2. Open Flash Builder.
3. Import the ex4_07_starter.fxp file.

4. Review the code in the EmployeeDirectory.mxml main application file.

   This file contains code with which you should be familiar. In the Declarations tag block, you can see the HTTPService instance named employeeService that is used to request data from a remote URL.

5. In a browser, go to http://adobetes.com/f4iaw100/remoteData/employees.xml and evaluate the XML code.

   You can see that each employee is in an employee node that has multiple properties, for example, firstName, lastName, and more.

6. In the main application file, note that the data result handler, employeeService_resultHandler(), populates a local variable, employeeData, with the content retrieved from the XML data.

   Next, you will create a value object class to type each employee record of data from the XML file into an ActionScript class.

7. In the Package Explorer view, right-click the src folder and select New > ActionScript class (see Figure 1).

   

   Figure 1. Create a new ActionScript class file.

8. In the New ActionScript Class dialog box, enter valueObjects for the Package and Employee for the Name (see Figure 2).

   

   Figure 2. Type valueObjects for the Package and Employee for the Name.

9. Click Finish.

Defining class properties

In this section, you will define the properties for the Employee ActionScript class:

1. Below the class declaration line, declare a public variable named firstName and data type it to the String class.

   package valueObjects
   {
       public class Employee
       {
           public var firstName:String;
           public function Employee()
           {
           }
       }
   }

2. Below the firstName variable, declare the following public variables and data type each to the String class: lastName, id, title, email, managerID, department, location, phone, directDial, deskLocation, city, state, countryCode, and postalCode:

   package valueObjects
   {
       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 deskLocation:String;
           public var city:String;
           public var state:String;
           public var countryCode:String;
           public var postalCode:String;
           
           public function Employee()
           {
           }
        }
   }

3. Save the file.

Populating an ArrayCollection with value objects

Currently the result data is stored in a local variable named employeeData in the result handler function. You want to store the data in a variable that is available outside of the result handler. This variable, which you will name employees, is also an ArrayCollection instance.

In this section, you will loop over the employeeData instance to access each generic object to create a value object, which you will then place into the employees instance.

1. From the Package Explorer view, open the EmployeeDirectory.mxml file.
2. Locate the Script block.

3. Within the Script block, create a private variable named employees and data type it to the ArrayCollection class. Ensure the ArrayCollection package is imported.

   import mx.collections.ArrayCollection;            
   import mx.rpc.events.ResultEvent;
   private var employees:ArrayCollection;

4. Assign a new instance of the ArrayCollection class to the employees variable:

   private var employees:ArrayCollection = new ArrayCollection();

5. Within the Script block, locate the employeeService_resultHandler() function.

6. Within the function, below the employeeData local variable, declare a variable named employee and data type it to the Employee class.

   This employee local variable will hold the data for the one employee that is currently being evaluated as you loop over the employeeData result data.

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

7. Create an import statement for the valueObjects.Employee class if it has not been generated.

   import mx.collections.ArrayCollection;
   
   import mx.rpc.events.ResultEvent;
   
   import valueObjects.Employee;

8. In the employeeService_resultHandler() function, below the employee variable, declare a variable named i and data type it to the Number class.

   The i variable is the iterant in the loop that you will create next.

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

9. Below the i iterant, create a for loop that defines the number i with an initial value of 0.
10. In the second phrase of the for loop, set the condition for the loop to run while the iterant is less than the length of the employeeData object.

11. In the last phrase of the for loop, increment the iterant by 1 using the ++ operator:

    protected function employeeService_resultHandler(event:ResultEvent):void
    {
        var employeeData:ArrayCollection = event.result.employees.employee;
        var employee:Employee;
        var i:Number;
                    
        for (i = 0; i < employeeData.length; i++)
        {
    
        }
    }

12. In the for loop, create a new instance of the Employee() value object class by calling the constructor.

    for (i = 0; i < employeeData.length; i++)
    {
        employee = new Employee();          
    }

13. Using i as the parameter of the getItemAt() method of the ArrayCollection class, assign the employee.firstName value to employeeData.getItemAt(i).firstName.

    for (i = 0; i < employeeData.length; i++)
    {
        employee = new Employee();    
        employee.firstName = employeeData.getItemAt(i).firstName;}

14. Below the employee.firstName value assignment, use the getItemAt() method and i to collect the data for all values of the Employee class.

    for(i=0;i<employeeData.length;i++)
    {
        employee = new Employee();    
        employee.firstName = employeeData.getItemAt(i).firstName;
        employee.lastName = employeeData.getItemAt(i).lastName;
        employee.id = employeeData.getItemAt(i).id;
        employee.title = employeeData.getItemAt(i).title;
        employee.email = employeeData.getItemAt(i).email;
        employee.managerID = employeeData.getItemAt(i).managerID;
        employee.department = employeeData.getItemAt(i).department;
        employee.location = employeeData.getItemAt(i).location;
        employee.deskLocation = employeeData.getItemAt(i).deskLocation;
        employee.city = employeeData.getItemAt(i).city;
        employee.state = employeeData.getItemAt(i).state;
        employee.countryCode = employeeData.getItemAt(i).countryCode;
        employee.postalCode = employeeData.getItemAt(i).postalCode;
    }           

15. At the bottom of the for loop, add the employee object to the employees ArrayCollection using the addItem() method.

    for(i=0;i<employeeData.length;i++)
    {
        ...
        employee.postalCode = employeeData.getItemAt(i).postalCode;
        employees.addItem(employee);
    }

16. Save the file.

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

    

    Figure 3. Place a breakpoint on the closing line of the employeeService_resultHandler() function.

18. Click the Debug button.

19. When you see the Confirm Perspective Switch dialog box, click the Yes button (see Figure 4).

    

    Figure 4. Click the Yes button to switch perspectives.

20. In the Flash Debug perspective, double-click the Variables view to maximize it.

21. In the Variables view, expand the this node to see the data being collected in the employees instance (see Figure 5).

    

    Figure 5. Expand the this node to reveal the employees ArrayCollection.

    You should see that all the indexes in the ArrayCollection object contain instances of the Employee value object.

Test your knowledge

In this exercise, you learned how to create an ActionScript class, define properties for the class and create a data model using typed data.

What ArrayCollection class method is used to retrieve a specific data object?

The getItemAt() method.

Which perspective do you need to use to set breakpoints?

The debugging perspective.

What is the advantage of using value objects?

A value object class lets you create an object with properties that is not generic data but uses typed data.

About the author