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

All applications, simple or complex, online or desktop, are composed of many elements: screens, forms, menus, etc. In a Rich Internet Application, those elements can also include video, audio, or images. From the programmer's standpoint, it would be great to be able to reuse those parts so that they can be incorporated into different places of the application, or in different applications, using the same component.

In Flex, creating custom MXML components is a very easy task; whenever you create a new component, simply drop it in your application as many times as you want. You can also easily use it in other Flex applications.

In this tutorial, you'll learn how to build a small photo slide show Flex component that reads XML output created by Picasa's export feature. Picasa is a free photo organizer created by Google (www.google.com/picasa/) (see Fig. 1).

Creating a New Project in Flex Builder
Start by creating a new empty project with the default settings in Flex Builder called PhotoshowExample. When a new project is created, Flex Builder also creates an MXML file with an empty Application tag (<mx:Application>). This file is the main starting point of your application. In this tutorial, only use it as a container as if it was a bigger application in which you wanted to include a slide show.

Photo Show MXML Component Layout
To keep your files organized, create the following folder structure in your Flex Builder project: com/asfusion/controls, then choose File > New MXML Component from the menu. When the dialog opens, ensure that the file will be added to the com/asfusion/controls folder. Write Photoshow as the file name, make sure it's based on Canvas, and remove the width and height values from the input fields in that dialog. Basing your component on Canvas gives you a very simple empty component that has the functions and properties of a UI component in Flex. This will make it possible to drop your component inside any other UI object.

At this point, the Photoshow.mxml file will look like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">

</mx:Canvas>

Now go to the Design view by clicking on the Design button on the top of the file editor. You'll see only a scary blank canvas, but don't be afraid; you'll soon fill it out.

Pick a Canvas from the Components view on the left side of the editor and place it in the middle of your empty white canvas (see Figure 2). Make it as big as your pictures will be. Mine are 640 in width and 480 in height.

Tip: If your design window doesn't show everything, choose a custom size in the dropdown menu called Design Area in the top right corner of your design window and set it to 800x600.

Then, drag an Image to show the photo inside the Canvas. Place a Button on the right of the canvas and a Button on the left of the canvas for the next and previous functions. Finally, place a Label at the bottom of the image for the caption. Once all the main elements are in place, the component source will be:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Canvas y="10" width="600" height="460" horizontalCenter="0">
       <mx:Image x="0" y="0" width="600" height="460"/>
    </mx:Canvas>

    <mx:Button y="210" width="58" height="60" />
    <mx:Button y="210" width="58" height="60" x="740" />
    <mx:Label x="100" y="478" width="600" height="43"/>
</mx:Canvas>

Now that you have the main layout of the photo slide show (see Figure 3), you will need to add the functionality.

The Image Class
The Photoshow component shows a sequence of images. Each image is composed of the file name, a caption text, and its width and height. All these properties will be contained in an ActionScript class called PhotoshowImage. You will create this file in the same folder as your Photoshow component by choosing from the menu File > New > ActionScript Class. Its package name will be com.asfusion.controls. In this class, add the public properties: name, caption, width and height.

package com.asfusion.controls
{
[Bindable]
    public class PhotoshowImage
    {
       public var name:String;
       public var caption:String;
       public var width:int;
       public var height:int;
    }
}

As short as it seems, you just created an ActionScript class. This class doesn't have any methods and has only four public properties. You could add some private properties or functions if needed. The four properties you added are public because that makes it easier to use in bindings as you'll see later. If you prefer not to break encapsulation, you could also use public setters and getters for private properties that would serve the same purpose, but possibly execute additional business logic. However, you still need to make your class Bindable so that all the public properties of the class can be used in bindings.

Navigating the Images
The Photoshow component will contain an array of PhotoshowImage objects. Define this array in the Photoshow.mxml file and another variable to hold the index of the currently shown picture. In addition, you'll need to store the current picture in a Bindable variable (currentPicture) so that you can use it to get the file name and the caption and sizes in the layout containers.

<mx:Script>
    <![CDATA[
       import com.asfusion.controls.PhotoshowImage;

       private var pictures:Array;
       private var currentIndex:int = 0;
       [Bindable]
private var currentPicture:PhotoshowImage;
]]>
</mx:Script>

Within the same Script block, create two functions: goNext() and goPrevious(). These two functions will respond to the next and previous buttons, respectively, and change the current picture using the currentIndex variable. In these functions you will also probably want to ensure the index never goes beyond the available pictures or below 0. In those cases, you could make them circular such that if the user is at the end of the show, the "next" button will load the first picture.

You'll also need a set function that allows external components to set the pictures array (see Listing 1).

Last, your buttons must respond to user interaction. To make them respond to click events, set their click attribute to goNext() and goPrevious(). Then, the mx:Image component you placed in the middle of the canvas must have its source attribute as the current image, as well as the width and height of the current image. You can use the binding syntax (the curly brackets) to set these attributes. If you're not familiar with bindings, you should get to know them because they are very useful. They allow you to use variables as attributes; whenever those variables change their values, the values of the attributes are automatically changed. In this case, whenever the user changes the picture selection (by clicking on next or previous buttons), the source, width, and height attributes of the mx:Image tag will automatically get the values corresponding to the newly selected image.

