Building An Image Viewer in Flex



One of my earliest experiments in Flex was to build a simple image viewer. The image viewer would display a series of thumbnails that would give you the full image when it was clicked on.

Building something like this in Flex takes all of two seconds. Here's how. We'll create a sample application called ComCenter.



General Layout

First we start off with an mx:Application tag. This is usually the first tag you use in any Flex application and allows you to set the layout type, the dimensions of your movie, and other application level attributes. See below.


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" paddingLeft="0" paddingRight="0">


Now we'll create a panel component to add components to. Technically, this isn't necessary-you can just add your components after your mx:Application tag. The mx:Application tag acts as a root container for any other controls you wish to add. I like the fact that the panel component gives you a "title bar area" making your application seem like a real application.


<mx:Panel x="0" y="0" width="100%" height="100%" id="CCWindow" title="ComCenter 0.1" horizontalAlign="left"
verticalAlign="top" paddingLeft="0" paddingRight="0">


Most of the properties above are self-explanatory. They define things such as where the panel is located and how big it is; there is a title property that shows up in your panel's title bar area. There is also a property called id. Although we won't utilize it in this example, you can use the id property to reference this element in ActionScript similar to how you reference HTML elements with ids in a web page from JavaScript.

Next we'll create a thumbnail image.


<mx:Image id="Image1" source="@Embed('EX000001.jpg')" width="120" height="90" click="launchViewer(event)" />


Again, this is highly reminiscient of the HTML image tag. The difference here being that instead of using "<img src=" you use "<image source=" The line above also demonstrates one of the ways that you can embed assets in Flex. You can use the "Embed" keyword followed by the resource you are embedding. Setting the width and height attributes of the image performs nearly the same function as the same properties in HTML.

Lastly, you'll see that we create a click event that should be triggered when the image is clicked. In this case we're asking for when the image is clicked to call the launchViewer function and pass the event as a parameter.

Building a Popup Window

At this point we have our general layout setup including an imported image. No matter the size of the image we have it represented as a thumbnail. We'd like a popup window with the full image inside it to appear when the image is clicked. To do this, we'll create an ActionScript function called launchViewer. In Flex, there's a few different ways you can use ActionScript. The one we'll use here is embedding our ActionScript inside an mx:Script tag included inside our mxml file.


public function launchViewer(event:MouseEvent):void
{ /* Function launchViewer */
PopUpManager.createPopUp(this, ViewWindow, false);
} /* Function launchViewer */


The PopUpManager class allows you to create a PopUp window containing another component. It takes as parameters the parent of the popup window (in this case, our ComCenter application itself), a component to display in the popup and whether the popup is modal or not. We need to create a separate mxml file called "ViewWindow" as noted above.

The ViewWindow.mxml file uses a TitleWindow component. This is similar to the Panel component in that it has a title bar, but it also allows you to create a close button. See the code below:


<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" showCloseButton="true"
close="PopUpManager.removePopUp(this)" width="640" height="480" title="View Image">


This is pretty straightforward-we tell the Title Window show its close button, and the close attribute says what to do when that close button is clicked. In this case, it asks the PopUpManager to remove itself. There is one other item here-a creationComplete attribute that calls an init function. After the TitleWindow has been created, this function has called. We'll use the init function to center the popup window. Again, we include this inside a mx:Script tag.


private function init():void
{
PopUpManager.centerPopUp(this);
}


The one thing we're missing is the actual image. We can do this by using the same mx:Image tag from our ComCenter.mxml file and leaving out the width and height attributes. We also leave out the click event code. That's all there is to it.

Creating an About Screen

The one last thing we'll do is create an "About" screen. No application should be without one! :-)

In most applications the "About" screen is triggered from a choice under a 'Help' menu so we'll build that first.

In Flex, there are a few ways to create menus. We'll start off by creating a menubar by using the mx:MenuBar tag.


<mx:MenuBar top="0" width="100%" id="CCMenuBar" labelField="@label" color="#400040" itemClick="menuProcessor(event)">


