Build a XML Driven Accordion Image Gallery
November 7th, 2009 in Flex | 15 CommentsThe following Flex tutorial will show you how to build an accordion image gallery populated using XML datas.
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>
Nov 9th, 2009
Thanks that helps
Nov 18th, 2009
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.
Dec 1st, 2009
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
Mar 31st, 2010
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.
Jun 2nd, 2010
Excellent tutorial for Beginner like me. Good work.
Thanks and Regards
Kerala Web Designer
Kerala, India
Jun 7th, 2010
[...] Build a XML Driven Accordion Image Gallery [...]
Jun 11th, 2010
[...] Build a XML Driven Accordion Image Gallery [...]
Jun 28th, 2010
it is very nice
thanks
Jul 31st, 2010
[...] Build a XML Driven Accordion Image Gallery [...]
Aug 30th, 2010
[...] 16º Galeria de imagens com o componente Accordion e XML no Flex [...]
Oct 11th, 2010
It really helped me a lot
Thx!
Dec 10th, 2010
I dugg some of you post as I cerebrated they were very useful very beneficial
Apr 25th, 2011
[...] 7. Build a XML Driven Accordion Image Gallery [...]
Dec 17th, 2011
thanks alot bud. great work!
Jan 13th, 2012
[...] 16º Galeria de imagens com o componente Accordion e XML no Flex [...]