Web DevCenter
oreilly.comSafari Books Online.Conferences.
MySQL Conference and Expo April 14-17, 2008, Santa Clara, CA

Sponsored Developer Resources

Web Columns
Adobe GoLive
Essential JavaScript
Megnut

Web Topics
All Articles
Browsers
ColdFusion
CSS
Database
Flash
Graphics
HTML/XHTML/DHTML
Scripting Languages
Tools
Weblogs

Atom 1.0 Feed RSS 1.0 Feed RSS 2.0 Feed

Learning Lab






Consuming Amazon with Flash Remoting
Pages: 1, 2

Connecting with Flash Remoting

Now it's time to open Flash MX and build the framework for our application. For this application to properly run, you need to install Flash Remoting on your Web server. A 30-day trial version of Flash Remoting is available for download from Macromedia.



In Flash MX, create a new Flash File and open the action's dialog for frame 1. In this frame we will use Flash Remoting to create a connection to Amazon.com's XML Web Service.

#include "NetServices.as"

init( init== null )
{
   var init = true;

   NetServices.setDefaultGatewayURL( 
         "http://localhost/flashremoting/services/gateway.aspx" );
   gatewayConnection = NetServices.createGatewayConnection();

   AmazonWebService = gatewayConnection.getService( 
         "http://soap.amazon.com/schemas/AmazonWebServices.wsdl", this );
}

I've created a code block that initializes my XML Web Service. The first line of the code snippet grabs additional functions and objects included with Flash Remoting from an external action script file. Within the code block we need to define the location of our server using the gateway and instance of the XML Web Service. My application uses the WSDL address we discussed earlier to access Amazon.com's XML Web Service, this allows Flash Remoting to programmatically build a proxy, or interrupter, to our XML Web Service.

This code snippet is for a ASP.Net server; a JRun or Coldfusion server will not require .aspx on the gateway call. Also, ASP.Net requires a physical file in the path; JRun and Coldfusion don't.

Building the Interface

With a connection to our XML Web Service established, let's build a interface to display the output.

Using the text tool, create two text boxes on the main movie clip. Name the first text box txtName and the second txtPrice. Next, create an empty movie clip named mcImage and place it on your main movie clip. Please note that our mcImage movie clip will work as a holder for our product's image. Because the size of the image varies based on the type of product, it's a good idea to add a backdrop for your movie clip. For more information on dynamically loading images view my article on jasonmperry.com.

With our base elements in place you may want to add a little spice to your Amazon.com product spotlight. I've taken the liberty of adding a bright spinning background to draw attention to the spotlighted book and setting my text colors to white.

Manipulating the XML Web Service

Interface in hand, lets focus on filling those text boxes with dynamic content. To do this we need to implement a callback function and object that wraps to our XML Web Service's <message> and <xsd:complexType> definitions.

function AsinSearchRequest_Result( result )
{
   ProductInfo = result;

	//sets the product info for our moviec lip
   txtProductName.text = ProductInfo.Details[ 0 ].ProductName;
   txtProductPrice.text = ProductInfo.Details[ 0 ].OurPrice;
   urlProductLocation = ProductInfo.Details[ 0 ].Url;

	//loads the medium sized image onto the _root.
	//Image holder provides size holder.
   loadMovie( ProductInfo.Details[ 0 ].ImageUrlMedium, _root.mcImage );
}

function AsinSearchRequest_Status( error )
{
   trace( error.code );
   trace( error.description );
   trace( error.details );
}

Callback functions receive response data and errors sent from our XML Web Service proxy. These callbacks wrap to the AsinSearchRequest function defined in the WSDL. The "_Result" function is called with the output of AsinSearchResponse, and "_Status" is called if an error occurs during the call. When implementing a callback function take the name of the method and add both "_Result" and "_Status" to the end. In our "_Result" callback we receive an instance of the ProductInfo type defined in our WSDL. Our code snippet grabs the returned product's name, price, URL, and image from the result.

We also need to use loadMovie to dynamically grab the URL of our product's image and display it in our Flash Application. To provide better positioning of the image you should use load the jpeg into a movie clip.

	//creates a AsinRequest object type wrapper
asinRequest = function(asin, mode)
{
   this.asin = asin;
   this.mode = mode;
   this.tag = "webservices-20"; //tag
   this.token = "???";  //Your unique token
   this.version = "1.0"; //id of this version of Amazon service.  Currently 1.0.
   this.type = "heavy"; //"heavy" or "lite" determines amount of copy returned
}
Object.registerClass( "AsinRequest", asinRequest );

The next step is to create a object wrapper for our parameter type. To do this we can create mirror image of our AsinRequest WSDL complex type as a Flash object. We also need to register the new class as type AsinRequest.

AmazonWebService.AsinSearchRequest( new AsinRequest( "0672320789", "books") );

With our callbacks done and AsinRequest object registered, we can call the AsinSearchRequest method and sent our AsinRequest parameter to the XML Web Service. When Flash Remoting receives data as ether a error message or result it will call the proper callback function.

NOTE: When in debug mode you can view the result data to see the best way to access the data.

In the sample download I've taken the liberty of implementing the remaining callback functions and wrappers. This should give you a good idea of how to implement any object in Flash based on its WSDL counterpart.

Conclusion

Using Flash Remoting to create a dynamic interface to Amazon.com's XML Web Services only brushes on the capabilities of Flash Remoting. The true potential lies in developing Flash interfaces that mimic Windows UI components and are responsive. In the near future, complex applications like credit card accounts will allow you to drag and drop a payment onto the proper icon or display a progress bar as it grabs last month's statement.

The FLA source file built in this tutorial is available for download as FlashAmazonSpotlight.zip. Note the file will not work with out Flash Remoting installed and running on your computer. A 30-day trial version of Flash Remoting is available for download at Macromedia.com.

Jason Michael Perry is a partner in Out the Box Web Productions and the Webmaster for Pan-American Life, an international financial services company. You can contact Jason by visiting Jasonmperry.com.


Return to the Web Development DevCenter.