Connecting to a Web Service using Flash - Page 3
by kirupa  |  7 September 2010

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

In the previous page you got your application working, and you also learned the six steps of communicating with a web service. In this page, we'll look at how those six steps map to actual code.

Looking at the Code
Here comes the fun part - looking through each section of code and dissecting every sinister motive each line may be hiding.

private var movieWebService:WebService;
private var serviceOperation:AbstractOperation;
 
...
...
...
 
function SetupWebService(event:MouseEvent):void
{
var url:String = "http://www.kirupafx.com/WebService/TopMovies.asmx?WSDL";
 
movieWebService = new WebService();
movieWebService.loadWSDL(url);
 
movieWebService.addEventListener(LoadEvent.LOAD, BuildServiceRequest);
 
}

Let's start with the SetupWebService method, which as you saw on the first page itself, is invoked when the Click Me button is pressed. This method is responsible for helping to build the request that will be sent to your web service.

The first thing I do is declare a variable called movieWebService whose type is WebService:

private var movieWebService:WebService;

This variable is initialized in the first line of the SetupWebService method where it officially becomes a WebService object:

movieWebService = new WebService();

Once you have your WebService object, you can start doing all sorts of crazy things such as specifying the actual URL of your WebService and specifying the method to load once your WebService object is up and running:

var url:String = "http://www.kirupafx.com/WebService/TopMovies.asmx?WSDL";
.
.
.
movieWebService.loadWSDL(url);
 
movieWebService.addEventListener(LoadEvent.LOAD, BuildServiceRequest);

The loadWSDL method is what you use to specify the web service you want to connect to. The LoadEvent.LOAD event gets called when first contact with the web service is sufficiently made. Once contact is made, the BuildServiceRequest method gets called.


Let's look at BuildServiceRequest next:

function BuildServiceRequest(evt:LoadEvent)
{
serviceOperation = movieWebService.getOperation("GetMovieAtNumber");
 
serviceOperation.addEventListener(FaultEvent.FAULT, DisplayError);
serviceOperation.addEventListener(ResultEvent.RESULT, DisplayResult);
 
serviceOperation.send([GenerateRandomNumber(0,9)]);
}

The BuildServiceRequest method is responsible for taking what you started with your movieWebService object and filling in more missing details. The first thing you do is specify the web service operation you want to perform:

serviceOperation = movieWebService.getOperation("GetMovieAtNumber");

The list of operations a web service contains can be found by either referring to the web service documentation or by just visiting the web service in your browser.

The operation I am interested in GetMovieAtNumber, and I pass that in to our web service's getOperation method.

Notice that I specify these alterations to the serviceOperation variable whose type is AbstractOperation. The AbstractOperation class takes over from our Web Service class to handle the remaining part of the communication.

The next thing I do is listen for some events on serviceOperation to handle both a case where everything works well and one where things don't work well:

serviceOperation.addEventListener(FaultEvent.FAULT, DisplayError);
serviceOperation.addEventListener(ResultEvent.RESULT, DisplayResult);

Notice that the events are FaultEvent.FAULT and ResultEvent.RESULT, and they are associated with the event handler DisplayError and DisplayResult respectively.

One of these events will fire when the request is sent off to the web service, and that is handled by the following line:

serviceOperation.send([GenerateRandomNumber(0,9)]);

The send method on the serviceOperation object is responsible for sending our web service request off. It is in this method that you can pass in any arguments your web service operation may require.

If your web service operation requires no arguments, you could just do the following:

serviceOperation.send();

If your web service operation requires one argument, you could just get away by passing that one argument plainly:

serviceOperation.send(5);

If your web service operation requires 1 or more arguments, you can do what I did in the example and use array syntax such as [value1, value2, value3,..., valueN]:

serviceOperation.send([5, "Kirupa", "Blue"]);

The GetMovieAtNumber operation does require one argument, and that is why you see what you see. The GenerateRandomNumber function returns a random number between 0 and 9, and its code is documented in my earlier Random Numbers in Flash tutorial.

With this line, your web request gets sent. After your web request gets sent, you wait for a response from the server. If the response back returns an error, the FaultEvent.FAULT will get fired, and the DisplayError method will get called.


Since I went there, let's look at the DisplayError method next:

function DisplayError(evt:FaultEvent)
{
trace("error");
}

As you can see, this method is very simple in my implementation. If there is an error, just tell me that there is an error.

To get more detailed information about the error, just access the passed in FaultEvent object's fault, message, messageID, or statuscode properties.


To end on a positive note, let's now look at the case when your request is successfully sent and received. In this case, the ResultEvent.RESULT event gets fired, and that calls the DisplayResult method:

function DisplayResult(evt:ResultEvent)
{
var movieName:String = evt.result as String;
movieText.text = movieName;
}

The most important thing to know when handling the ResultEvent.RESULT event is that the data that gets returned is in your event's result property:

var movieName:String = evt.result as String;

Once you have access to the value stored by the result property, you are done! In my case, I simply assign the value to the movieText text field that I have on my stage.

Conclusion
Phew - that was quite the trip. Hopefully this tutorial helped you to understand how to use Flash and ActionScript 3 to connect to a web service. The only slightly tricky part is getting Flash to recognize the Flash Builder libraries. Once you have done that, everything else is just putting the six steps to communicating with a web service into code.

If you want to see my final source code, download it from below:

Download Final Source Files

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!

Kirupa's signature!

1 | 2 | 3




SUPPORTERS:

kirupa.com's fast and reliable hosting provided by Media Temple.