| This section describes a procedure for accessing qProducts.cfc as a Web service using the WebServiceConnector component in Flash MX 2004 Professional. Unfortunately, if you use the DataSet component that comes with the Flash MX 2004 Professional 7.0.1 update, the final result does not display correctly: Of four columns of data that should be displayed in the DataGrid component, only two display. If you use the pre-update DataSet component, everything works correctly. I considered just describing something much simpler, such as a situation in which the Web service returns a string, which is then displayed in a TextArea component. This scenario seems to work reliably most of the time, with both pre-update and post-update components . However, there are already excellent tutorials available on the Web that cover this simple scenario.  Here is a good tutorial on the WebserviceConnector: "Building a Tip of the Day Application," by Jen DeHaan, http://www.macromedia.com/devnet/mx/flash/articles/tipoday.html. Be sure to check out part two, which is where it gets into the WebServiceConnector. By the time you read this, a de- bugged DataSet component may be available from the Macromedia or elsewhere. (Check http://www.flashoop.com for news.)
In the end, I decided that I would be contributing more to the sum total knowledge by leaving this section as is than by repeating what has already been excellently done elsewhere. The procedure described here is (theoretically) correct, and there is a working example on the CD (getBooks_wc.fla), which incorporates the pre-update DataSet component. Before getting into details, let me note that the procedure I am about to describe assumes that you want to access a Web service that you have never previously defined in the Flash MX 2004 authoring environment. You can tell whether you have previously defined a Web service by going to the Web Services panel (Window, Development Panels, Web Services). If the service you want to access is already defined in the Web Services panel, you can save yourself a couple of steps. The catch is that the service may be defined in the Web Services panel, even if you've never used the Web Services panel . When you place a WebServiceConnector in the workspace and define a Web service in the Property inspector, that Web service automatically shows up in the Web Services panel, too. If you want to access a Web service that is already defined in the Web Services panel, see "The Web Services Panel" sidebar, page 673 , in this chapter.
The Web Services Panel The Web Services panel (Window, Development Panels, Web Services) displays information about Web services in an easy-to-digest format. You can use it to define and explore a new service, or to explore a previously defined service. Very importantly, you can use it to quickly create and configure a WebServiceConnector to access an operation of a defined Web service. To define a new Web service, you have to provide the WSDL URL for the Web service. You can enter the URL in the Property inspector with a WebServiceConnector selected, or you can use the Web Services panel itself. To enter the URL in the Web Services panel, click on the Define Web Services button in the upper left of the panel. (See Figure 23.3.) Figure 23.3. The Web Services panel. 
In the Web Services panel, each Web service is represented by a globe icon, followed by an identifier formed from the name of the service with the word "Service" tacked on the end. Thus, the qProducts Web service becomes qProductsService , and the BabelFish Web service becomes BabelFishService . If the service has any operations defined, there will be a small plus sign to the left of the globe icon. Click on the plus sign to expand the hierarchical display for the Web service. The first level of the hierarchy shows the names of the operations the Web service offers. For instance, in Figure 23.3, the Web Services panel shows that the qProducts service offers just one operation, getBooks() . Similarly, the BabelFish service offers one operation, BabelFish() . The next level down shows params (parameters) and results . For instance, we can see that the getBooks() operation takes no parameters and returns a ColdFusion query, which is equivalent to an Array object in Flash. For BabelFish, the Web Services panel shows that the operation does take parameters and returns a string. The next level down provides additional information. For instance, under params , it provides the names and datatypes of any parameters. For example, for BabelFish, the parameters are sourcedata (the string to be translated) and translationmode (a short code, indicating the type of translation to be performed, such as English to French, French to German, and so on). It may also provide more information about results. You can quickly create and configure a WebServiceConnector by right-clicking (Windows) or Ctrl-clicking (Mac) on any operation, such as getBooks() or BabelFish() in Figure 23.3, and selecting Add Method Call from the context menu. A WebServiceConnector component is created on the Stage, and the WSDLURL and operation fields are automatically filled in the Property inspector, all in a single operation. |
This procedure, which requires no hand-coded ActionScript, has three basic phases: creating component instances, setting up the databindings, and creating a triggering mechanism for the data source. In slightly more detail, the process can be broken down into seven basic steps: - Drag and drop a WebServiceConnector component into the workspace and give it an instance name.
- In the Property inspector, set two WebServiceConnector component properties: the WSDL URL and the operation (function) that you want to call.
- Drag and drop a DataSet component into the workspace and give it an instance name.
- Drag and drop a DataGrid component onto the Stage and give it an instance name.
- Set up databindings in the Component Inspector between the WebServiceConnector and the DataSet.
- Set up databindings in the Component Inspector between the DataSet and the DataGrid.
- Drag and drop a Button component onto the Stage and apply a Behavior that will "trigger" the data source (the WebServiceConnector) when the user clicks on the button.
Triggering the data source brings the data from the ColdFusion server into the WebServiceConnector, which provides the data to the DataSet, which in turn provides the data to the DataGrid. The DataGrid displays the data. Creating Component Instances Drag and drop a WebServiceConnector component from the Data Components section of the Components panel into the workspace. The WebServiceConnector component isn't a visual component, so it does not need to be on the Stage. You may prefer to position it off the Stage, so that what you see on the Stage as you're working more closely represents what users will see. With the component selected, give it an instance name in the Property inspector. For this example, we will use the instance name books_wc . In the Property inspector, type http://localhost:8500/greendept/qProducts.cfc?wsdl into the WSDLURL field. (As with Flash Remoting, the localhost:8500 part of the URL may vary ” especially the port number.) The question mark followed by wsdl causes the ColdFusion server to dynamically generate and return a WSDL file that contains a description of the Web service interface, allowing Flash MX 2004 to determine what operations are supported, what parameters the operations require, and what results the operations return. Flash MX 2004 uses this information to build the display in the Web Services panel and to populate the Component Inspector. Click in the blank operations field and click on the down arrow to get a list of operations. There is just one operation in this case: getBooks . Select the operation from the drop-down menu. Or, you can just type getBooks in the operation field. Drag and drop a DataSet component into the workspace and give it an instance name (we'll use books_ds ). Again, this is a non-visual component, so it doesn't have to be on the Stage. Why do we need the DataSet component? Because If you bind a WebServiceConnector component directly to a DataGrid, the DataGrid's column sorting feature does not work. However, if you bind the WebServiceConnector to a DataSet component, and bind the DataSet component to the DataGrid, the sorting works. The DataSet component acts as a middleman between the WebServiceConnector and the DataGrid. Drag and drop a DataGrid component onto the Stage and give it an instance name. For this example, we use books_dg . Change the DataGrid's width and height in the Property inspector, so that it fills most of the Stage. (But leave room for the button.) You may even want to make the Stage bigger (Modify, Document, Dimensions). Drag and drop a Button component onto the Stage, anywhere where it doesn't overlap with the DataGrid component. It doesn't need an instance name. Setting Up Databindings The first step is to bind the WebServiceConnector result to the DataSet dataProvider . When the WebServiceConnector returns data, it is stored initially in the DataSet. To set up this binding, start by selecting the WebServiceConnector. In the Component Inspector, in the Bindings tab (which is present only in Flash Professional), click on the blue plus sign (the Add Binding button). The Add Binding dialog pops up, enabling you to choose between params and results . params represents parameters passed to the WebServiceConnector. However, in this case, the getBooks() function doesn't take any parameters, so do not select the params option. Instead, select results and click OK. You have now indicated that you are going to bind the WebServiceConnector results (the recordset it gets from the ColdFusion server) to something. Next, you need to choose that something: the DataSet dataProvider . In the name/value area at the bottom of the Component Inspector, click in the empty value box to the right of the bound to name. A magnifying glass icon appears on the right side of the value box, as shown in Figure 23.4. Click on the magnifying glass icon. Figure 23.4. The Component Inspector. Clicking on the magnifying glass brings up the Bound To dialog. 
You get the Bound To dialog (Figure 23.5), listing all the components in the scene in the Component Paths section on the left side of the dialog. Click on the DataSet component. In the Schema Location section on the right side of the dialog are four attributes of the DataSet that are candidates for binding. The top one, dataProvider , is already selected. Leave it that way and click OK. Figure 23.5. The Bound To dialog. 
You've just completed one binding, feeding the results of the Web service call into the DataSet. The Component Inspector should look like Figure 23.6. The next step is binding the DataSet to the DataGrid. Figure 23.6. The Component Inspector, showing the WebService-Connector bound to the DataSet. WebService-Connector, <books_wc> at the top of the Component Inspector indicates that the WebServiceConnector is selected in the workspace. 
Select the DataSet component in the workspace. The Bindings tab of the Component Inspector reflects the binding that you just created (Figure 23.7). Figure 23.7. The Component Inspector, showing the DataSet bound to the WebService-Connector. DataSet, <books_ds> at the top of the Component Inspector indicates that the DataSet is selected in the workspace. 
Click the blue plus sign in the Bindings tab of the Component Inspector. In the Add Binding dialog, choose the dataProvider and click OK. You now have the dataProvider twice on the Bindings tab. Click in the value box to the right of the bound to name. Click on the magnifying glass. In the Bound To dialog, select the DataGrid in the Component Paths section on the left. On the right, in the Schema Location section, dataProvider is already selected. Click OK. The Component Inspector should look like Figure 23.8. Figure 23.8. The Component Inspector, showing the DataSet bound to the DataGrid. DataSet, <books_ds> at the top of the Component Inspector indicates that the DataSet is selected in the workspace. 
All the databinding is now complete. Triggering the Data Source All that remains now is to create a means of "triggering" the data source ”a way to tell the WebServiceConnector to call the getBooks() function. We'll use the Button component to implement this feature. Start by selecting the Button component on the Stage. To set up the triggering capability, use the Behaviors panel. If the Behaviors panel is not already visible, select Window, Development Panels, Behaviors. In the Behaviors panel, click on the blue plus sign (the Add Behavior button). Roll down to the Data category (the first category). Roll over to Trigger Data Source, the only option in the Data category, as shown in Figure 23.9. Click once. Figure 23.9. Selecting the Trigger Data Source behavior on the Behaviors panel. 
The Trigger Data Source dialog is displayed, with only one possible data source to select, books_wc , the WebServiceConnector. Click on books_wc to select it, and click OK. That's it. The behavior is now applied to the button. You're now ready to test your movie. When you click the button, it should trigger the WebServiceConnector and data should display in the DataGrid. getBooks_wc.fla on the CD illustrates the completed project, with several DataGrid manipulation options, such as removing the left-most column, changing the header text, and highlighting every other row for easier scanning. After the DataGrid is displaying data, all the techniques for manipulating the DataGrid are exactly the same as those described previously in this chapter. See "Using and Modifying the DataGrid Component," page 668 , earlier in this chapter.
|
