Menu:

Sponsor

Discover Master of Alchemy, our first iPad/iPhone and iPod touch game!

 

Forum's topics

Latest Files

Archives

Top Rated

Categories

Photo Gallery


Flash MX 2004 - Using the WebServices Connector

In this tutorial we will learn how to use the WebServices Connector in Flash MX 2004 to consume the babelfish web services without the help on any server side language, while doing everything inside Flash.
This is relatively new for Flash, in fact in the previous flash version (MX) to consume a WebServices we need to connect first to a server side language (e.g. PHP) which should make for us the calls to the WS (= web service) and then print the result output to flash in the ordinary way (loadvars), or using Flahs remoting (or AMFPHP). Now we can instead consume a webservice using the new Component pre-installed "WebService Connector" ( web service connector icon )

1. Define the WSDL file

As first thing open flash and then open the WebService Panel. From the panel menu select "Define WebService" (see picture) and add a new line using this wsdl file:
http://www.xmethods.net/sd/2001/BabelFishService.wsdl

picture 1

Once the new WebService has been added you can choose always from the ws panel "refresh web services". Your new WS will appear and clicking on the "+" icon you will see which methods support the new WS you added. (Maybe the first time you need to wait just a while to see the methods, it depends also by your connection speed).

The WS we choose for this tutorial has just one method (BabelFish) as shown in the next picture. This method require as params a translation mode (the language conversion: "en_es", "it_en" etc.) and the string to translate, while it will return as result a string (the translation)

picture 2

2. Building the Flash UI

Ok, now it's time to build the UI interface in flash to be used with the WS component. For this reason we need first a TextInput field. Drag 'n drop from the component panel the textinput component ( ) and give it an instance name of "inputStr". We will use this as sourcedata for the WS.
Now in the same way drag into the stage the combobox component ( ) and call it "lang_cb".
Now it's time to add to the combo box all the availables translation mode which can be used. Select the component into the stage and from the Property panel click on "labels" and add the values as shown in the next picture:

combo values

Now we need a button ( ) and a textArea ( ) where to store the results from our WS. Let's name the textarea "outStr"

The last thisg we need to add to our stage is the webservice connector ( ) and call it "ws". Once added to the stage set up its properties to point to the correct web service, see the picture:

3. DataBinding and trigger

Once we finished to setup our UI we need to tell to the ws component how to threat the data in/out from and to the webservice wsdl file. For this we need to use the WebService Inspector panel, then select the DataBinding tab (be sure to have selected the ws component before open the panel)

Use the "+" icon and select from the opened window "translation mode", then "sourcedata", and finally "results" , in order to have this situation on the component inspector panel:

Now, for each of these values in the databinding panel we need to tell if it's a in or out value (this mean: "in" = data is received from the ws, "out" data is passed to the ws as param).
Select the first item (translationmode), from the properties select "in" as direction and then we need to decide to which item this param should bound to:

Click on the zoom icon and from the next opened window select the combo box item (in the left side), and then the value string (in the right side):

boud to...

In this way, once we trigger the event to the component, it will send ("in" direction.. remember?) as translationmode param the current value of the combo box component.
In the same way use the "in" direction for the sourcedata param and bound to the inputText component. The results param instead should be "out" direction and will bound to the TextArea component.

Ok, it's almost done. The very last thing to do is to set an action in order to tell to the webservice "ws" component to make the request.
Select the button on the stage, open the action panel and write this:

on (click) {
	this._parent.ws.trigger()
}
          

This action will start the component actions..., below a result image of our finished movie: