Creating the Flex Gallery

Our Flex application needs only to load this XML file and use the list of images from it to populate the gallery. Simple! The execution is even simpler. For the most part this can be done entirely in declarative code. What this means is that we can do most of the coding in MXML – which is similar to XML / HTML. Declarative programming means that we simply declare all the user interface elements, and define some relations and the application works as expected instead of actually coding everything. You can read up on our previous article at thinkdigit.com/www.thinkdigit.com/d/adobefc for a better idea.

In fact, a functional gallery – which simply displays thumbnails – can be created entirely in declerative MXML code, the only ActionScript code we will require is for popping up the image when we click on its thumbnail in the gallery, and even that is minimal.

STEP 1: First of all you will need to create a new Flash Builder project. You can create either a Web project for viewing in your browser with the Flash plugin, or you can create Desktop project which will run in Adobe AIR. We are creating a Desktop project, however since we are not using any desktop specific features, you can use the same code for a Web project.

STEP 2: From the folder where you have exported the gallery to Flex, copy all the files and folders – there should be an index.xml file, and an images and thumbnails folder – to the “src” folder in you Flex project. Your Flex project will probably be in C:Users<username>Adobe Flash Builder 4<project name> (or C:Users<username>Adobe Flash Builder 4 Plug-in<project name> if you have the Flash Builder Eclipse plugin installed). You can also drag and drop these files into the Package Explorer view in Flash Builder.

STEP 3: First of all we need to load the XML index into our application. We do this using the XML tag in MXML. Add the following inside the <fx:Declarations> tag:

<fx:XML  id="indexXML"  source="index.xml"  />

Here we are declaring an XML object called indexXML, and using the file “index.xml” as a source. For our list image gallery though we will need a list of all images from this.

STEP 4: We will now extract a list of all images from this XML file. With support for E4X in ActionScript and Flex, this is very simple.

We have our XML object indexXML, we can directly access the “images” tag inside this as: indexXML.images

If we needed to access the album name we could simply access it as: indexXML.albumName

If we access indexXML.images.image it will return a list of all image elements inside the images tag. We can directly pull this into an XMLListCollection, which can be directly used in the list we will add in the next step. Add the code which follows inside the <fx:Declarations> after the indexXML declaration:

<s:XMLListCollection  id="index"  source="{indexXML.images.image}"  />

This will enable us to access a list of all images in the indexXML via the “index” object.

Want more? Subscribe to Digit and get the month's most relevant news, feature articles, DVDs with latest softwares and a learning guide called Fast Track.