
Content
Created
3 May 2011
Requirements
Prerequisite knowledge | Required products | Exercise files | User level | |
|
Flash Builder 4.7 Premium (Download trial) |
Beginning |
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:
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.
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 asevent.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 namedemployee
and use the content assist tool to data type it to theEmployee
class (see Figure 3).Thisemployee
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 thevalueObjects.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 theemployee
variable, invoke the content assist tool by pressing Ctrl+Space, type fore and press Enter to create afor each
loop.You should see a code template generated for thefor 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 changingi
to create an iterant named emp and changeint
so that it is data typed to theObject
class. This parameter will be used to store the value being looped over in the data.Note that thein
operand automatically specifies theemployeeData
ArrayCollection
variable as the data to loop over.
for each(var emp:Object in employeeData)
{
}
- Within the
for each
loop, to theemployee
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 theemp.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;
}
- Save the file.
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.
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 theemployeeService_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 theemployees
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.
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 theemployees
ArrayCollection using theaddItem()
method.Theemployees
ArrayCollection variable exists in theScript
block below thevariable declarations
comment.
for each(var emp:Object in employeeData)
{
...
employee.phone = emp.phone;;
employees.addItem(employee);
}
- Save the file.
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 theemployees
node. - Open the
employees
node (see Figure 8).You should see that theemployees
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.
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.