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.

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>