Tài liệu Using the WebServiceConnector Component ppt

The WebServiceConnector component handles the process of converting data to XML the data you send to the Web service in the appropriate format, sending it to the Web service as well as r

< Day Day Up >

Using the WebServiceConnector Component

Through the use of the WebServiceConnector component, a Flash movie can connect to a Web service and load information from it A Web service is a server-side application that accepts data, performs a service based on that data, and returns a result For instance, a Web service might allow you to feed it a zip code and, as a result, return the weather in the specified area Another Web service could find all the spelling mistakes in a string of text fed to it, correct the spelling errors, and return the modified text

To send data to a Web service, the data must be formatted in XML More precisely, the XML must meet the SOAP (Simple Object Access Protocol) standard Fortunately, you don't need to learn this standard The WebServiceConnector component handles the process of converting data to XML (the data you send to the Web service) in the

appropriate format, sending it to the Web service as well as receiving and parsing the response This means that you can communicate with Web services without having to worry about formatting the request properly or figuring out how to interpret the returned XML The WebServiceConnector component handles everything

The WebServiceConnector component has five parameters:

• WSDLURL This parameter is the URL for the file that defines the Web service operation When this parameter is entered, the Flash authoring environment

automatically attempts to load the destination file This allows the authoring

environment to display information related to the Web service in the Schema tab

of the Component Inspector, which will be discussed later in this lesson

• operation After the file located at WSDLURL is loaded, the operation parameter

allows you to select from a drop-down list the operation that you want to execute Many Web services provide only one operation, such as getPrice, whereas other Web services may provide several types of operations, such as SendICQmessage, SendMSNmessage, and SendAIMmessage

• multipleSimultaneousAllowed This is a drop-down list in which you can choose

true or false The default value is true If true is selected, the component makes Web requests to the Web service whenever it is asked to do so, even if it hasn't received a response from a previous request If false, it won't make any more

requests until a response to the current request has been received

• suppressInvalidCalls You can select either true or false from a drop-down list for

this parameter The WSDL file loaded via the WSDLURL parameter specifies what type of data is required to process the request If suppressInvalidCalls is set

to true and your Web services request doesn't contain the specified type of data, the request is not sent If suppressInvalidCalls is set to false, the request is sent, no matter what type of data is entered

• timeout This parameter is optional It expects either nothing or a number If a

number is entered, the WebServiceConnector component cancels the request for the service if a response is not received before the number of seconds in the

timeout parameter is reached

As mentioned a moment ago, the Schema tab of the Component Inspector is dynamically populated based on the file at the WSDLURL property and the value of the operation property It defines what information you should send and what information you should expect as a result For example, there is a Web service that will give you the physical distance between two zip codes If you enter its WSDLURL into the component and select the getDistance operation, the Schema table updates to show the following image:

There are two main areas in the schema: params and results The params property

contains the variables that you should send with the Web service request, which in this case consist of two zip codes The results property is usually just a string

You use the params property on the Schema tab to learn what information you should send to the Web service You then create an array in the component instance called

params and assign it values in the order in which they appeared in the params property on the Schema tab For example, if we gave the WebServiceConnector component an

instance name of zip_ws, we would add the params array like this:

zip_ws.params = ["27609", "90210"];

The first zip code in the array corresponds to the first property in the Schema, fromZip The second one corresponds to the second property in the Schema, toZip

To get the component instance to perform the service request, you must invoke the trigger() method For example:

zip_ws.trigger();

The trigger() method tells the component to take the params property, format a request, send the request, and wait for a response The response fires an event called the results event You must add a Listener to capture that event For example:

function distanceReceived (ev:Object) {

var distance:String = ev.target.results;

}

zip_ws.addEventListener("result", distanceReceived);

This code adds a Listener to the zip_ws WebServiceConnector component and calls the distanceReceived function when the results event is fired

TIP

your applications

In the following exercise, you will get a chance to use everything introduced in this

section You will use a language translation Web service to create an application that enables you to translate English into a number of other languages

NOTE

