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.