Adobe
Sign in Privacy My Adobe

by Trilemetry

Trilemetry

Content

Created

2 May 2011

Page tools
Flash BuilderFlexRIA
 
Thanks for your feedback.

Prerequisite knowledge

User level

Beginning

Required products

Exercise files

The Flex framework supports the Simple Object Access Protocol (SOAP) specification for web services through the WebServices component. The WebServices component can consume data from the server in the structured XML format named Web Services Description Language (WSDL).

In this exercise you will use the same form from Exercise 2.04 (Populating an ArrayCollection with retrieved data) to implement a WebService object that handles the WSDL document with dynamic data for the application. You will retrieve all of the fictional employees in a company to display in a DropDownList control (see Figure 1).

This is the finished application.
Figure 1. This is the finished application.

In this exercise you will learn how to:

Use the WebService object

In this section, you will use a WebService object to retrieve the data from a WSDL document generated on request to a URL.

Note: This example generates the XML using an Adobe ColdFusion server, but you can use any server to generate the XML file. Refer to the Flex and ColdFusion, PHP, Java, or .NET integration pages for more information.

  1. Open a new browser window and navigate to http://www.adobetes.com/f4iaw100/remoteData/employeeData.cfc?wsdl.

    You should see the WSDL document shown in Figure 2.

View the WSDL XML data in a browser.
Figure 2. View the WSDL XML data in a browser.
  1. Within the web service, locate the getEmployees() method.

    This is the method you will be using to query the data on the server from Flash Builder (see Figure 3).

Locate the getEmployees operation.
Figure 3. Locate the getEmployees operation.
  1. Download the ex2_05_web_starter.zip file if you haven't already and extract the ex2_05_starter.fxp to your computer.
  2. Open Flash Builder.
  3. Import the ex2_05_starter.fxp file.
  4. Open the ex2_05_starter.mxml file.
  5. Locate the Declarations block.
  6. Between the Declarations tag set, press CTRL+Space twice to invoke the content assist tool, type We and select the WebService code template (see Figure 4). You should see a WebService object instance added to your code.
Invoke the content assist tool to insert a WebService code template into your code.
Figure 4. Invoke the content assist tool to insert a WebService code template into your code.
  1. Remove the closing WebService tag and modify the opening tag so that there is a slash before the closing angle bracket.
<fx:Declarations> <s:WebService id=”service” wsdl=”wsdl” useProxy=”false” showBusyCursor=”true” result=”onResult(event)” fault=”onFault(event)”/> </fx:Declarations>
  1. To the WebService object instance, change the id property value to employeeService and the wsdl property value to:

    http://www.adobetes.com/f45iaw100/remoteData/employeeData.cfc?wsdl.

  2. Remove the useProxy, showBusyCursor, result, and fault properties from the code.
<s:WebService id="employeeService" wsdl="http://www.adobetes.com/f45iaw100/remoteData/employeeData.cfc?wsdl"/>
  1. Save the file.

Make the WebService object request

In this section you will initialize the retrieval of data by the WebService object.

  1. Within the opening Script block, locate the initApp() function.
  2. Within the function, call the employeeService.getEmployees() method.
private function initApp():void { pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler); returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler); employeeService.getEmployees(); }
  1. Save the file.

View the result data in the Network Monitor

Note: In order to complete this part of the exercise, you must have Flash Builder Premium Edition installed. If you have Flash Builder Standard Edition installed, skip this section and continue with the next section. If you want to download and install a trial version of Flash Builder Premium Edition, be sure to 1) back up your existing workspace and projects, 2) uninstall Flash Builder Standard Edition, and then 3) install the trial version of Flash Builder Premium Edition. To compare the Standard Edition with the Premium Edition, check out the Upgrade Details page.

In this section you will use the Network Monitor view to examine the data returned by the WebService object.

  1. Open the Network Monitor view (see Figure 5).
Open the Network Monitor view.
Figure 5. Open the Network Monitor view.
  1. Click the Enable Monitor button (see Figure 6).
Turn on the Network Monitor.
Figure 6. Turn on the Network Monitor.
  1. Click the Run button to run the application.
  2. Return to Flash Builder and double-click the Network Monitor view's tab to maximize the view.
  3. Select the recording of the WebService (see Figure 7).

    4. Note: If the workspace you are using has multiple projects open, you may not see the recording in the Network Monitor. Close all other projects and enable the monitor again for your current project and make sure the message in the Network Monitor view reads, "Enabled for project 'ex2_05_web_starter.'"

