Flex - creating an xml photo gallery

This is a method of creating a photo gallery in Flex with a main photo, and scrolling thumbnails, populated by an external XML file. This is a continuation of the concept in this article: http://blog.flexcommunity.net/?p=24

This shows how easy it is to create things of this nature using the repeater component, and one simple function. I’ll leave out the detailed explanation, as it’s almost identical to the above cited article.

example here

here’s the application code:

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:custom=”custom.*” layout=”absolute” backgroundColor=”#030303″ creationComplete=”imageData.send();”>
<mx:Script>
<![CDATA[

var mySource:String=”http://path/to/the/first/image/to/display/1.jpg”
function setPath(myPath:String):void{
mainImage.source=myPath;}
]]>
</mx:Script>

<mx:HTTPService id=”imageData” url=”images.xml” resultFormat=”e4x”/>
<mx:Image id=”mainImage” source=”{mySource}” width=”500″ height=”400″ verticalCenter=”0″ horizontalCenter=”0″ >

</mx:Image>
<mx:VBox height=”400″ horizontalScrollPolicy=”off” verticalCenter=”0″ horizontalCenter=”325″>
<mx:Repeater id=”imageRepeater” dataProvider=”{imageData.lastResult.img}”>
<mx:Canvas width=”120″ height=”80″ backgroundColor=”#000000″ horizontalScrollPolicy=”off” verticalScrollPolicy=”off” borderStyle=”none”>
<custom:CustomImage path=”{imageRepeater.currentItem.src}” width=”100″ height=”100%” useHandCursor=”true” source=”{imageRepeater.currentItem.thumbnail}” verticalCenter=”0″ left=”0″ click=”setPath(String(event.currentTarget.path));”/>
</mx:Canvas>
</mx:Repeater>

</mx:VBox>
</mx:Application>

here’s the XML structure:

<?xml version=”1.0″ encoding=”utf-8″?>
<gallery>
<img>
<src>http://path/to/your/large/image/1.jpg
</src>

<thumbnail>http://path/to/your/thumbnail/t1.jpg

</thumbnail>
</img></gallery>

here’s the custom image code (file is called CustomImage.as and is kept in a folder called custom)

package custom
{
import mx.controls.Image;

public class CustomImage extends Image

{
public function CustomImage()
{
super();
}
public var path:String = “”;

[Inspectable(category=”General”, defaultValue=”")]

}
}