This is not Web Services 101. This is not an introduction to Flash. This is not art. This is not a love song. Now that that's out the way, be prepared to bind data like there's no tomorrow.

In this article I'm going to show you three different ways to consume a Web service and some of the pros and cons of each approach. When you're done reading you should have an understanding of what data binding is, how to use it in your applications, and how to achieve similar results without using it.

Unfortunately for some, Flash Professional is required to follow along with the examples. If you haven't upgraded Flash to the Professional version yet, taking advantage of the Web service integration and data binding might just be a good enough reason to. Don't forget about the trial version available as well...

If you're ready, dust of your computer and let's go.

What Are Web Services?
A Web service is, more or less, a remote procedure call wrapped in an XML package and typically transmitted over HTTP. You make a request to the URI of the Web service, passing in any appropriate parameters, and are greeted with an XML packet containing the result of the function call. The standard XML format for Web service messages is SOAP - Simple Object Access Protocol.

Web services can be inspected by requesting the WSDL - Web Services Description Language - of the service. The WSDL explains how to interact with the service, what methods are available, what their parameters are, etc. The WSDL format isn't the easiest to read. Thankfully, Flash will help us out with WSDL interpretation, which we'll see a little later.

There are many advantages to using Web services which can be found in the further reading links following this article. We still have a long way to go, so I'll just assume that you've decided to leverage a Web service or two in your next Flash project and now you're itching to know how.

What Is Data Binding?
Now that we have an idea what Web services are, data binding is next on the explanation hit-list. Data binding is... well, magic. Through data binding you can "glue" two separate pieces of a program together. Whenever one piece changes the other piece will automatically notice that change and update itself without any coding necessary. As an added bonus, data binding can be a one- or two-way street.

Data binding is remarkably simple to use and can be done without writing a single line of code. Because of this, it's a blessing and a curse at the same time. It eliminates the need for you to program what could be complex interactions, but the "magical" aspects of data binding can make it a maintenance nightmare.

In the coming examples, I'll show you how to use it, how to avoid using it, and finally make some recommendations for when data binding is appropriate.

The Morse Code Web Service
For the three examples that we'll be going through, I've found a Web service at xmethods.com to use. The Web service, located at www.regomnet.de/morse.aspx, allows us to easily convert a string to Morse code and back again. We'll leverage this service to create a simple client that can encode and decode Morse code messages.

Let's get started - fire up the Flash IDE and meet me back he when you're ready.

The Web Services Panel
Understanding the WSDL of a Web service can be difficult. The Web service description for our Morse code Web service can be found at http://web221.area-18.server-home.net/Morse.asmx?WSDL - what a mess! Although the WSDL contains all of the methods available, it can be tricky finding them, let alone figuring out what parameters you need to pass. Fortunately the folks at Macromedia have greatly simplified the process.

In the Flash IDE, we're going to open up the Web services panel. You can find it Window -> Development Panels -> Web services. Once opened, we can load the WSDL of a Web service into it and Flash will parse it for us.

Click the globe icon in the top left corner of the panel to bring up the "Define Web Services" dialog. Click the plus icon to add a Web service, and type in the location of the WSDL for the Morse code Web service - http://web221.area-18.server-home.net/Morse.asmx?WSDL - as previously mentioned. Click OK, wait for the panel to complete processing, and then you'll see the newly added Web service.

Expand the service to see the methods available, and expand the methods to see their parameters and return types. Your panel should look like figure 1.

Want to see something cool? Make sure you have a blank document open, right click (control click on a Mac) on the MsgtoMorse method and select "Add Method Call." This creates a WebServiceConnector on the stage all set up for the operation. All we need to do now is give it an instance name and invoke it. Welcome to example 1!

Select the WebServiceConnector that was just placed on the stage for us by adding a method call from the Web Services panel, and give it an instance name of "msg2morse_wsc." Add another method call for MorsetoMsg and give the newly placed WebServiceConnector component an instance name of "morse2msg_wsc." Drag both instances to the top left, outside of the stage area, and then change "Layer 1" to be "connectors."

