Build a XML Image Viewer with Flex

The following tutorial shows how to build a driven xml image viewer in Flex which allows the user to navigate through the images using previous and next buttons.

View DemoDownload Source

1. Create a new flex project named Image-viewer, set the name of the main MXML application file to main.mxml and set its layout to vertical.

2. All the datas about the images are stored in a XML file. Create an xml file that follows this structure and save it as data.xml :

<?xml version="1.0"?>
<gallery>
    <img>
    	<file>1.jpg</file>
    	<title>Warhol & Basquiat</title>
    </img>
    <img>
    	<file>2.jpg</file>
    	<title>Beethoven Yellow Book</title>
    </img>
    <img>
    	<file>3.jpg</file>
    	<title>Marilyn Monroe</title>
    </img>
    <img>
    	<file>4.jpg</file>
    	<title>Zebra</title>
    </img>
    <img>
    	<file>5.jpg</file>
    	<title>Campbell's Soup I</title>
    </img>
</gallery>

3. Create a folder named assets. Inside it, create a subfolder named “images” and put in the images which filenames are given in the xml file .

4. Open the main application to start adding the code.
To load the datas from the xml, use the HTTPService component :

<mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>

Next open a Script section and declare a variable named images as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml.
Then write the serviceHandler function :

	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var images:ArrayCollection;
			
			private function serviceHandler(event:ResultEvent):void{
				images = event.result.gallery.img;
			}
			
			
		]]>
	</mx:Script>

In order to finish this process of loading the xml, call the send method of the HTTPService:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	creationComplete="service.send()">

5. Declare a currentIndex variable that will keep track of the index of the image currently on display and set its value to zero.

 
[Bindable]
private var currentIndex : Number = 0

6. Now let’s add the elements, a Text component to display the title, an Image component and two buttons.
We bind the text property of the Text component with the title of the current image by using our currentIndex variable. And we do the same with the source property of the Image.

 <mx:VBox horizontalAlign="center" width="300" height="400">
			<mx:Text text="{images.getItemAt(currentIndex).title}"/>
			<mx:Image source="assets/images/{images.getItemAt(currentIndex).file}"
				showBusyCursor="true"/>
	</mx:VBox>
	
	<mx:HBox>
			<mx:Button click="previousImage(event)" buttonMode="true"/>
			<mx:Button click="nextImage(event)" buttonMode="true"/>
	</mx:HBox>

7. Now let’s write the previousImage and nextImage functions that will change the index of the image to be displayed.

private function nextImage(e:MouseEvent):void{
	if (currentIndex < images.length - 1){
        currentIndex++;
    }
    else {
        currentIndex = 0;
    }
}

private function previousImage(e:MouseEvent):void{
	if (currentIndex != 0){
		currentIndex--;
    }
    else {
        currentIndex = images.length - 1;
    }
}

8. Finally create a css file and save it as style.css in the src directory. For the next and previous buttons, we place their 3 different states images inside a folder “style” inside the “assets’ folder.

Application {
   backgroundColor: #000000;
}

.previousBtn{
    upSkin:Embed("/assets/style/left_up.png");
    overSkin:Embed("/assets/style/left_over.png");
    downSkin:Embed("/assets/style/left_down.png");
}

.nextBtn{
    upSkin:Embed("/assets/style/right_up.png");
    overSkin:Embed("/assets/style/right_over.png");
    downSkin:Embed("/assets/style/right_down.png");
}

.title{
   color: #ffffff;
   fontFamily: Times New Roman;
   fontSize: 16;
   fontWeight: bold;
   fontStyle: italic;
}

Apply the style to the components :

<mx:Text text="{images.getItemAt(currentIndex).title}" styleName="title"/>
    ...
<mx:Button click="previousImage(event)" buttonMode="true" styleName="previousBtn" />
<mx:Button click="nextImage(event)" buttonMode="true" styleName="nextBtn" />

9. Here’s the final code. Run the application to test it.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" 
	creationComplete="service.send()">
	
	<mx:Style source="style.css"/>
	
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var images:ArrayCollection;
			
			[Bindable]
			private var currentIndex : Number = 0;
			
			private function serviceHandler(event:ResultEvent):void{
				images = event.result.gallery.img;
			}
			
			private function nextImage(e:MouseEvent):void{
				if (currentIndex < images.length - 1){
                    currentIndex++;
                }
                else {
                    currentIndex = 0;
                }

			}

			private function previousImage(e:MouseEvent):void{
				if (currentIndex != 0){
					currentIndex--;
                }
                else {
                    currentIndex = images.length - 1;
                }
           	}
			
		]]>
	</mx:Script>

	<mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>
	
	<mx:VBox horizontalAlign="center" width="300" height="400">
			<mx:Text text="{images.getItemAt(currentIndex).title}" styleName="title"/>
			<mx:Image source="assets/images/{images.getItemAt(currentIndex).file}"
				showBusyCursor="true"/>
	</mx:VBox>
	
	<mx:HBox>
			<mx:Button click="previousImage(event)" buttonMode="true" styleName="previousBtn"/>
			<mx:Button click="nextImage(event)" buttonMode="true" styleName="nextBtn"/>
	</mx:HBox>

</mx:Application>

8 thoughts on “Build a XML Image Viewer with Flex

  1. Olga

    Hello,
    I’ve got a problem: I did everything was described in the article, but my images doesn’t apper. Can you help me ,plz.

  2. Ryan

    It seems as if your buttons are only changing the current index. I believe you will need to add some code to request the new image based upon that index. I dont know much flex but hopefully that helps?

  3. spes

    Everything works properly, you just need to add a new path to your images folder (Project->Properties->Flex Build Path) or place assets/images/ into project src folder.

Leave a Reply

Your email address will not be published. Required fields are marked *