Build a XML PopUp Image Gallery

Build a XML PopUp Image Gallery

In 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.

View DemoDownload Source

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>

13 thoughts on “Build a XML PopUp Image Gallery

  1. Tirath

    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 :-)

  2. Jon

    Hi, does anyone know how they would add an order form to the full size images on this gallery?? Great tutorial though dude =)

  3. Sukanya

    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.

  4. NUGROHO

    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?

  5. atul

    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

  6. kpd

    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

  7. Brad Severance

    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.

  8. Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript « CSS Tips

  9. Pingback: 45+ Advanced Tutorials of Adobe Flash ActionScript | JS Tips

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>