Now that the connectors are set up, we'll create the interface. Lock the connectors layer so we don't accidentally place anything on it, and create a new "interface" layer.

From the components panel, drag a TextArea component to the stage, name it "msg_ta" and position and size it towards the top half of the stage. Drag another TextArea to the stage, name it "morse_ta" and position and size it on the bottom half of the stage.

Drag a Button component to the stage, name it "msg2morse_btn" and position and size it next to the msg_ta component. Change the "label" property to "Get Morse Code." Repeat the process for a "morse2msg_btn," using the label "Get Message."

With everything set up, your movie should look like figure 2.

Now that the interface is set up, we'll hook everything together via data binding. To access the data binding feature of Flash MX Professional 2004 we need to open the "Component Inspector" panel from the "Window" -> "Development Panels" menu item, and select the "Binding" tab. It looks like figure 3.

All of the magic happens through this panel. To integrate binding with our interface, unlock the "connectors" layer and click on the msg2morse_wsc.

Remember, binding allows us to glue two pieces of data together. The Msg2Morse Web Service method needs to take in a string message, and it will return the Morse code result as a string. First we'll bind the message parameter to the text area - click on the plus icon in the top left of the panel to add data binding. Select "msg : string" under "params" in the Add Binding dialog, as pictured in figure 4 and 5.

After selecting what we want to bind, we need to pick what we want it to be bound to. In the Component Inspector panel, double click the "bound to" value. We're binding the message parameter, so we'll select the "msg_ta" from the list on the left, and then the "text" property from the list on the right. This will allow the user to type in the message that will be sent to the Web service for conversion.

After pressing the "OK" button, the binding is in place. The process is the same for the other components. With the message parameter bound, now we need to bind the "result" of the "msg2morse_wsc" to the "text" property "morse_ta." Repeat the process above to add the binding.

Repeat the process again to bind the "Morse" parameter of "morse2msg_wsc" to the "text" property of the "morse_ta" component. One last time, repeat the process to bind the "result" of the "morse2msg_wsc" instance to the "text" property of the "msg_ta" component.

The only thing left to do is wire the buttons. Add an "actions" layer at the top, and put the following code on the keyframe:

// onRelease fires when the user presses and release the button
msg2morse_btn.onRelease = function() {
	// trigger invokes the Web Service
	msg2morse_wsc.trigger();
}
morse2msg_btn.onRelease = function() {
	morse2msg_wsc.trigger();
}

Test the movie (CTRL+Enter on Windows) to see your creation. Type a message into the text area at the top, press the "Get Morse Code" button, and watch as the text area at the bottom is populated when the result is received. Enter "... / --- / ...", minus the quotes, in the text area at the bottom then press the "Get Message" button next to it. Watch the text at the top update when the results come back from the Web service call.

As you can see, data binding is a powerful concept. With a very minimal amount of effort we've created an application that relies on a Web service to handle business logic and uses data binding to glue the interface together. Hold your applause until the end, please.

While the Component Inspector panel makes data binding a cinch to use, there is a dark side to this approach. Looking at your creation there is no visual indication to show components with active data binding. If you want to look for binding, you need to click on every component and check out the Binding properties to see if any exists. If you didn't know that data binding was used, maintaining the interface is almost impossible because of the "it's magic" effect that the Binding panel has.

This reminds me of the un-maintainable nightmare of "jungle code" reminiscent of the Flash 5 days where code was placed "on" movie clips and took an expedition to find what you were looking for. The cost of this simplicity is a headache waiting to happen in the future. Believe me, I've been there.

Luckily for us there is a way to consolidate all of the data binding configuration in one location. We can leverage the power of binding, but greatly increase maintainability by making the bindings easy to find and modify. It turns out that we can code bindings "by hand" through ActionScript and place them in one central location.

In Part Two we'll look at two other ways of building this same application, each with their pros and cons. Each example can be the "right" way to code something, depending on the application requirements and the person doing the coding.

• Figure 1
• Figure 2
• Figure 3
• Figure 4
• Figure 5