Building An Image Viewer in Flex: Part 2

The last time, we saw how to build a very simple image viewer in Flex. But the code we developed(outside of the 'About' window) was the bare minimum to get something like this working. In this article we'll flush it out a bit more and walk through some of the code in ComCenter 0.2.

First of all, the code that was developed wasn't that flexible. Images were actually embedded in the swf. This was useful for demonstrating embedded assets, but somewhat impractical otherwise. What we want to do is load the images at runtime. We can do that simply by removing the Embed keyword from the image source attribute.

That's a good first step-but we're going to make things a little more flexible by dynamically adding the images to the layout.

We'll adjust the layout by adding an HBox (horizontal box) underneath the menubar and removing the existing image tags.


<mx:HBox id="ImageBox" />


Next, we'll create an ActionScript representation of our image. For convenience sake, we'll subclass the Flex Image class and add a couple of new fields, DateTaken and DateEntered.


package ComCenter
{ /* Package ComCenter */
public class CCImage extends Image
{ /* Class CCImage */
private var DateEntered:Date;
private var DateTaken:Date;
private var ImageId:int;
public var Path:String;

public function CCImage(id:int, Path:String, DateTaken:String, DateEntered:String)
{ /* Constructor CCImage */
super();
this.ImageId = id;
this.Path = Path;
width = 120;
height = 90;
load(Path);
} /* Constructor CCImage */
} /* Class CCImage */
} /* Package ComCenter */


The CCImage object takes four parameters-a unique identifier for this image, the path to the image, the date the image was taken, and the date the image was entered into the system. You'll see the CCImage constructor sets the width and height of the thumbnail like we would have if we were still using the mx:Image tag and calls load() to load the image.

But what about the dates? They are being passed in as strings and we need to parse those strings up into date objects. You can add the following code to the constructor to handle that:

this.DateTaken = new Date();
this.DateTaken.setTime(Date.parse(DateTaken));
this.DateEntered = new Date();
this.DateEntered.setTime(Date.parse(DateEntered));


The one item we're missing here is the click on the image itself. We need to have a click on this image call the launchViewer function we still have in ComCenter.mxml.


addEventListener(MouseEvent.CLICK, Application.application.launchViewer);


The 'application' property of the Application in Flex is always a reference to the top level application (I like to think of this as sort of like _root).

How do we instantiate our CCImage objects? We'll add a creationComplete event handler to ComCenter.mxml(in this case a function called 'init()'. See below.)


public function init():void
{ /* Function init */
var TempImage:CCImage;

TempImage = new CCImage(1, "EX000001.jpg", "9/19/1999", "11/25/2006");
ImageBox.addChild(TempImage);
TempImage = new CCImage(2, "EX000002.jpg", "9/19/1999", "11/25/2006");
ImageBox.addChild(TempImage);
} /* Function init */


We instantiate each CCImage and since we subclassed the Flex image class, we can add each of these objects to the display list by calling addChild on the HBox we defined as "ImageBox" earlier.

Of course, we'll need to make a few changes to the launchViewer function so it can handle any image that happens to call it with a click event.


public function launchViewer(event:MouseEvent):void
{ /* Function launchViewer */
var EventImage:CCImage;
var Viewer:ViewWindow;

EventImage = CCImage(event.currentTarget);
Viewer = ViewWindow(PopUpManager.createPopUp(this, ViewWindow, false));
Viewer.setImage(EventImage.Path);
} /* Function launchViewer */


You'll see above that we cast the event currentTarget property to type CCImage. We can then call a function inside the view window to set the path of the image represented by this thumbnail. The setImage() function basically does a similar job as our init() function. It creates an image dynamically and adds it to a container-except this time, we're doing it inside the view window.

That about wraps it up-to see a demo of this viewer, see here. For the full code, check http://ComCenter.riaforge.org