ColdFusion Article

A Beginner's Guide to Creating and Consuming Web Services with ColdFusion and Flash

Consuming Web Services with Macromedia Flash MX 2004

As stated earlier in the tutorial, an advantage to writing application functionality as a web service is that different front ends can consume it. For example, you are now going to see how to use Flash MX 2004 to consume the web service you just built.

In exercise 5, we're going to use Flash to consume the web service you just created. First, we're going to create a new Flash document, then point to the web service using the Web Services panel. Then, we're going to place a WebServiceConnector component on the Stage and associate it with your web service. Even if you have never used Flash before, you can easily follow along because you accomplish the entire process by dragging, dropping, and selecting choices from panels (no ActionScript required). Here we go:

Exercise 5: Using Flash to Consume a Web Service

1. Open Flash MX 2004 and create a new Flash document. Save the document as wsconsumer.fla in C:\CFusionMX\devnet\ws.
2. Open the Web Services panel, if it is not already open, by selecting Window > Development Panels > Web Services.
3. Click the Define Web Services icon (the globe icon) in the Web Services panel.
4. Click the plus sign (+) and enter the URL for the ColdFusion web service you have created, http://127.0.0.1:8500/devnet/ws/Simple.cfc?wsdl.

5. The Define Web Services dialog box appears, as follows:

   

   Figure 5. The Define Web Services dialog box that specifies the web service you just created

6. Click OK.
7. In the Timeline panel, double-click Layer 1 to edit it. Change the name to web service.
8. Open the Components panel, and expand the choices for Data Components. Select a WebServiceConnector component from the panel and drag it to the Stage. It does not matter where you place it as it has no visual representation when a user runs the Flash application.

9. In the Properties panel (also called the Property inspector), replace <Instance Name> in the input box with wscBikeParts. Press Enter.

   

   Figure 6. Changing the component name in the Property inspector

10. Ensure that you have selected the WebServiceConnector component by clicking it once. Open the Component Inspector panel.
11. Click the Parameters tab.
12. Click in the Value column for the WSDLURL and select the web service you just configured.

13. Click in the Value column for the operation, and select the returnquery function:

    

    Figure 7. Specifying settings for the WebServiceConnector component

14. From the menu, select Insert > Timeline > Layer.
15. Double-click to edit the layer name and change it to datagrid. Press Enter.
16. Open the Components panel, and from the UI Components grouping drag a DataGrid component from the panel to the left side of the Stage.
17. In the Property inspector replace <Instance Name> with the dgParts. Press Enter.
18. From the Tools panel (on the left hand side of the screen by default), click the Free Transform Tool ( ).

19. Click the DataGrid and resize the it as shown here:

    

    Figure 8. Resizing the datagrid with the Free Transform Tool

20. From the Tools panel, click the Selection Tool ().
21. Select the DataGrid.
22. From the Component Inspector panel, click the Bindings tab.
23. Click the plus sign (+).

24. In the Add Binding dialog box, click dataProvider : Array since the data from the web service will be returned as an array.

    

    Figure 9. Adding a binding to the WebServiceConnector component

25. Click OK.
26. In the Bindings tab, double-click the Value column next to bound to.

27. In the Bound To dialog box that appears, click WebServiceConnector for the Component path, and then click results : Array for the Schema location. This connects the web service data to the DataGrid:

    

    Figure 10. Binding the result set

28. Click OK.
29. From the menu, select Insert > Timeline > Layer.
30. Double click to edit the layer name and change it to trigger.
31. From the Behaviors panel, click the plus sign, and then select Data > Trigger Data Source.

32. Click the wscBikeParts WebServicesConnector. This triggers the WebServiceConnector to go and retrieve data from the web service when the Flash application starts.

    

    Figure 11. Selecting the wscBikeParts WebServiceConnector component to trigger the data source

33. Click OK.
34. Save the document.
35. From the menu, select Control > Test Movie. You should see the DataGrid filled with bike part data.

Page 7 of 8

Previous Page

Next Page