Building an Accordion Image Gallery Driven by XML

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 Ravi</title>
<file>1.jpg</file>
</photo>

<photo>
<title>Photo by In Kali</title>
<file>2.jpg</file>
</photo>

<photo>
<title>Photo by John</title>
<file>3.jpg</file>
</photo>

<photo>
<title>Photo by Adi</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: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>

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&quot; 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>