Subscribe By RSS | Email

Flex | Flash | Air | AS3
Tutorials, Resources,
Tips & Tricks

Build a simple XML image gallery

April 12th, 2009 in Flex

The following tutorial shows how to build a driven xml photos gallery in Flex that uses the HorizontalList and Image controls.

The gallery showcases the last 12 movies that have won best motion picture at the academy awards.

1. Create a new flex project named Gallery, leave the name of the main MXML application file Gallery.mxml and set the layout to vertical.

2. All of the information about the photos displayed in the gallery are stored in an XML file. To do it, we create an xml file that follows this structure :

<?xml version="1.0"?>
<gallery>
    <movie>
    	<pic>titanic.jpg</pic>
    	<title>Titanic</title>
    	<date>1997</date>
    </movie>
    <movie>
    	<pic>shakespeareinlove.jpg</pic>
    	<title>Shakespeare in Love</title>
    	<date>1998</date>
    </movie>
    <movie>
    	<pic>americanbeauty.jpg</pic>
    	<title>American Beauty</title>
    	<date>1999</date>
    </movie>
    <movie>
    	<pic>gladiator.jpg</pic>
    	<title>Gladiator</title>
    	<date>2000</date>
    </movie>
    <movie>
    	<pic>beautifulmind.jpg</pic>
    	<title>A Beautiful Mind</title>
    	<date>2001</date>
    </movie>
    <movie>
    	<pic>chicago.jpg</pic>
    	<title>Chicago</title>
    	<date>2002</date>
    </movie>
    <movie>
    	<pic>lordoftherings.jpg</pic>
    	<title>The Lord of the Rings: The Return of the King</title>
    	<date>2003</date>
    </movie>
    <movie>
    	<pic>milliondollarbaby.jpg</pic>
    	<title>Million Dollar Baby</title>
    	<date>2004</date>
    </movie>
    <movie>
    	<pic>crash.jpg</pic>
    	<title>Crash</title>
    	<date>2005</date>
    </movie>
    <movie>
    	<pic>thedeparted.jpg</pic>
    	<title>The Departed</title>
    	<date>2006</date>
    </movie>
    <movie>
    	<pic>nocountryforoldmen.jpg</pic>
    	<title>No Country for Old Men</title>
    	<date>2007</date>
    </movie>
    <movie>
    	<pic>slumdogmillionaire.jpg</pic>
    	<title>Slumdog Millionaire</title>
    	<date>2008</date>
    </movie>
</gallery>

Save the file as data.xml in the src directory.

3. Also we need to create a folder named assets to store the pictures. Inside it, we create two subfolders, “thumb” and “poster” and place the pictures which names are given in the xml file .
Your project should be arranged like this way :

4.To load the datas from the xml we use the HTTPService component :

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

Next we declare a variable named movies as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml.
We can now write the serviceHandler function :

[Bindable]
private var photos:ArrayCollection;

private function serviceHandler(event:ResultEvent):void{
	photos = event.result.gallery.movie;
}

In order to finish this process of loading the xml, we call the send method of the HTTPService when the creationComplete event of the application occurred.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
     backgroundGradientAlphas="[1.0, 1.0]"
     backgroundGradientColors="[#1A9B35, #FFFFFF]" horizontalAlign="center"
     creationComplete="service.send()">

4. To display the thumbnails we use the HorizontalList component and set its dataProvider to the variable movies. Inside, we add an inline item renderer to render the thumbnail and its date.

<mx:HorizontalList id="moviesList" dataProvider="{movies}"
	rowHeight="160" columnWidth="180" columnCount="4">
	<mx:itemRenderer>
		<mx:Component>
			<mx:VBox horizontalAlign="center" verticalAlign="middle">
				<mx:Image source="assets/thumb/{data.pic}"/>
				<mx:Label text="{data.date}" color="#000000" fontStyle="italic"  />
			</mx:VBox>
		</mx:Component>
	</mx:itemRenderer>
<mx:HorizontalList>

Beneath the thumbnails list we add an Image component that will display the large poster of the movie selected and a label to display its title along with its date. We use bindings to the HorizontalList control’s selectedItem property .

<mx:Image source="assets/poster/{moviesList.selectedItem.pic}" showBusyCursor="true"/>
<mx:Label text="{moviesList.selectedItem.title} ({moviesList.selectedItem.date})"
	fontFamily="Arial" fontSize="12" fontWeight="bold" color="#FFFFFF"/>

5. Finally we add inside a style tag some css to custom the appearance of the HorizontalList :

<mx:Style>
HorizontalList{
   selectionColor:  #717070;
   rollOverColor: #cccccc;
}
</mx:Style>

6. And here is the final code that you need to run to see it in action :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
        backgroundGradientAlphas="[1.0, 1.0]"
	backgroundGradientColors="[#717070, #000000]" horizontalAlign="center"
	creationComplete="service.send()">

	<mx:Style>
		HorizontalList{
			 selectionColor:  #717070;
			 rollOverColor: #cccccc;
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;

			[Bindable]
			private var movies:ArrayCollection;

			private function serviceHandler(event:ResultEvent):void{
				movies = event.result.gallery.movie;
			}

		]]>
	</mx:Script>

   <mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>
	<mx:HorizontalList id="moviesList" dataProvider="{movies}"
		rowHeight="160" columnWidth="180" columnCount="4">
		<mx:itemRenderer>
			<mx:Component>
				<mx:VBox horizontalAlign="center" verticalAlign="middle">
					<mx:Image source="assets/thumb/{data.pic}"/>
					<mx:Label text="{data.date}" color="#000000" fontStyle="italic"  />
				</mx:VBox>
			</mx:Component>
		</mx:itemRenderer>
	</mx:HorizontalList>

	<mx:Image source="assets/poster/{moviesList.selectedItem.pic}"
		showBusyCursor="true"/>
	<mx:Label text="{moviesList.selectedItem.title} ({moviesList.selectedItem.date})"
		fontFamily="Arial" fontSize="12" fontWeight="bold" color="#FFFFFF"/>

</mx:Application>

Terms of Use

The source codes downloaded from RiaCodes can be used for you own projects, commercial or non-commercial, without any attribution.

All files downloaded from RiaCodes may not be used for resale or redistribution.

You may not reproduce or publish in full or large part, the tutorials on this site, without written permission from RiaCodes.

ABOUT

RiaCodes is a site dedicated to web developers and designers providing tutorials and resources on Flash, Flex and Air technologies.

Our site is here to help you to build compelling, engaging and rich applications both for the web and for the desktop.

Now it's time to get your users a better and richer experience!