<mx:Image source="assets/photoshow/images/{currentPicture.name}" width="{currentPicture.width}"
height="{currentPicture.height}/>

Exporting Pictures from Picasa
Picasa lets you import pictures from a local folder or directly from your camera. Once they are imported, the pictures are organized by albums and folders.

Open Picasa and select the album or folder you would like to export. You can also make a selection of specific images from your library to export by selecting them using the ctrl key and clicking on the images. From the Folder menu, select the option Export as HTML page. When the Export dialog opens, choose 640 pixels. You can use a different size, but that's the size you're using in the Photoshow component. Enter a name for the export folder (or leave the default) and click Next. In the last and most important step, choose XML Code as the template name for your export. Once you click on the Finish button, Picasa will generate an XML file with the names and captions of your images and a folder with scaled versions of the photos. Create a folder in Flex Builder in your project called assets with another folder called photoshow inside (assets/photoshow) and place the XML file and images folder inside assets/photoshow. Now you have a set of pictures and the XML file containing the image's names, captions, and dimensions that can be shown in the Photoshow component.

Not so fast! The data is contained in an XML file and the slide show doesn't know how to use it.

Parsing the XML
The XML output from Picasa is very simple in structure. It contains a root called album, which has a node called images. The images node contains all the pictures in this album; each picture is an image node with several properties. You only need four of all the properties the images have: itemName for the file name, itemCaption, itemWidth, and itemHeight.

<?xml version="1.0" encoding="utf-8" ?>
<album>
<images>
<image>
<itemWidth>640</itemWidth>
<itemHeight>480</itemHeight>
<itemName>img_0279.jpg</itemName>
<itemCaption>A flower</itemCaption>
</image>
</images>
</album>

You could add the XML parsing functionality in the same Photoshow.mxml file, but the principle of separation of concerns tells us that we should favor specialized classes or components over classes that do many different things. Create another component, XMLPhotoshow.mxml that will be in charge of getting the XML file from the server, parsing it, and passing the array of PhotoshowImage objects to the Photoshow component you created earlier. This allows you to change the XML, or even use a different method, such as Flash Remoting or Web services by simply switching the wrapper class without modifying the core Photoshow component. Inside XMLPhotoshow add an instance of that core Photoshow component. Once you create the new component, you can use the design view and find the Photoshow component under the Custom group in the Components View (see Figure 4). This instance will need an ID that can be referenced in other parts of the component whenever the pictures are loaded from the XML file. Set that ID to photoshowContainer. Note that the namespace controls refers to the folder com/asfusion/controls defined in the top MXML tag as xmlns:controls="com.asfusion.controls.*"

<controls:Photoshow id="photoshowContainer" />


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.


