The SQPhoto App: Caching Your Photos with Flex and PHP

by Pete Mackie

This article is a companion piece to Peter Mackie's "The SQPhoto App: Rendering Photos Dynamically with Flex and PHP", which was published in Flex Authority Vol. 2 Issue 1.

In "The SQPhoto App: Rendering Photos Dynamically with Flex and PHP", we explore the techniques used to render and cache photos with PHP and Flex in the SQPhoto application. In this companion piece, we will discuss part of the SQPhoto Flex client, its photo-caching code, which is simple in concept but elegant in execution. For a complete view of all the ActionScript code involved in the photo caching, download and install the SQPhoto Flex client Flex Builder project at http://www.flex-authority.com/issues/integrating-flex/code/.

When requested by the user, the WebORB for PHP application server returns an array of up to eight photos with each array element containing an object of type SQPhoto. The Flex application recognizes the object structure and maps the received object as an SQPhoto object.



Listing 1: The SQPhoto Class

package com.weborb.objmaps {

import flash.display.Loader;

import flash.utils.ByteArray;

[Bindable]

[RemoteClass(alias= "SQPhotos.SQPhoto")]

public class SQPhoto {

public var photoLoader:Loader;

public var photoBA:ByteArray; // One photo for display, which is....

public var photoFilename:String; // followed by all the photo's metadata......

public var photoSize:uint;

public var photoWidth:uint;

public var photoHeight:uint;

public var photoFormat:String;

public var keywords:String;

public var caption:String;

public function SQPhoto() {}

}

}

For more about how RemoteObject mapping binds the server to client object structures, see my insideRIA article, "AMF3 PHP Server Objects to Flex Client Object Relational Mapping".

You learned earlier that the Photo data is returned to the SQPhoto Flex client as ActionScript 3 (AS3) ByteArray object data.For these received photos to render and display, we must instantiate an AS3 Loader class and then load photo ByteArray data with a Loader.loadbytes() method call, one for each remotely received photos.

Why provide photo cache management? And how did I solve the issue? Each of the respective loadbytes() method calls must complete before we can update the photo display. So, when all the photos have loaded, we call the PhotoCoverFlowRO object, photoDisplay.dataProvider method call, which will display a new carousel of photos.

You might think that we could just monitor completion of the last loadbytes()object method call and assume that everything has loaded when it finishes. Sorry, that’s not how loadbytes()works. Completion order is totally unpredictable. The first loadbytes()call might take until the sixth photo loader to complete.

My solution provides a class that keeps track of all the photo loaders and calls a custom event when they complete, allowing the new array of photos to render.

Let's take a walk through some of the code involved. During the client creationComplete phase (see Listing 2 below), we establish a custom event handler by instantiating the client’s LoaderMonitor object. We add an event listener to the LoaderMonitor object pointing to the photoLoadComplete() method.



Listing 2: LoaderMonitor Class

public class LoaderMonitor extends EventDispatcher {

public static const PHOTO_LOAD_COMPLETE:String = "photosLoaded";

public function photoLoadComplete():void {

dispatchEvent(new Event(LoaderMonitor.PHOTO_LOAD_COMPLETE));

}

}

When an array of SQPhoto objects arrives via a serialized RemoteObject from the WebORB application server, we instantiate an array of PhotoLoader objects — one for each received SQPhoto object (see Listing 3 below). We instantiate a Loader object property within each PhotoLoader object during its instantiation. We also set the Loader object's event complete listener to point to the loadCompleteHandler() method.



Listing 3: PhotoLoader class

public class PhotoLoader extends Sprite {

private var _loader:Loader;

static private var _loadCount:int;

static private var _loaderMonitor:LoaderMonitor;

// Load photos from ByteArray, URLRequest, or String => URLRequest, and

// no action for anything else passed in.

public function PhotoLoader() {

_loader = new Loader();

_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadCompleteHandler);

_loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadIOErrorHandler);

_loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR,

loadSecurityErrorHandler);

}

static public function set loadCount(value:int):void {

_loadCount = value;

}

}

Now we set the static _loadCount property to the number of received SQPhoto objects, and we set the static _loaderMonitor property to point to the LoaderMonitor object custom event handler. Because these two properties are static, all PhotoLoader objects (one for each received SQPhoto object) are assigned the same values.

We step through the array of received objects setting each object's Loader object property to point to one of the PhotoLoader objects. During this process, we call the loadPhoto() method passing in each respective object's ByteArray data. The loadPhoto() method calls its loadBytes property to start loading photo data.

As each PhotoLoader object loads, it calls its loadCompleteHandler() method, decrementing the static _loadCount value. When the _loadCount value reaches zero, then all the photos have loaded. We call our photoLoadComplete() method, which in turn calls the SQPhoto Flex client's LoaderMonitor() method.

The LoaderMonitor() custom event handler calls the SQPhoto Flex client's photoLoadComplete() method. The photoLoadComplete() method updates photoDisplay.dataProvider with the new photo data, which is bound to our CoverFlow photo rendering display.



Listing 4: PhotoLoader class, loadPhoto method

public function loadPhoto(photo:*):Loader {

if (photo is ByteArray)

_loader.loadBytes(photo);

else

_loader.load((photo is URLRequest)? photo : new URLRequest(photo));

return _loader;

}



Listing 5: PhotoLoader class, loadCompleteHandler method

private function loadCompleteHandler(e:Event):void {

If (--_loadCount == 0)

_LoaderMonitor.photoLoadComplete ();

}



Listing 6: SQPhoto’s Application object, photoLoad complete method

// Photo load complete per 'LoaderMonitor.PHOTO_LOAD_COMPLETE' custom event handler call

private function photoLoadComplete (e:Event):void {

var sqPhotoAC:ArrayCollection;

sqPhotoAC = new Array Collection(sqPhotoArray);

sqPhotoArray = null;

photoDisplay.dataProvider = sqPhotoAC;

}

Pete Mackie has long been a software developer and publisher. He first worked for nearly twenty years with a large corporation. About thirty years ago, he founded his own company, Seaquest Software, which is still going strong. His recent development efforts include work as a volunteer code committer for the Eclipse IDE and work on PHP-based RIA web sites for small start-up companies. Pete stumbled upon Adobe's booth while attending EclipseCon 2006. Wondering what Adobe was doing at an open source conference, he stopped at the booth and discovered Flex Builder running on the Eclipse IDE. Pete instantly recognized what Flex could do for RIA client/server applications. Rushing home, he installed the Flex Builder 2 beta and has been hooked on Flex software development ever since.

To get away from the computer keyboard and screen, he spends time hiking in the US Pacific Northwest wilderness or beachcombing along the sandy beaches where Oregon meets the Pacific Ocean. And he also does a bit of exercising effort on his Wii Fit.