Build a XML PopUp Image Gallery
October 15th, 2009 in Flex | 11 CommentsIn the following Flex tutorial, we are going to create an xml driven popup image gallery that when we click on a thumbnail it will open a bigger version of the image in a popup window.
1. Create a new flex project named GalleryPopUp, set the name of the main MXML application file to Main.mxml and set its layout to vertical. Set its horizontalAlign property to “center” and its verticalAlign property to “middle”.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
horizontalAlign="center" verticalAlign="middle" >
2. All of the informations about the images showcased in the gallery are stored in an XML file. Create an xml file that follows this structure and save it as data.xml in the src directory :
<?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>slumdogmillionaire.jpg</pic>
<title>Slumdog Millionaire</title>
<date>2008</date>
</movie>
</gallery>
3. Next, create an assets folder, and inside it create a “thumbs” folder where you store your thumbnail image files with names matching the xml file, and create a “posters” folder to put the big images.
4. To load the datas from the xml use the HTTPService component :
<mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>
5. Next create a Script section. Declare a variable named movies as an arraycollection and defined as bindable. This variable will hold the datas retrieved from the xml in the serviceHandler function :
<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>
6. In order to finish this process of loading the xml datas, call the send method of the HTTPService :
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
horizontalAlign="center" verticalAlign="middle"
creationComplete="service.send()" >
7. To display the thumbnails use the TileList component and bind its dataProvider with the movies variable.
Inside, add an inline itemRenderer to display the movie’s thumbnail picture and the movie’s date.
<mx:TileList id="moviesList" dataProvider="{movies}"
direction="horizontal"
width="800" height="450" rowHeight="150" columnWidth="200">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center" verticalAlign="middle">
<mx:Image source="assets/thumbs/{data.pic}"/>
<mx:Label text="{data.date}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
8. Create a new MXML Component named Window, based on the TitleWindow component. This component will display the movies’s big poster image and its title.
Add an image component and bind its source with a sourceImage String variable declared as public. Create a closeWindow function that will handle the close event.
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="400" height="520"
horizontalAlign="center"
showCloseButton="true"
close="closeWindow(event);" >
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
public var sourceImage:String;
private function closeWindow(e:CloseEvent):void {
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Image source="{sourceImage}"/>
</mx:TitleWindow>
9. Also to make the popup window more handy, we want to be able to close it just by clicking on it. To do so, we need to dispatch a CloseEvent for the click event listener.
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="400" height="520" horizontalAlign="center" showCloseButton="true" close="closeWindow(event);" click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">
10. We have finished with this component, return to the Main.mxml file
Add a click event listener to the TileList component that will be handled by the launchPopUp function.
<mx:TileList id="moviesList" dataProvider="{movies}"
direction="horizontal"
width="800" height="450" rowHeight="150" columnWidth="200"
click="launchPopUp(event)">
In the launchPopUp function, create a new Window component and set its title and sourceImage properties to the values of the movie that has been clicked. Use the PopUpManager class to display the window.
private function launchPopUp(e:MouseEvent):void {
if(moviesList.selectedItem){
var win : Window = new Window();
win.sourceImage = "assets/posters/"+moviesList.selectedItem.pic;
win.title = moviesList.selectedItem.title;
PopUpManager.addPopUp(win,this,true);
PopUpManager.centerPopUp(win);
}
}
11. Finally as usual, we add a Style section to custom the appearance of the whole application :
<mx:Style>
global{
modalTransparency : .8;
modalTransparencyColor : #000000;
}
Application{
backgroundGradientColors: #ffffff, #ffffff;
backgroundGradientAlphas: 1, 1;
}
TileList{
selectionColor: #717070;
rollOverColor: #CCCCCC;
borderStyle : none;
}
TitleWindow{
borderColor : #C1C1C1;
borderAlpha : .8;
fontSize : 14;
fontFamily :Georgia;
fontWeight : bold ;
color : #FFFFFF;
}
Label{
color : #000000;
fontStyle : italic;
}
</mx:Style>
12. Here’s the final code, run the application to see it in action.
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
horizontalAlign="center" verticalAlign="middle"
creationComplete="service.send()" >
<mx:Style>
global{
modalTransparency : .8;
modalTransparencyColor : #000000;
}
Application{
backgroundGradientColors: #ffffff, #ffffff;
backgroundGradientAlphas: 1, 1;
}
TileList{
selectionColor: #717070;
rollOverColor: #CCCCCC;
borderStyle : none;
}
TitleWindow{
borderColor : #C1C1C1;
borderAlpha : .8;
fontSize : 14;
fontFamily :Georgia;
fontWeight : bold ;
color : #FFFFFF;
}
Label{
color : #000000;
fontStyle : italic;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
import mx.managers.PopUpManager;
[Bindable]
private var movies:ArrayCollection;
private function serviceHandler(event:ResultEvent):void{
movies = event.result.gallery.movie;
}
private function launchPopUp(e:MouseEvent):void {
if(moviesList.selectedItem){
var win : Window = new Window();
win.sourceImage = "assets/posters/"+moviesList.selectedItem.pic;
win.title = moviesList.selectedItem.title;
PopUpManager.addPopUp(win,this,true);
PopUpManager.centerPopUp(win);
}
}
]]>
</mx:Script>
<mx:HTTPService id="service" url="data.xml" result="serviceHandler(event)"/>
<mx:TileList id="moviesList" dataProvider="{movies}"
direction="horizontal"
width="800" height="450" rowHeight="150" columnWidth="200"
click="launchPopUp(event)">
<mx:itemRenderer>
<mx:Component>
<mx:VBox horizontalAlign="center" verticalAlign="middle">
<mx:Image source="assets/thumbs/{data.pic}"/>
<mx:Label text="{data.date}" />
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
</mx:Application>
Window.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical" width="400" height="520"
horizontalAlign="center"
showCloseButton="true"
close="closeWindow(event);"
click="dispatchEvent(new CloseEvent(CloseEvent.CLOSE));">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
[Bindable]
public var sourceImage:String;
private function closeWindow(e:CloseEvent):void {
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
<mx:Image source="{sourceImage}"/>
</mx:TitleWindow>
Oct 16th, 2009
Tutorial added to thewebtuts.com
Oct 17th, 2009
Awesome tutorial
Thanks so much for posting always valuable tuts for us
Your all tutorials are amazing
Keep up good work man
God Bless you
Nov 27th, 2009
thx for sharing! tutorial 10+
Jan 6th, 2010
Hi, does anyone know how they would add an order form to the full size images on this gallery?? Great tutorial though dude =)
Mar 1st, 2010
thanks for providing it
Mar 3rd, 2010
Hi,I am a beginner in Flex and this tutorial was very helpful 4 me…..can u give an example to build a flow chart from reading an XML file using flex? Thank u in advance.
Mar 5th, 2010
Thanks, a great tutorial. this surely helps me lot in learning flex.
btw can the popup window be use to play a video file instead of displaying a bigger image?
Oct 17th, 2010
When i am using httpService in TitleWindow that i am not able to see the thing .thay give some security error.
please reply me soon
thanks
atul
Apr 2nd, 2011
I am unable to see the image
Jun 16th, 2011
I want to convert swf to fla with actionscript is it possible? or is there any solution to write or add actionscript to my fla
Jun 17th, 2011
Great Tutorial! I used it for a project I’m working on.
I wanted to mention that the TileList that I used in my project vertically scrolls. I found that using the click event on the tile list for dispatching the pop-up window caused the window to appear if an item is selected, even if the user just clicks on the scrollbar.
I found a way around that by using “itemclick” and using that as to dispatch the event. The only thing is that I needed to change the event handler incoming var from MouseEvent to Event.