@ThingsExpo Stories
Almost two-thirds of companies either have or soon will have IoT as the backbone of their business. Though, IoT is far more complex than most firms expected with a majority of IoT projects having failed. How can you not get trapped in the pitfalls? In his session at @ThingsExpo, Tony Shan, Chief IoTologist at Wipro, will introduce a holistic method of IoTification, which is the process of IoTifying the existing technology portfolios and business models to adopt and leverage IoT. He will delve in...
In the enterprise today, connected IoT devices are everywhere – both inside and outside corporate environments. The need to identify, manage, control and secure a quickly growing web of connections and outside devices is making the already challenging task of security even more important, and onerous. In his session at @ThingsExpo, Rich Boyer, CISO and Chief Architect for Security at NTT i3, will discuss new ways of thinking and the approaches needed to address the emerging challenges of securit...
As cloud adoption continues to transform business, today's global enterprises are challenged with managing a growing amount of information living outside of the data center. The rapid adoption of IoT and increasingly mobile workforce are exacerbating the problem. Ensuring secure data sharing and efficient backup poses capacity and bandwidth considerations as well as policy and regulatory compliance issues.
The emerging Internet of Everything creates tremendous new opportunities for customer engagement and business model innovation. However, enterprises must overcome a number of critical challenges to bring these new solutions to market. In his session at @ThingsExpo, Michael Martin, CTO/CIO at nfrastructure, outlined these key challenges and recommended approaches for overcoming them to achieve speed and agility in the design, development and implementation of Internet of Everything solutions with...
SYS-CON Events announced today that Outlyer, a monitoring service for DevOps and operations teams, has been named “Bronze Sponsor” of SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Outlyer is a monitoring service for DevOps and Operations teams running Cloud, SaaS, Microservices and IoT deployments. Designed for today's dynamic environments that need beyond cloud-scale monitoring, we make monitoring effortless so you...
What are the new priorities for the connected business? First: businesses need to think differently about the types of connections they will need to make – these span well beyond the traditional app to app into more modern forms of integration including SaaS integrations, mobile integrations, APIs, device integration and Big Data integration. It’s important these are unified together vs. doing them all piecemeal. Second, these types of connections need to be simple to design, adapt and configure...
It is one thing to build single industrial IoT applications, but what will it take to build the Smart Cities and truly society changing applications of the future? The technology won’t be the problem, it will be the number of parties that need to work together and be aligned in their motivation to succeed. In his Day 2 Keynote at @ThingsExpo, Henrik Kenani Dahlgren, Portfolio Marketing Manager at Ericsson, discussed how to plan to cooperate, partner, and form lasting all-star teams to change the...
"I think that everyone recognizes that for IoT to really realize its full potential and value that it is about creating ecosystems and marketplaces and that no single vendor is able to support what is required," explained Esmeralda Swartz, VP, Marketing Enterprise and Cloud at Ericsson, in this SYS-CON.tv interview at @ThingsExpo, held June 7-9, 2016, at the Javits Center in New York City, NY.
In his General Session at 16th Cloud Expo, David Shacochis, host of The Hybrid IT Files podcast and Vice President at CenturyLink, investigated three key trends of the “gigabit economy" though the story of a Fortune 500 communications company in transformation. Narrating how multi-modal hybrid IT, service automation, and agile delivery all intersect, he will cover the role of storytelling and empathy in achieving strategic alignment between the enterprise and its information technology.
In his session at @ThingsExpo, Steve Wilkes, CTO and founder of Striim, will delve into four enterprise-scale, business-critical case studies where streaming analytics serves as the key to enabling real-time data integration and right-time insights in hybrid cloud, IoT, and fog computing environments. As part of this discussion, he will also present a demo based on its partnership with Fujitsu, highlighting their technologies in a healthcare IoT use-case. The demo showcases the tracking of patie...
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at Cloud Expo, Ed Featherston, a director and senior enterprise architect at Collaborative Consulting, discussed the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
SYS-CON Events announced today that SD Times | BZ Media has been named “Media Sponsor” of SYS-CON's 20th International Cloud Expo, which will take place on June 6–8, 2017, at the Javits Center in New York City, NY. BZ Media LLC is a high-tech media company that produces technical conferences and expositions, and publishes a magazine, newsletters and websites in the software development, SharePoint, mobile development and commercial UAV markets.
The best way to leverage your Cloud Expo presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering Cloud Expo and @ThingsExpo will have access to these releases and will amplify your news announcements. More than two dozen Cloud companies either set deals at our shows or have announced their mergers and acquisitions at Cloud Expo. Product announcements during our show provide your company with the most reach through our targeted audiences.
SYS-CON Events announced today that Linux Academy, the foremost online Linux and cloud training platform and community, will exhibit at SYS-CON's 20th International Cloud Expo®, which will take place on June 6-8, 2017, at the Javits Center in New York City, NY. Linux Academy was founded on the belief that providing high-quality, in-depth training should be available at an affordable price. Industry leaders in quality training, provided services, and student certification passes, its goal is to c...
WebRTC defines no default signaling protocol, causing fragmentation between WebRTC silos. SIP and XMPP provide possibilities, but come with considerable complexity and are not designed for use in a web environment. In his session at @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, discussed how Matrix is a new non-profit Open Source Project that defines both a new HTTP-based standard for VoIP & IM signaling and provides reference implementations.
Data is the fuel that drives the machine learning algorithmic engines and ultimately provides the business value. In his session at 20th Cloud Expo, Ed Featherston, director/senior enterprise architect at Collaborative Consulting, will discuss the key considerations around quality, volume, timeliness, and pedigree that must be dealt with in order to properly fuel that engine.
The Internet of Things is clearly many things: data collection and analytics, wearables, Smart Grids and Smart Cities, the Industrial Internet, and more. Cool platforms like Arduino, Raspberry Pi, Intel's Galileo and Edison, and a diverse world of sensors are making the IoT a great toy box for developers in all these areas. In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists discussed what things are the most important, which will have the most profound e...
910Telecom exhibited at the 19th International Cloud Expo, which took place at the Santa Clara Convention Center in Santa Clara, CA, in November 2016. Housed in the classic Denver Gas & Electric Building, 910 15th St., 910Telecom is a carrier-neutral telecom hotel located in the heart of Denver. Adjacent to CenturyLink, AT&T, and Denver Main, 910Telecom offers connectivity to all major carriers, Internet service providers, Internet backbones and exchanges.
We all know that data growth is exploding and storage budgets are shrinking. Instead of showing you charts on about how much data there is, in his General Session at 17th Cloud Expo, Scott Cleland, Senior Director of Product Marketing at HGST, showed how to capture all of your data in one place. After you have your data under control, you can then analyze it in one place, saving time and resources.
"A lot of times people will come to us and have a very diverse set of requirements or very customized need and we'll help them to implement it in a fashion that you can't just buy off of the shelf," explained Nick Rose, CTO of Enzu, in this SYS-CON.tv interview at 18th Cloud Expo, held June 7-9, 2016, at the Javits Center in New York City, NY.