Page 2 of 2   « previous page

The first tag you need in this component is the HTTPService tag that will allow you to retrieve the XML file from the server.

<mx:HTTPService id="xmlService" result="xmlReceived(XML(event.result))" method="post" resultFormat="e4x" />

Note that the result attribute is set to call a function (xmlReceived) that you haven't defined yet. Its resultFormat attribute is set to e4x because the file that the HTTPService is retrieving is an XML file. Because this won't compile yet, create a Script block and implement the xmlReceived function and the actual XML parser. The body of the xmlReceived() function simply casts the result to an XML document to parse it.

    //function that gets called when the xml file arrives and needs to be parsed.
    private function xmlReceived(result:ResultEvent):void{

    xmlSource = XML(result.result);
}

The meat of the parser is in the xmlSource setter function where it loops over all the image children of the document using E4X format:

for each( var image:XML in xml..image ) {
    //create each image object
}

Inside that loop, it sets each of the properties of the pictures and stores them in the pictures array that will be used as the dataProvider of the Photoshow component at the end of the loop (see Listing 2).

At this point, however, no XML file is requested to the server yet. Not only that, but nowhere do we tell the HTTPService where to get this file. Create a private variable, _xmlFile, along with a setter that other components can use to set or change the location of the XML file. In this case, you have only one file, but you can imagine that this would be useful if you wanted to show a list of albums and change the XML file according to which album is currently selected. In that same function, set xmlfile, call getXML(), a simple function that sets the HTTPService's destination address (url) and actually sends the request to get the XML file from the server.

private var _xmlFile:String;

public function set xmlfile(value:String):void {
    _xmlFile = value;
    //make http request
    getXML();
}

private function getXML():void{
    xmlService.url=_xmlFile;
    xmlService.send();
}

Now the circle is complete: when the xmlfile attribute is set by the calling component, an HTTP request is fired to get the XML file from the server. When the request comes back (asynchronously), the xmlReceived function is called, receiving the contents of the XML file. At that point, the XML is parsed and an array of PhotoshowImage objects is created and passed to the Photoshow component, which will immediately show them.

The last bit will be adding the XMLPhotoshow component to the main application MXML file, PhotoshowExample.mxml, passing the name of the XML file that contains the pictures as an attribute:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:controls="com.asfusion.controls.*"
    width="100%" height="100%" layout="absolute">

    <controls:XMLPhotoshow xmlfile="assets/photoshow/index.xml" />
</mx:Application>

Note: If you experience problems loading the XML and the debug player shows you a "security sandbox" error, try placing the generated swf, HTML files and MXML file in a local Web server and access them using http://localhost or http://yourdomain instead of running the file directly. You can make Flex Builder output the generated files there automatically by setting the project's output folder to your local Web root.

Styling the Application
In Flex, applying an overall style to your application can be accomplished by assigning style names to the different components, such as buttons, panels, or containers. You might be familiar with the class attribute of HTML elements, where you specify a class name, and then define styles in a style sheet. If so, then it will be easy for you to understand how styles work in Flex. When using the styleName attribute in an MXML tag, Flex will look for the style definition in either inline Style tags or in Style tags containing references to external style sheets. Syntax within a style (be it inline or external) is the same as in HTML CSS, with selectors and properties specific to Flex, such as backgroundGradientColors or borderColor. The following code shows how to add a reference to an external style sheet located in the folder assets/styles:

<mx:Style source="/assets/styles/main.css" />

The following code shows how to set the style for the previous button, which has a styleName called previous:

.previous{
upSkin:Embed("/assets/images/previous_up.gif");
overSkin:Embed("/assets/images/previous_over.gif");
downSkin:Embed("/assets/images/previous_down.gif");
}

If you look at the finished application, you'll see that we set the background color to a dark gray. Many times, however, when the application loads, you'll see a different background color. To avoid that, use this compiler command in Project > Properties > Flex Compiler in the Additional compiler arguments text input:

-default-background-color=0x161616

The hexadecimal number 0x161616 can be changed to the color of your choice.

Digging into the Code
It would be impossible to show every detail of the construction of an application, no matter how small the application is. We invite you to look at the code and find the missing bits and pieces or whenever you get stuck or wonder how something works. You can download the code and see the application running at www.asfusion.com.

Once you feel comfortable with the code, you could even add fading effects and transitions between each picture, use a timer for auto-play, add a loading indicator, or let the user navigate the photos using the arrow keys. We just hope this application inspires you to go further than what we've shown you in this tutorial.

Page 2 of 2   « previous page