The WebServiceConnector component uses XML.sendAndLoad to communicate with the Web service; therefore, it is subject to the same security restrictions found when loading data onto one domain from another For you to be able to use a Web service from

an application sitting on a domain, the target domain (that is, where the Web service is located) must grant you access via its crossdomain.xml file

1 Open Translator1.fla in the Lesson11/Assets folder

There are three layers on the main timeline: Actions, Assets, and Background The Actions layer will contain the ActionScript that you will be adding to this project

On the Assets layer are a ComboBox component with an instance name of

language_cb, two TextArea components named input_ta and output_ta, and a Button component named translate_btn

When this project is complete, you will be able to enter text in the input_ta

TextArea component, select a translation language using the language_cb

ComboBox component instance, and click the translate_btn Translate button The Web service will then be sent a request containing the text to translate, as well as information about the selected language to translate it into The Web service will translate the text and send the result back to the application, where it will be

displayed in the output_ta TextArea component

Communication with the Web service is handled by an instance of the

WebServiceConnector component, which we'll add to our project next

2 Open the Components panel and drag an instance of the WebServiceConnector component onto the stage Place it to the left of the visible stage area so that it doesn't get in the way of the other assets

You have now added an instance of the WebServiceConnector component to your project Over the next few steps you will configure this component to do what you

need

3 Select the WebServiceConnector component and give it an instance name of translator_ws

This name will be used in our scripts to communicate with the component

4 With the component still selected, open the Component Inspector

The Component Inspector should open showing three tabs: Parameters, Bindings, and Schema In the steps that follow, you will work with the Parameters tabs and

the Schema tabs

5 On the Parameters tab of the Component Inspector, enter the following URL into the WSDLURL parameter:

http://www.xmethods.net/sd/2001/BabelFishService.wsdl

This is the URL for the WSDL file that defines exactly how the

WebServiceConnector should talk to this particular Web service In the WSDL file, the only data that interests us is the information regarding what data we need

to send and what data we expect to be returned

As soon as you enter the http://www.xmethods.net/sd/2001/BabelFishService.wsdl URL and deselect that particular parameter, the Flash authoring system loads that file into the authoring environment When the file is loaded, you will be able to select a Web service operation from the operation parameter drop-down list shown

on the Parameters tab The Schema tab will update depending on the operation selected

NOTE

You must be connected to the Internet to complete Step 5 Flash cannot load the WSDL file if you are not connected to the Internet

6 On the Parameters tab, click the operation drop-down list Select BabelFish

For this particular Web service, there is only one operation from which to choose

You will not need to change any of the other parameters of this component

instance

7 Select the Schema tab in the Component Inspector Notice that there are now two fields listed below params (translationmode and sourcedata)

The params object on the Schema tab defines what data should be sent to the Web service From what we see here we determine that we need to send a string,

translationmode, which represents the language of the text being sent as well as the language to which the text should be translated In addition, we need to send a string, sourcedata, which represents the text to be translated

While the Schema tab gives you some idea of what you're supposed to send, it doesn't tell you everything For example, the translationmode string accepts strings such as "en_fr" (which stands for "English to French") The only way you know this information is by actually reading about the Web service from wherever you found the Web service For this example, the Web service was found through Xmethods.com The listing for this Web service described exactly what the Web service does and exactly what the Web service needs to get the job done

The following list shows just a few of the many acceptable translationmode string values:

o en_fr English to French

o en_de English to German

o en_it English to Italian

o en_es English to Spanish

The sourcedata string simply holds the text that you want to be translated

In the next few steps, you will create an array called on the WebServiceConnector instanceparams, and will assign values The params array holds the information that will be sent to the Web service

You are now ready to ready to add the ActionScript needed to complete this

project

8 Select Frame 1 in the Actions layer and open the Actions panel Add the following code:

9

10

