12.9 Implementing Caching

Caching involves maintaining a piece of information in a store or cache to improve performance of an application. In Flash Remoting, you can create objects to hold the contents of a remote service call. This can be handy in many situations:

• An email program that retrieves email messages from a remote server, allowing you to read the messages by choosing a message header in a list. Upon moving to another message, the current message could be cached, so that if you were to return to that message, it would not have to be retrieved from the server again.

• A product listing that has master/detail pages of a product list. As you choose a product, the details page retrieves the product details from the remote server. Upon choosing another product, the current product is placed into a cache for easy access when the user returns to that product.

• A book review application, where a book review is retrieved from a remote service. As the user chooses another book, the current review is stored in a cache, in case the user returns to it. Each subsequent viewing of the book review comes from the cache rather than the remote service.

A cache is typically implemented as an object or an array of objects. Each object represents one item from the remote service. All items are not retrieved, but the cache is indexed in a way that each item that is placed in the cache can be easily retrieved, as in the following code snippet:

// Set up the custom object that holds the product information
MyCustomObject = function (productid, productname, productdesc) {
  this.ProductID = productid;
  this.ProductName = productname;
  this.ProductDesc = productdesc;
};

// Create the cache
var myCache = new Object( );

// Set the first element of the cache as a new object with descriptive fields
// This can be displayed in the UI if there is no current product
myCache["0"] = new MyCustomObject(
            0,                   // ProductID
            "Product Name...",   // ProductName
            "Description...");   // ProductDesc

// findItem:  method for the cache array to find an
//            item with a ProductID that matches the specified item
function findItem (theArray, theItem) {
  for (i in theArray) {
    if (theArray[i].ProductID == theItem) {
     return true;
    }
  }
  return false;
}

// Change handler on a Tree component: user clicks an item, and the
//  corresponding detail page is populated
my_tree.setChangeHandler("displayProduct", _root);
displayProduct = function (tree) {
  var theNode = tree.getSelectedNode( );
  var theProductId = theNode.data;
  if (findItem(myCache, theProductId)) {
      displayCacheItem(theProductId);
  } else {
      putProductInCacheAndDisplayIt(theProductId);
  }
};

The complete functionality of the preceding example is not implemented here, but similar functionality can be found in the application built in Chapter 14. When a user clicks an item in the Tree component, the displayProduct( ) function fires off. We use a helper function, findItem( ), to pick the item out of the cache if the item exists. If so, the displayCacheItem( ) function displays the item directly from the cache, rather than going to the remote service. If the item is not found, another function is called (putProductInCacheAndDisplayIt( )), which puts the current item into the cache before displaying it.