Flex is all about User Experience. A Rich Internet Application (RIA) is not just attractive skins or fancy animations. It also means interacting with users and helping them use your application better.

One important part of User Experience is to provide a better visual feedback. For example, when someone types a model name and clicks Search button, it might take 2-3 seconds to get results from a web service.  What would a user do during that time? He or she probably keeps clicking the Search button, or thinks your application is dead.

So how to let users know what is going on with your application? You need to give them some visual feedback: like show the busy cursor when waiting for the back end response, and then remove the busy cursor when the data is ready.

To control the cursor image in Flex, you need CursorManager.

How to use CursorManager

Here is how you typically use CursorManager in Flex:

- Display the default busy cursor
  CursorManager.setBusyCursor();

- Remove the busy cursor
  CursorManager.removeBusyCursor();

- Create a new Cursor from your own cursor class
  [Bindable]
  [Embed(source="assets/heart.gif")]
  private var HeartCursor:Class;
  var cursorID:int = CursorManager.setCursor(HeartCursor);

- Removes a cursor from the cursor list
  CursorManager.removeCursor(cursorID);

- Remove all cursors
  CursorManager.removeAllCursors();

Sample Code

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">

    <mx:Script>
      <![CDATA[
         import mx.managers.CursorManager;

         private var cursorId:int;

         [Bindable]
         [Embed(source="assets/heart.gif")]
         private var HeartCursor:Class;

         private function showBusyCursor():void {
           CursorManager.setBusyCursor();
         }

         private function removeBusyCursor():void {
           CursorManager.removeBusyCursor();
         }            

         private function showHeartCursor():void {
           cursorId = CursorManager.setCursor(HeartCursor);
         }

         private function removeHeartCursor():void {
           CursorManager.removeCursor(cursorId);
         }
     ]]>
    </mx:Script>

    <mx:Panel title="Flex Tutorial - Cursor Manager"
        width="500" height="200"
        horizontalCenter="0" verticalCenter="0" verticalGap="20"
        horizontalAlign="center" verticalAlign="middle">

        <mx:HBox>
          <mx:Button label="Show Busy Cursor"
                     click="showBusyCursor()"/>
          <mx:Button label="Remove Busy Cursor"
                     click="removeBusyCursor()"/>
        </mx:HBox>

        <mx:HRule width="95%"/>

        <mx:HBox>
          <mx:Button label="Show Heart Cursor"
                     click="showHeartCursor()"/>
          <mx:Button label="Remove Heart Cursor"
                     click="removeHeartCursor()"/>
        </mx:HBox>
   </mx:Panel>

</mx:Application>

Conclusion

CursorManager offers a convienent way for you to control cursor display in Flex. By using it properly, you will provide a better visual feedback to users, thus enhance the user experience of your applicaton.

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.