11 language_cb.dataProvider = [{label:"English to French", data:"en_fr"},

{label:"English to

12

13 German", data:"en_de"}, {label:"English to Italian", data:"en_it"},

{label:"English to

14

15 Spanish", data:"en_es"}];

16

You'll remember that language_cb is the name of the ComboBox component instance in our project By setting the dataProvider property of the component instance equal to an array, we automatically populate the contents of the

component Each element in the array represents one item in the ComboBox and has two properties—label and data When the Flash movie is published, the

ComboBox shows the text entered in each of the label properties When an item is selected, the value property of the ComboBox is set to the data property associated with the selected item

If a user selects English to German, for example, the value of the ComboBox component instance is changed to "en_de" This value will be used when the

Translate button is clicked

9 Add the following function to the frame:

10

11 function translationReceived(ev:Object) {

12

13 var str = ev.target.results;

14

15 output_ta.text = str;

16

17 }

18

In a moment, we will script our project to execute this function when a response from the Web service has been received The ev parameter is a reference to the Event object created specifically for this event (See Lesson 10, "Scripting UI Components," for more information about Event objects.)

The first line of this function creates a variable named str This variable is

assigned a value based on the results property of the Web services component in our project This can be a tricky concept, so let's look at an example of how this will work

As mentioned earlier, when a WebServiceConnector instance receives a response from the Web service with which it's communicating, that information is stored in the results property of the instance Because receiving a response from the Web service executes this function, ev.target (as used in the function) is a reference to the translator_ws component instance in our project; therefore, ev.target.results is

a reference to the information the Web service has sent back to our component instance In the end, the value of str is the string value sent back from the Web service

The second line in this function displays the value of str (the resulting translated

text) in the output_ta component instance

10 Add the following function, which asks the WebServiceConnector component instance to do its job:

11

12 function translate() {

13

14 var direction:String = language_cb.value;

15

16 var textToTranslate:String = input_ta.text;

17

18 translator_ws.params = [direction, textToTranslate];

19

20 translator_ws.addEventListener("result", translationReceived);

21

22 translator_ws.trigger();

23

24 }

25

This function is executed when the Translate button is clicked (ActionScript to handle this action is added in the next step) A variable called direction is set It gets its value from the value property of the language_cb ComboBox component instance For example, if the user has selected English to French, direction is assigned a value of "en_fr"

The next variable created is textToTranslate This variable value is the text from the input_ta TextArea component

The next line creates an array in the translator_ws instance called params This array is used to store the data that will be sent to the Web service Remember that the Schema tab listed the data to be sent to the Web service in this order:

translationmode, sourcedata, with translationmode (the first parameter)

representing a value such as "en_fr", and sourcedata (the second parameter) representing the text to translate The names used for these parameters (as shown

on the Schema tab) are really not as important as their order In other words, the first parameter should hold a value representing how to translate the text, and the second parameter should hold the text to translate The params array we've added

to the translator_ws instance holds the data sent to the Web service, stored in the correct order

The next line of the function registers the translationReceived() function (defined

in Step 9) to listen for the results event in relation to the translator_ws instance When the translator_ws instance receives a response from the Web service, the translationReceived() function is executed

The last line of the function tells the translator_ws WebServiceConnector

component instance to perform the request This is done by invoking the trigger()

method

11 Add the following ActionScript to capture the click button event:

12

13 var buttonListenerObject:Object = new Object();

14

15 buttonListenerObject.click = function() {

16

17 translate();

18

19 };

20

21 translate_btn.addEventListener("click", buttonListenerObject);

22

You should be familiar with this type of ActionScript by now We create a

Listener object for the button instance and then add a function called click to the Listener object Finally, we register the Listener object to listen for that event when fired by the translate_btn instance

In summary, when the translate_btn is clicked, the translate() function is called translate() puts the data to be sent into the WebServiceConnector instance (by setting its params property), tells the instance to call the translationReceived() function when the results have been received, and finally triggers the connection

process

12 Add this final line of ActionScript to the frame:

13

14 input_ta.text = "Enter text here ";

15

This line of ActionScript forces the input_ta TextArea instance to show text when the application is launched The user can remove this displayed text (by deleting or typing over the displayed text), and then enter new text

13 Choose Control > Test Movie to test your work Enter some English text into the input_ta instance, choose the destination language from the drop-down list, and click the Translate button

If you're connected to the Internet, your text should be translated and displayed in the output_ta component