Data Binding

Data binding is a feature introduced back in Flash MX 2004 Professional. It allows you to tie properties of components to one another that will automatically update when certain component events fire. It makes creating web-service-driven applications that much easier because there is very little code required. In fact, you will see that the preceding example can be done in a single line of code.

1.	Return to the stage and open up the Actions panel in the first frame of the actions layer. Remove all but the last line, so the code should now read like this: myConnector.trigger();
2.	Now select the WebServiceConnector component, go to the Component Inspector panel (Window, Component Inspector), and select the Binding tab.
3.	Select the Add Binding button, and the panel should then look like Figure 25.7. Choose results:String and click OK. Figure 25.7. The Add Binding dialog box used to add data bindings between components for fast development.
4.	Now you will see the "results" data binding in the Component Inspector panel. Select it and click in the bound to field.
5.	When you do this, a magnifying glass will appear at the end of the field. Select it, and the Bound To dialog box appears as shown in Figure 25.8. (You can also double-click this field to get the same result.) Figure 25.8. The Bound To dialog box.
6.	Select the TextInput component in the left window and click OK.

Now test the movie again.

Again, you get the same results as before, but the difference is that the only ActionScript in this file is the line that activates the webServiceConnector component.

Now that we are interacting successfully with our web service and have found the easiest way to work with them, let's actually make a useful web service.

In the following example, you will create a web service that accepts a parameter, then squares it, and returns the results.

Open a text editor, create a new file and enter the following code, and then save the file to your web root directory as squareService.asmx.

 <%@ WebService Language="c#" debug="true"  %> using System.IO; using System.Web.Services; public class Square: System.Web.Services.WebService{   [WebMethod(Description="Square the number")]   public  int squareNum(int sentNum) {         int myReturn = sentNum*sentNum;         return myReturn;     }      } 

Much like our previous web service, this one starts off by declaring that it is a web service written in C#. It then grabs the object classes we need. Next, it declares the web service class. After that, we declare the web method and set its description. Then we create the web method. Notice we declare that the result being returned will be an integer. And the parameter being sent will also be an integer.

Save this file and then browse to it and choose the squareNum web method. You will see a screen like Figure 25.9. As you can see, the web service has provided a field where we can place a number to test, so enter the number 8 and click Invoke. You should then see another browser screen like Figure 25.10, indicating that it worked.

Figure 25.9. The web service provides a field to test the web method.

Figure 25.10. Use parameters in web methods to make web services work for you.

Now we will use the webServiceConnector component to create a small app that will use this web service. Again, the only code we will need is the code that will activate the connection. But before you can use the web service, you have to add the WSDL to the Web Services panel, so do that first (http://localhost/squareService.asmx?WSDL).

1.	Create a new Flash document.
2.	Drag an instance of the WebServiceConnector component onto the stage and give it an instance name of myConnector; set the WSDLURL parameter to http://localhost/squareService.asmx?WSDL, and set the operation parameter to squareNum.
3.	Now drag an instance of the TextInput component onto the stage and give it an instance name of num_ti.
4.	Drag an instance of the Button component onto the stage under the num_ti TextInput component; give it an instance name of square_butn, and change its label to square.
5.	Copy the TextInput component and paste it under the button; change its instance name to results_ti.
6.	Select the myConnector, WebServiceConnector and open the Component Inspector panel.
7.	As you did before, choose the Binding tab and select Add Binding; select sentNum: Integer and click OK.
8.	Select the Bound To field, bind it to the num_ti TextInput component, and click OK.
9.	This time, we will be do something a little different. Select the Formatter field and choose Number Formatter (this will format the information of the TextInput component to a number so it can be used with the web service).
10.	Select Add Binding again and choose results:Integer.
11.	Select the Bound To field and bind it to the results_ti TextInput component.
12.	Create a new layer called actions.
13.	Place the following code in the first frame of the Actions layer: //create the listener object var clickListen:Object = new Object(); //add the event to the listener clickListen.click = function(){ myConnector.trigger(); } //finally add the event listener to the button square_pb.addEventListener("click", clickListen);

The preceding code is nothing new; we create the event listener object. Then we set the event to the listener that will trigger the webServiceConnector to activate. And finally, we add the event listener to the Button component.

Now that you have seen how to create and consume web services, let's create an application that will use a web service that we did not create.