Requirements

Prerequisite knowledge Required products Exercise files User level

Flash Builder 4.7 Premium (Download trial)

Beginning
 
In this exercise you will use the Flash Builder Data Services wizard to connect to a web service and generate ActionScript value object classes. You will then use one of the classes to create a series of employee instances and populate the Employee Portal: Vehicle Request application with that data.
 
In previous exercises you have learned about value object classes and creating typed data models. This exercise simply introduces you to a feature of Flash Builder that can save you the step of creating your value object classes manually.
 
In this exercise you will learn how to:
 

 
Use a Flash Builder wizard to connect to a web service

In this section, you will use the Data Services wizard to retrieve data using a web service.
 
Note: The Data Services wizard can create HTTP, web service and remote/AMF connections (see Figure 1). We have chosen to work with a web service for this exercise, but you can use the knowledge you've learned in this training series to connect to the HTTP and remote/AMF options.
 
  1. Download the ex2_09_starter.zip file provided if you haven't already and extract the ex2_09_starter.fxp to your computer.
  2. Open Flash Builder and import the ex2_09_starter.fxp file.
  3. Select Data > Connect to Web Service (see Figure 1).
Select Data > Connect to Web Service
Figure 1. Select Data > Connect to Web Service
 
  1. Within the Connect to Data/Service for ex2_09_starter file dialog box, for the WSDL URI type http://www.adobetes.com/f45iaw100/remoteData/ex2_09.cfc?wsdl (see Figure 2).
  2. Note the Service name, Service package, and Data type package fields automatically populate when you enter the WSDL URI.
     
Enter the WSDL URI path.
Figure 2. Enter the WSDL URI path.
 
  1. Click Next.
  2. Review the data operations (see Figure 3).
Review the operations and click Finish.
Figure  3. Review the operations and click Finish.
 
  1. Click Finish.
    You should see the Ex2_09 service listed in the Data/Services view (see Figure 4).
     
View the Ex2_09 service in the Data/Services view.
Figure  4. View the Ex2_09 service in the Data/Services view.
 

 
Examine the generated value object classes

In this section you will view the value object for the employee data that Flash Builder created.
 
Note: The WSDL defined a server-side class called Employees, which is the equivalent of the value object ActionScript classes created by Flash Builder.
 
  1. In the Package Explorer view, expand the valueObjects package to reveal its contents (see Figure 5). The valueObjects package contains three files that help configure the EMPLOYEES class.
 Expand the valueObjects directory.
Figure 5. Expand the valueObjects directory.
 
  1. Double-click the _Super_EMPLOYEES.as file to open it.
  2. Within the file, locate the class properties starting on line 50 (see Figure 6). These properties are created from the server side EMPLOYEES object, which represent the columns that exist in the data table on the server. You can use these properties to create typed data that is compatible with the Ex2_09 service.
Locate the class properties.
Figure  6. Locate the class properties.
 

 
Use the value object class to create a typed data model

In this section you will use a for loop to populate an ArrayCollection with EMPLOYEES value objects.
 
  1. From the Package Explorer view, open the ex2_09_starter.mxml file.
  2. Within the Script block, locate the employeeService_resultHandler() function.
  3. Within the Script block, create a local variable named employeeData and data type it to the ArrayCollection class:
protected function employeeService_resultHandler(event:ResultEvent):void { var employeeData:ArrayCollection; }
  1. Set the value of the employeeData variable to the event.result property:
protected function employeeService_resultHandler(event:ResultEvent):void { var employeeData:ArrayCollection = event.result; }
  1. Use the as operand to cast the event.result value to the ArrayCollection class.
protected function employeeService_resultHandler(event:ResultEvent):void { var employeeData:ArrayCollection = event.result as ArrayCollection; }
  1. Below the employeeData variable, declare a local variable named employee and use the content assist tool to data type it to the EMPLOYEES class (see Figure 7).
