Your Key to the World of Web Services – Flex WebService

In old days, it sounded like very complex to call web services. SOAP, WSDL, Binding Style, Service, Port, Operation, Message, Type… just name a few of technical jargons here, you might feel lost already.

However, it’s actually very easy  to consume web services in Adobe Flex because it provides a built-in component – WebService. By using it, you can literally Create a Web Service Powered Flex Application in One Minute. Is that amazing?

Your First Flex WebService Application

What we want to build here is a very simple Flex application, which converts a temperature value from Fahrenheit to Celsius. Behind the scene, it calls an online web service provided by w3schools.com to do the conversion.

The final Flex application will look like this:

Once you type a Fahrenheit value (e.g. 100) into the input box and click Convert button, it will show the corresponding Celsius value.

Now, Let me show you how to build this Flex WebService application in 4 simple steps. You can literally finish it within one minute.

Step 1 – Create a New Project in Flex Builder

1. Start your Flex Builder. On the top menu, click File -> New -> Flex Project
2. Give a name to your project, e.g. FlexWebService.
3. Keep the default value for the rest parts, click Finish button.
   

Step 2 – Add Flex WebService Component

Flex provides a MXML tag <mx:WebService> to call web services, that is all you need right now. So just add the following lines to you main MXML file.

<mx:WebService id="myWebService"
    wsdl="http://www.w3schools.com/webservices/tempconvert.asmx?WSDL">
    <mx:operation name="FahrenheitToCelsius"
        result="resultHandler(event)"
        fault="faultHandler(event)">
    </mx:operation>
</mx:WebService>

What have we just done?

• We create a <mx:WebService> with id myWebService.
• We point <mx:WebService> to the URL (http://www.w3schools.com/webservices/tempconvert.asmx?WSDL) of a wsdl file created by our web service provider.
• We specify the operation to use (FahrenheitToCelsius) and the functions to handle the result and fault event (resultHandler and faultHandler).

Step 3 – Add Flex WebService Event Handlers

Now, we add the following code to handle the Flex WebService result and fault event.

<mx:Script>
    <![CDATA[
	import mx.rpc.events.FaultEvent;
	import mx.rpc.events.ResultEvent;
	import mx.controls.Alert;

	private function resultHandler(event:ResultEvent):void {
		cValue.text = event.result.toString();
	}

	private function faultHandler(event:FaultEvent):void {
		Alert.show(event.fault.message, "Error");
	}
    ]]>
</mx:Script>

The above code should be very simple to follow:

• resultHandler function gets the web service’s return data from ResultEvent (event.result), converts it to a string, then bind it to a Flex Text component (cValue) for display.
• faultHandler function gets the fault error message from FaultEvent (event.fault.message) and use Alert window to display it.

Step 4 – Add Flex UI Components to Display the Temperature Converter

In this last step, let’s create a simple UI:

<mx:Panel title="Fahrenheit to Celsis Converter"
    paddingTop="30" paddingRight="10"
    paddingBottom="30" paddingLeft="10">

    <mx:HBox>
	<mx:Label text="Fahrenheit Value: "/>
	<mx:TextInput id="fValue" />
	<mx:Button id="submit" label="Convert"
           click="myWebService.FahrenheitToCelsius.send(fValue.text)"/>
    </mx:HBox>

    <mx:HBox>
	<mx:Label text="Celsius Value: "/>
	<mx:Label id="cValue"/>
    </mx:HBox>

</mx:Panel>

Basically, we create a Panel which contains two HBox to get user input and display the result from the web service. The only thing special here is the Click Event of the Submit button.

<mx:Button id="submit" label="Convert"
    click="myWebService.FahrenheitToCelsius.send(fValue.text)"/>

Here we refer to our Flex WebService through its id myWebService, call its operation FahrenheitToCelsius, and pass a value coming from the TextInput control fValue.

Now let’s click Run button in your Flex builder and see what will happen… …

Congratulations! You Have Created a Web Service Powered Flex Application!

Recap what you have learned so far

• You can consume web services in Flex simply through <mx:WebService>.
• You can specify wsdl url, operation name, result event handler, fault event handler for <mx:WebService>.
• You can trigger your WebService through an event (like button click event), call the send function of the operation, and pass parameters if needed.

Through the sample application we built today, I hope you will see how easy it is to consume web services in Flex.  You can download the complete source code here.

If you have any questions, please feel free to comment on this post or contact me directly .

For the next tutorial, we will talk about some details in Flex WebService and help you thoroughly understand it from A to Z.

You spend quit a lot of time building your Flex application with nice layout, fancy panels, and cool animations. Then all of a sudden, you realize one thing is missing:

Where and How to get the server-side data for my Flex application?

It feels like you have just got a most powerful cannon, but no ammunition to fire.

Using Adobe Flex as a front-end RIA tool, many people are familiar with common Flex components like Panel, HBox, or TileList. However, when coming to the topic like How to Consume Web Services in Adobe Flex, you might encounter some challenges including:

• What Flex component can I use to call web services?
• What are the differences among Flex WebService, HttpService, and RemoteObject?
• What is SOAP? What is WSDL? How to interpret a WSDL and map it to Flex WebService?
• How to consume Web Services in both MXML and ActionScript?
• How to pass request parameters to Web Services from Flex?
• How to set up the return data format for Flex WebService?
• How to handle the Flex WebService events, such as result event and fault event?
• How to retrieve, sort, filter, and bind the Web Services data in Flex?
• Is there any automatic tool to simplify my work on consuming Web Services in Flex?

Over the next week, I want to write a series of 5 tutorials for Flex users facing some of the above problems – those who need to access server-side data by consuming web services in Adobe Flex and who need ammunition for their RIA cannon.

Here are the topics we will be covering over the next week:

1. Creating a Web Service Powered Flex Application in One Minute
2. Understanding Flex Web Service from A to Z
3. Mapping SOAP and WSDL to Flex WebService
4. Retrieving, Processing, and Binding Web Services Data in Flex
5. Utilizing Tools to Simplify the Work on Consuming Web Services in Flex

To follow along with this series, make sure you subscribe to our RSS feed or bookmark and come back to this page.

Stay tuned for the next post of this tutorial series on How to Comsume Web Services in Adobe Flex.