Build a XML Driven Accordion Image Gallery

The following Flex tutorial will show you how to build an accordion image gallery populated using XML datas.

View DemoDownload Source

The photos showcased in our gallery are part of “35 (Really) Stunning Photos and Pictures” Smashing magazine list.

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

2. All of the informations about the images showcased in the accordion gallery are stored in an XML file. Create an xml file that match the following structure and save it as datas.xml in the src directory :

<?xml version="1.0"?>
<gallery>
	<photo>
		<title>Photo by Simon Shareef</title>
		<file>1.jpg</file>
	</photo>
	<photo>
		<title>Photo by In Cherl Kim</title>
		<file>2.jpg</file>
	</photo>
	<photo>
		<title>Photo by Perico Terrades</title>
		<file>3.jpg</file>
	</photo>
	<photo>
		<title>Photo by Frank Daske</title>
		<file>4.jpg</file>
	</photo>
</gallery>

3. Next, create an assets folder and put your image files inside.

4. In the main.mxml file, use the HTTPService component to load the Xml datas:

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

5. Next create a Script section. Declare a variable named pictures 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.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			
			[Bindable] private var pictures : ArrayCollection;
			
			private function serviceHandler(event:ResultEvent):void{
				pictures = event.result.gallery.photo;
			}
		]]>
</mx:Script>
	

6. In order to finish the xml datas’ loading , don’t forget to call the HTTPService’s send method :

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

7. Now we just have to create the accordion. To do so, first add an Accordion navigator and set its width and height.
Next use a Repeater and bind its dataProvider with the pictures variable.
Inside the Repeater, add a VBox component and bind its label property to the picture’s title. Inside the VBox add an Image component and bind its source to the file property of the picture.

<mx:Accordion width="400" height="400">
		<mx:Repeater id="rep" dataProvider="{pictures}">
			<mx:VBox width="100%" height="100%"
				verticalAlign="middle" horizontalAlign="center"
				label="{rep.currentItem.title}"  >
				<mx:Image source="assets/{rep.currentItem.file}"/>
			</mx:VBox>
		</mx:Repeater>
</mx:Accordion>

8. To custom the accordion change its openDuration property and set its creationCompleteEffect to an Iris effect so that the accordion’s appearance will be more attractive.

<mx:Accordion x="190" y="19" width="400" height="400" 
creationCompleteEffect="Iris" openDuration="500">

9. Finally we add some css to custom the app.

<mx:Style>
		Application {
			verticalAlign : middle;
			backgroundGradientColors:#5F73EF,#02072B;
		}
		
		Accordion {
   			headerStyleName: "myaccordionHeader";
		}

		.myaccordionHeader {
		   color: #02072B;
		   fontFamily: Georgia;
		   fontSize: 14;
		   fontStyle: italic;
		   
		}
</mx:Style>

10. That’s it, here’s the final code, run your 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>
		Application {
			verticalAlign : middle;
			backgroundGradientColors:#5F73EF,#02072B;
		}
		
		Accordion {
   			headerStyleName: "myaccordionHeader";
		}

		.myaccordionHeader {
		   color: #02072B;
		   fontFamily: Georgia;
		   fontSize: 14;
		   fontStyle: italic;
		   
		}
	</mx:Style>

	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			
			[Bindable] private var pictures : ArrayCollection;
			
			private function serviceHandler(event:ResultEvent):void{
				pictures = event.result.gallery.photo;
			}
		]]>
	</mx:Script>
	
	<mx:HTTPService id="service" url="datas.xml" result="serviceHandler(event)"/>
	
	<mx:Accordion width="400" height="400" 
		creationCompleteEffect="Iris" openDuration="500">
		<mx:Repeater id="rep" dataProvider="{pictures}">
			<mx:VBox width="100%" height="100%"
				verticalAlign="middle" horizontalAlign="center"
				label="{rep.currentItem.title}"  >
				<mx:Image source="assets/{rep.currentItem.file}"/>
			</mx:VBox>
		</mx:Repeater>
	</mx:Accordion>
	
</mx:Application>


18 thoughts on “Build a XML Driven Accordion Image Gallery

  1. FLEXY

    Hello there ! great job ! ! ! love it !
    only a question…. (maybe two..)

    What if… When the last image comes the arrow doesn’t disappear and shows the first slide ?
    how can be done this ?
    Adding an automatic scroll ( like your another tutorial but without effects, only the animated scrollbar)
    and preserving the arrows…
    how can I merge the code ?

    some help would be appreciated ! thanks in advance !
    regards.

  2. Papan Das

    Hi,

    First of all i would like to thank you for your wonderful Tutorial, this will help me a lot to develop my skills on Flex, thanks once again.

    With Regards
    Papan Das
    Jaipur

  3. Michael Benin

    Great tut, I’m working on several accordions at the moment. They are horizontal accordions and load swfs or can stream flvs. Just wanted to say your site is awesome, and thank you for everything you have here.

  4. Pingback: 45 Of The Most Wanted Adobe Flex Tutorials | Design your way

  5. Pingback: 20 of best Adobe flex Tutorials - Wsblogz.com – Web design magazine

  6. Pingback: designingjunks.com | Best designing resource | PSD downloads | Wordpress best themes | designing needs » 30+ Amazing Flex Tutorials for beginners help

  7. Pingback: Os 45 tutoriais de Adobe Flex mais procurados | Igor Musardo - Desenvolvedor Pragmático de Adobe Flex, ASP.NET, Silverlight, WPF e SQL Server

  8. Pingback: 10 Useful Adobe Flex Tutorials | redbey

  9. Pingback: Os 45 tutoriais de Adobe Flex mais procurados | Galaxyz do Brasil

  10. Pingback: Have an Absolute Command on Adobe Flex [Tutorials] | Passcomms Android

  11. Maarten

    Hi. Great tutorial.
    But I’m stuck. I want if they click on a picture, I want this picture to be at fullscreen. and If they click it again to be normal.
    How do I do this.?
    Thanks. Maarten.

  12. Pingback: Vários tutoriais de Adobe Flex

Leave a Reply

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