Adobe

Products

Acrobat

Creative Cloud

Creative Suite

Digital Marketing Suite

Digital Publishing Suite

Elements

Photoshop

Touch Apps

Student and Teacher Editions

More products

Solutions

Digital marketing

Digital media

Education

Financial services

Government

Web Experience Management

Exercise 2.5: Using a WebService object to connect to data

by Trilemetry

Trilemetry, Inc.

Content

Use the WebService object
Make the WebService object request
View the result data in the Network Monitor
Map the result
Display the data
Implement the fault event
Examine the fault event object
Display the fault data in an Alert dialog box

Created

2 May 2011

Requirements

Prerequisite knowledge

Exercise 1.1: Setting up Flash Builder and your project files
Exercise 2.1: Handling a user event
Exercise 2.4: Populating an ArrayCollection with retrieved data

User level

Beginning

Required products

Flash Builder 4.5 Premium (Download trial)

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

Figure 1. This is the finished application.

In this exercise you will learn how to:

Use the WebService object
Make the WebService object request
View the result data in the Network Monitor
Map the result
Display the data
Implement the fault event
Examine the fault event object
Display the fault data in an Alert dialog box

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.

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.

Figure 2. View the WSDL XML data in a browser.

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

Figure 3. Locate the getEmployees operation.

Download the ex2_05_web_starter.zip file if you haven't already and extract the ex2_05_starter.fxp to your computer.
Open Flash Builder.
Import the ex2_05_web_starter.fxp file.
Open the ex2_05_web_starter.mxml file.
Locate the Declarations block.
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.

Figure 4. Invoke the content assist tool to insert a WebService code template into your code.

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> 

    

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.
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"/>

Save the file.

Make the WebService object request

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

Within the opening Script block, locate the initApp() function.
Within the function, call the employeeService.getEmployees() method.

        private function initApp():void
{
employeeService.getEmployees(); 
pickupDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);
returnDate.addEventListener(CalendarLayoutChangeEvent.CHANGE, dateChangeHandler);
}

    

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.

Open the Network Monitor view (see Figure 5).

Figure 5. Open the Network Monitor view.

Click the Enable Monitor button (see Figure 6).

Figure 6. Turn on the Network Monitor.

Click the Run button to run the application.
Return to Flash Builder and double-click the Network Monitor view's tab to maximize the view.
Select the recording of the WebService (see Figure 7).

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.'"

Figure 7. Select the WebService recording.

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. If you expand the data node of the Response body tree, you should see the data for each employee. If you expand the column List node, you should see all of the data properties. 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.

Figure 8. Expand the Response body tree to reveal the employee data.

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.

Within the WebService object tag, use the content assist tool to generate the result event (see Figure 9).

Figure 9. Generate the result event.

Within the content assist tool, double-click the Generate Result Handler option (see Figure 10).

Figure 10. Use the content assist tool to create a result handler function.

Within the Script block, locate the employeeService_resultHandler() function.
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;
}
    

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.

In the ex2_05_web_starter.mxml file, within the Form container block, locate the FormItem container that nests the DropDownList control.
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> 

    

Locate the FormItem container that nests the TextInput control for the office phone number.
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>

Save the file.
Run the application.
Select an employee from the DropDownList control to see the Office Phone field populate (see Figure 11).

Figure 11. Select an employee from the DropDownList control.

Implement the fault event

In this section you will generate a fault event.

Return to Flash Builder.
Locate the WebService object in the Declarations block.
To the WebService object, use the content assist tool to create a fault event.
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.

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)"/>

    

Within the Script block, locate the generated employeeService_faultHandler() function.
Add a breakpoint to the same line as the closing brace of the employeeService_faultHandler() function (see Figure 12).

Figure 12. Place a breakpoint on the same line as the ending brace of the employeeService_faultHandler() function.

Save the file.
Click the Debug button.
Click Yes when the Confirm Perspective Switch dialog box appears.
Double-click the Variables tab to maximize the view.
In the Variables view, expand the event object to reveal the fault event.
Note the faultString property and value (see Figure 13).

Figure 13. View the debugging information for the fault event in the Variables view.

Double-click the Variables tab to minimize it.
Click the Terminate button to end the debugging session.
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.

Within the Script block, locate the employeeService_faultHandler() function.
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");
}

    

Save the file and run the application.
You will see the Alert dialog box display the fault event information (see Figure 14).

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.

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.