Welcome!

Adobe Flex Authors: Matthew Lobas, PR.com Newswire, Shelly Palmer, Kevin Benedict

Related Topics: Adobe Flex

Adobe Flex: Article

How To Create a Photo Slide Show ...

...with Flex 2 and Picasa

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.

More Stories By Nahuel Foronda

Nahuel Foronda is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where he has been creating award-winning applications and offering training for the last five years. He also maintains a blog, called AS Fusion (http://www.asfusion.com), where he writes about Flash, ColdFusion and other web technologies.

More Stories By Laura Arguello

Laura Arguello is one of the founders of Blue Instant (http://www.blueinstant.com), a web development firm specializing in Rich Internet Applications where she has been creating award-winning applications and offering training for the last five years. She also maintains a blog, called AS Fusion (http://www.asfusion.com), where she writes about Flash, ColdFusion and other web technologies.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


IoT & Smart Cities Stories
Moroccanoil®, the global leader in oil-infused beauty, is thrilled to announce the NEW Moroccanoil Color Depositing Masks, a collection of dual-benefit hair masks that deposit pure pigments while providing the treatment benefits of a deep conditioning mask. The collection consists of seven curated shades for commitment-free, beautifully-colored hair that looks and feels healthy.
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
The textured-hair category is inarguably the hottest in the haircare space today. This has been driven by the proliferation of founder brands started by curly and coily consumers and savvy consumers who increasingly want products specifically for their texture type. This trend is underscored by the latest insights from NaturallyCurly's 2018 TextureTrends report, released today. According to the 2018 TextureTrends Report, more than 80 percent of women with curly and coily hair say they purcha...
We all love the many benefits of natural plant oils, used as a deap treatment before shampooing, at home or at the beach, but is there an all-in-one solution for everyday intensive nutrition and modern styling?I am passionate about the benefits of natural extracts with tried-and-tested results, which I have used to develop my own brand (lemon for its acid ph, wheat germ for its fortifying action…). I wanted a product which combined caring and styling effects, and which could be used after shampo...
The platform combines the strengths of Singtel's extensive, intelligent network capabilities with Microsoft's cloud expertise to create a unique solution that sets new standards for IoT applications," said Mr Diomedes Kastanis, Head of IoT at Singtel. "Our solution provides speed, transparency and flexibility, paving the way for a more pervasive use of IoT to accelerate enterprises' digitalisation efforts. AI-powered intelligent connectivity over Microsoft Azure will be the fastest connected pat...
There are many examples of disruption in consumer space – Uber disrupting the cab industry, Airbnb disrupting the hospitality industry and so on; but have you wondered who is disrupting support and operations? AISERA helps make businesses and customers successful by offering consumer-like user experience for support and operations. We have built the world’s first AI-driven IT / HR / Cloud / Customer Support and Operations solution.
Codete accelerates their clients growth through technological expertise and experience. Codite team works with organizations to meet the challenges that digitalization presents. Their clients include digital start-ups as well as established enterprises in the IT industry. To stay competitive in a highly innovative IT industry, strong R&D departments and bold spin-off initiatives is a must. Codete Data Science and Software Architects teams help corporate clients to stay up to date with the mod...
At CloudEXPO Silicon Valley, June 24-26, 2019, Digital Transformation (DX) is a major focus with expanded DevOpsSUMMIT and FinTechEXPO programs within the DXWorldEXPO agenda. Successful transformation requires a laser focus on being data-driven and on using all the tools available that enable transformation if they plan to survive over the long term. A total of 88% of Fortune 500 companies from a generation ago are now out of business. Only 12% still survive. Similar percentages are found throug...
Druva is the global leader in Cloud Data Protection and Management, delivering the industry's first data management-as-a-service solution that aggregates data from endpoints, servers and cloud applications and leverages the public cloud to offer a single pane of glass to enable data protection, governance and intelligence-dramatically increasing the availability and visibility of business critical information, while reducing the risk, cost and complexity of managing and protecting it. Druva's...
BMC has unmatched experience in IT management, supporting 92 of the Forbes Global 100, and earning recognition as an ITSM Gartner Magic Quadrant Leader for five years running. Our solutions offer speed, agility, and efficiency to tackle business challenges in the areas of service management, automation, operations, and the mainframe.