Select the WebService recording.
Figure 7. Select the WebService recording.
  1. On the right side, within the Response tab, expand the Response body tree to reveal the employee data.

    You should see that the data result is displayed in the Network Monitor as shown in Figure 8. Note the data properties are all uppercase. ColdFusion returns properties in all upper case format by default. You need to adjust the Flex controls to be compatible with the data.

Expand the Response body tree to reveal the employee data.
Figure 8. Expand the Response body tree to reveal the employee data.
  1. Double-click the Network Monitor view's tab to minimize the view.

Map the result

In this section you will store the returned data from the WebService object in an ArrayCollection variable, named employees, that is bound to the DropDownList control in the Employee Portal: Vehicle Request Form.

  1. Within the WebService object tag, use the content assist tool to generate the result event (see Figure 9).
Generate the result event.
Figure 9. Generate the result event.
  1. Within the content assist tool, double-click the Generate Result Handler option (see Figure 10).
Use the content assist tool to create a result handler function.
Figure 10. Use the content assist tool to create a result handler function.
  1. Within the Script block, locate the employeeService_resultHandler() function.
  2. Within the function, remove the commented code and set the value of the employees variable to the event.result property:
protected function employeeService_resultHandler(event:ResultEvent):void { employees = event.result; }
  1. Use the as operand to cast the event.result value to the ArrayCollection class.

    The returned data is typed to the Object class by default. You must cast the result to the ArrayCollection type so that it can be used with the employees ArrayCollection variable.

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

Display the data

In this section you will adjust the application user interface to use the data returned by the WebService object.

  1. In the ex2_05_web_starter.mxml file, within the Form container block, locate the FormItem container that nests the DropDownList control.
  2. Change the value of the DropDownList control's labelField property to LASTNAME:
<s:FormItem label="Employee:"> <s:DropDownList id="dropDownList" dataProvider="{employees}" labelField="LASTNAME"/> </s:FormItem>
  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="Office Phone:"> <s:TextInput id="phone" text="{dropDownList.selectedItem.PHONE}"/> </s:FormItem>
  1. Save the file.
  2. Run the application.
  3. Select an employee from the DropDownList control to see the Office Phone field populate (see Figure 11).
Select an employee from the DropDownList control.
Figure 11. Select an employee from the DropDownList control.

Implement the fault event

In this section you will generate a fault event.

  1. Return to Flash Builder.
  2. Locate the WebService object in the Declarations block.
  3. To the WebService object, use the content assist tool to create a fault event.
  4. Still using content assist, choose the Generate Fault Handler option. This will create a fault event in the Script block.

Examine the fault event object

In this section you will use the Flash Builder Debugger to view the information returned from the fault event.

  1. From the WebService object's wsdl property, remove the last character so that the URL will be invalid.
<s:WebService id="employeeService" wsdl=http://www.adobetes.com/f45iaw100/remoteData/employeeData.cfc?wsd result="employeeService_resultHandler(event)" fault="employeeService+faultHandler(event)"/>
  1. Within the Script block, locate the generated employeeService_faultHandler() function.
  2. Add a breakpoint to the same line as the closing brace of the employeeService_faultHandler() function (see Figure 12).
Place a breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.
Figure 12. Place a breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.
  1. Save the file.
  2. Click the Debug button.
  3. Click Yes when the Confirm Perspective Switch dialog box appears.
  4. Double-click the Variables tab to maximize the view.
  5. In the Variables view, expand the event object to reveal the fault event.
    Note the faultString property and value (see Figure 13).
View the debugging information for the fault event in the Variables view.
Figure 13. View the debugging information for the fault event in the Variables view.
  1. Double-click the Variables tab to minimize it.
  2. Click the Terminate button to end the debugging session.
  3. Return to the Flash perspective.

Display the fault data in an Alert dialog box

In this section you will use the Alert class to create a pop-up dialog box to display fault data.

  1. Within the Script block, locate the employeeService_faultHandler() function.
  2. Within the function, use the show() method of the mx.controls.Alert class to display the event.fault.faultString value as text in an Alert pop-up. Make the title of the alert Fault Information.

    Within the Script block, note the import statement for the mx.controls.Alert class. If this import statement is not present, add it to your code to make the application work.

protected function employeeService_faultHandler(event:FaultEvent):void { Alert.show(event.fault.faultString,"Fault Information"); }
  1. Save the file and run the application.

    You will see the Alert dialog box display the fault event information (see Figure 14).

View the fault information within an Alert class dialog box.
Figure 14. View the fault information within an Alert class dialog box.

In this tutorial you learned how to use a WebService object to retrieve data from a dynamically generated WSDL document.

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.

More Like This

Products

Download

Support & Learning

Buy

Company

Choose your region

Copyright © 2013 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy | Cookies

Reviewed by TRUSTe: site privacy statement