Although some of these properties are obvious as to what they do, others are not. The itemClick event handler is called when any menu item on this menubar is clicked. The labelField property will take a little more explaining.

Oddly, there is no menuitem control, and while there is a menu control in Flex, it doesn't have an equivalent menu mxml tag (although it can be instantiated through ActionScript). Then how do we define our menus? By using a dataprovider.

A dataprovider is a simple way of providing data to a control. A number of controls such as trees, combo boxes and menus require dataproviders to function. The data for a dataprovider can usually be provided in different formats such as XML or in an array.


<mx:XML>
<menuitem label="Help">
<menuitem label="About ComCenter" />
</menuitem>
</mx:XML>


The labelfield field of the mx:MenuBar tag mentioned above, specifies (in this case) the name of the field in the XML that contains the actual menu text that is displayed (in this case 'label').

When any of the menu items are clicked, you'll see a function called menuProcessor is called. This function just launches a popup window using code that is almost identical to the launchViewer function. Instead of calling ViewWindow.mxml, instead we create a separate mxml file that displays the 'About' imagery. This 'AboutWindow.mxml' file recycles most of the code we developed for the view window.

Click here to see the code in action.

The completed code is below. This covers an extremely primitive image viewer. This can be spruced up in a number of places, which I'll start talking about next time.

ComCenter.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="600" paddingLeft="0" paddingRight="0">
<mx:Script>
<![CDATA[
import flash.events.MouseEvent;
import mx.events.MenuEvent;
import mx.managers.PopUpManager;

public function launchViewer(event:MouseEvent):void
{ /* Function launchViewer */
PopUpManager.createPopUp(this, ViewWindow, false);
} /* Function launchViewer */

public function menuProcessor(event:MenuEvent):void
{ /* Function menuProcessor */
PopUpManager.createPopUp(this, AboutWindow, false);
} /* Function menuProcessor */
]]>
</mx:Script>
<mx:Panel x="0" y="0" width="100%" height="100%" id="CCWindow" title="ComCenter 0.1" horizontalAlign="left"
verticalAlign="top" paddingLeft="0" paddingRight="0">
<mx:MenuBar top="0" width="100%" id="CCMenuBar" labelField="@label" color="#400040" itemClick="menuProcessor(event)">
<mx:XML>
<menuitem label="Help">
<menuitem label="About ComCenter" />
</menuitem>
</mx:XML>
</mx:MenuBar>
<mx:Image id="Image1" source="@Embed('EX000001.jpg')" width="120" height="90" click="launchViewer(event)" />
</mx:Panel>
</mx:Application>


ViewWindow.mxml

<?xml version="1.0"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" showCloseButton="true"
close="PopUpManager.removePopUp(this)" width="640" height="480" title="View Image">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function init():void
{
PopUpManager.centerPopUp(this);
}
]]>
</mx:Script>
<mx:VBox width="100%" verticalCenter="0">
<mx:Image id="NHLogo" source="@Embed('EX000001.jpg')"/>
</mx:VBox>
</mx:TitleWindow>


AboutWindow.mxml

<?xml version="1.0"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()" showCloseButton="true"
close="PopUpManager.removePopUp(this)" width="400" height="300" title="About ComCenter">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function init():void
{ /* Function init */
PopUpManager.centerPopUp(this);
} /* Function init */
]]>
</mx:Script>
<mx:VBox width="100%" verticalCenter="0">
<mx:HBox width="100%">
<mx:Image id="CCLogo" source="@Embed('camera.jpg')"/>
<mx:Label text="ComCenter 0.1" fontSize="18" color="#0000FF" fontWeight="bold" verticalCenter="0" />
</mx:HBox>
<mx:Label text="Copyright 2006." textAlign="center" width="100%" fontWeight="bold" />
</mx:VBox>
</mx:TitleWindow>


1 comment :

Unknown said...

Hi,

Thanks for your coding,but i want to set a resolution for a application can u give any idea for this..

THANKS

k.sURESH