Create a local employee and use the content assist tool to type it.
Figure 7. Create a local employee and use the content assist tool to type it.
 
  1. Below the employee variable type fore, press Ctrl+Space to invoke content assist, and select the for each loop code template.
protected function employeeService_resultHandler(event:ResultEvent):void { var employeeData:ArrayCollection = event.result as ArrayCollection; var employee:EMPLOYEES; for each(var i:int in employeeData) { } }
  1. Modify the generated for each loop so that it loops over each item in the employeeData ArrayCollection using the iterant emp data typed to the Object class.
protected function employeeService_resultHandler(event:ResultEvent):void { var employeeData:ArrayCollection = event.result as ArrayCollection; var employee:EMPLOYEES; for each(var emp:Object in employeeData) { } }
  1. Within the for each loop, to the employee variable, assign a new instance of the Employee value object class.
for each(var emp:Object in employeeData) { employee = new EMPLOYEES(); }
  1. Set the value of the employee.FIRSTNAME property to the emp.FIRSTNAME property.
for each(var emp:Object in employeeData) { employee = new EMPLOYEES(); employee.FIRSTNAME = emp.FIRSTNAME; }
  1. Repeat step 10 for the rest of the properties in the EMPLOYEES class.
for each(var emp:Object in employeeData) { employee = new EMPLOYEES(); employee.FIRSTNAME = emp.FIRSTNAME; employee.LASTNAME = emp.LASTNAME; employee.ID = emp.ID; employee.TITLE = emp.TITLE; 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; }
  1. 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); }
  1. Save the file.

 
View the ArrayCollection of value objects in the Debugger

In this section you will use Flash Builder debug mode to view the populated employees ArrayCollection variable.
 
  1. 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 8).
Add a breakpoint to the closing line of the employeeService_resultHanlder() function.
Figure 8. Add a breakpoint to the closing line of the employeeService_resultHanlder() function.
  1. Click the Debug button.
  2. When you see the Confirm Perspective Switch dialog box, click the Yes button (see Figure 9).
Click the Yes button to switch perspectives.
Figure  9. Click the Yes button to switch perspectives.
 
  1. Within the Flash Debug perspective, double-click the Variables view to maximize it.
  2. Open the this node to reveal the employees node.
  3. Open the employees node (see Figure 10).
    You should see that the employees ArrayCollection variable is populated with EMPLOYEES value objects.
     
Open the employees node to see it is populated with EMPLOYEES objects.
Figure  10. Open the employees node to see it is populated with EMPLOYEES objects.
 
  1. Double-click the Variables tab to minimize the view.
  2. Click the Terminate button to stop the debugging session.
  3. Switch to the Flash perspective.

 
Display the data

In this section you will adjust the application to use the data properties returned by the WebService object to display data in the application.
 
  1. From the components package, open the VehicleRequestForm.mxml file.
  2. Within the Form container block, locate the FormItem container that nests the DropDownList control.
  3. Change the value of the DropDownList control's labelField property to LASTNAME.
  1. Locate the FormItem container that nests the TextInput control for the office phone number.
  2. Change the value the text property is being passed from the DropDownList control to dropDownList.selectedItem.PHONE.
<s:FormItem label="Employee:"> <s:DropDownList id="dropDownList" dataProvider="{employees}" labelField="LASTNAME"/> </s:FormItem>
<s:FormItem label="Office Phone:"> <s:TextInput id="phone" text="{dropDownList.selectedItem.PHONE}"/> </s:FormItem>
  1. Save the project and run the application.
    Open the DropDownList control to see it is populated with employees (see Figure 11).
     
Open the DropDownList control to see it is populated with data.
Figure 11. Open the DropDownList control to see it is populated with data.
 
In this exercise you learned how to use the Flash Builder Data Services wizard to connect to a Web Service and generate ActionScript value objects. In the next exercise you will create an application that lets administrators choose an employee to feature on the Employee of the Month panel of the Employee Portal.
 

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.