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
Samsung VP Jacopo Lenzi, who headed the company's recent SmartThings acquisition under the auspices of Samsung's Open Innovaction Center (OIC), answered a few questions we had about the deal. This interview was in conjunction with our interview with SmartThings CEO Alex Hawkinson. IoT Journal: SmartThings was developed in an open, standards-agnostic platform, and will now be part of Samsung's Open Innovation Center. Can you elaborate on your commitment to keep the platform open? Jacopo Lenzi: Samsung recognizes that true, accelerated innovation cannot be driven from one source, but requires a...
Explosive growth in connected devices. Enormous amounts of data for collection and analysis. Critical use of data for split-second decision making and actionable information. All three are factors in making the Internet of Things a reality. Yet, any one factor would have an IT organization pondering its infrastructure strategy. How should your organization enhance its IT framework to enable an Internet of Things implementation? In his session at Internet of @ThingsExpo, James Kirkland, Chief Architect for the Internet of Things and Intelligent Systems at Red Hat, will describe how to revoluti...
The Internet of Things will greatly expand the opportunities for data collection and new business models driven off of that data. In her session at Internet of @ThingsExpo, Esmeralda Swartz, CMO of MetraTech, will discuss how for this to be effective you not only need to have infrastructure and operational models capable of utilizing this new phenomenon, but increasingly service providers will need to convince a skeptical public to participate. Get ready to show them the money! Speaker Bio: Esmeralda Swartz, CMO of MetraTech, has spent 16 years as a marketing, product management, and busin...
SYS-CON Events announced today that Red Hat, the world's leading provider of open source solutions, will exhibit at Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Red Hat is the world's leading provider of open source software solutions, using a community-powered approach to reliable and high-performing cloud, Linux, middleware, storage and virtualization technologies. Red Hat also offers award-winning support, training, and consulting services. As the connective hub in a global network of enterprises, partners, a...
P2P RTC will impact the landscape of communications, shifting from traditional telephony style communications models to OTT (Over-The-Top) cloud assisted & PaaS (Platform as a Service) communication services. The P2P shift will impact many areas of our lives, from mobile communication, human interactive web services, RTC and telephony infrastructure, user federation, security and privacy implications, business costs, and scalability. In his session at Internet of @ThingsExpo, Robin Raymond, Chief Architect at Hookflash Inc., will walk through the shifting landscape of traditional telephone a...
SYS-CON Events announced today that Matrix.org has been named “Silver Sponsor” of Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Matrix is an ambitious new open standard for open, distributed, real-time communication over IP. It defines a new approach for interoperable Instant Messaging and VoIP based on pragmatic HTTP APIs and WebRTC, and provides open source reference implementations to showcase and bootstrap the new standard. Our focus is on simplicity, security, and supporting the fullest feature set.
BSQUARE is a global leader of embedded software solutions. We enable smart connected systems at the device level and beyond that millions use every day and provide actionable data solutions for the growing Internet of Things (IoT) market. We empower our world-class customers with our products, services and solutions to achieve innovation and success. For more information, visit www.bsquare.com.
How do APIs and IoT relate? The answer is not as simple as merely adding an API on top of a dumb device, but rather about understanding the architectural patterns for implementing an IoT fabric. There are typically two or three trends: Exposing the device to a management framework Exposing that management framework to a business centric logic • Exposing that business layer and data to end users. This last trend is the IoT stack, which involves a new shift in the separation of what stuff happens, where data lives and where the interface lies. For instance, it’s a mix of architectural style...
SYS-CON Events announced today that SOA Software, an API management leader, will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. SOA Software is a leading provider of API Management and SOA Governance products that equip business to deliver APIs and SOA together to drive their company to meet its business strategy quickly and effectively. SOA Software’s technology helps businesses to accelerate their digital channels with APIs, drive partner adoption, monetize their assets, and achieve a...
From a software development perspective IoT is about programming "things," about connecting them with each other or integrating them with existing applications. In his session at @ThingsExpo, Yakov Fain, co-founder of Farata Systems and SuranceBay, will show you how small IoT-enabled devices from multiple manufacturers can be integrated into the workflow of an enterprise application. This is a practical demo of building a framework and components in HTML/Java/Mobile technologies to serve as a platform that can integrate new devices as they become available on the market.
SYS-CON Events announced today that Utimaco will exhibit at SYS-CON's 15th International Cloud Expo®, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Utimaco is a leading manufacturer of hardware based security solutions that provide the root of trust to keep cryptographic keys safe, secure critical digital infrastructures and protect high value data assets. Only Utimaco delivers a general-purpose hardware security module (HSM) as a customizable platform to easily integrate into existing software solutions, embed business logic and build s...
Connected devices are changing the way we go about our everyday life, from wearables to driverless cars, to smart grids and entire industries revolutionizing business opportunities through smart objects, capable of two-way communication. But what happens when objects are given an IP-address, and we rely on that connection, sometimes with our lives? How do we secure those vast data infrastructures and safe-keep the privacy of sensitive information? This session will outline how each and every connected device can uphold a core root of trust via a unique cryptographic signature – a “bir...
Internet of @ThingsExpo Silicon Valley announced on Thursday its first 12 all-star speakers and sessions for its upcoming event, which will take place November 4-6, 2014, at the Santa Clara Convention Center in California. @ThingsExpo, the first and largest IoT event in the world, debuted at the Javits Center in New York City in June 10-12, 2014 with over 6,000 delegates attending the conference. Among the first 12 announced world class speakers, IBM will present two highly popular IoT sessions, which will take place November 4-6, 2014 at the Santa Clara Convention Center in Santa Clara, Calif...
Almost everyone sees the potential of Internet of Things but how can businesses truly unlock that potential. The key will be in the ability to discover business insight in the midst of an ocean of Big Data generated from billions of embedded devices via Systems of Discover. Businesses will also need to ensure that they can sustain that insight by leveraging the cloud for global reach, scale and elasticity.
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 Internet of @ThingsExpo, Matthew Hodgson, technical co-founder of the Matrix.org, will discuss 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.

SUNNYVALE, Calif., Oct. 20, 2014 /PRNewswire/ -- Spansion Inc. (NYSE: CODE), a global leader in embedded systems, today added 96 new products to the Spansion® FM4 Family of flexible microcontrollers (MCUs). Based on the ARM® Cortex®-M4F core, the new MCUs boast a 200 MHz operating frequency and support a diverse set of on-chip peripherals for enhanced human machine interfaces (HMIs) and machine-to-machine (M2M) communications. The rich set of periphera...

SYS-CON Events announced today that Aria Systems, the recurring revenue expert, has been named "Bronze Sponsor" of SYS-CON's 15th International Cloud Expo®, which will take place on November 4-6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Aria Systems helps leading businesses connect their customers with the products and services they love. Industry leaders like Pitney Bowes, Experian, AAA NCNU, VMware, HootSuite and many others choose Aria to power their recurring revenue business and deliver exceptional experiences to their customers.
The Internet of Things (IoT) is going to require a new way of thinking and of developing software for speed, security and innovation. This requires IT leaders to balance business as usual while anticipating for the next market and technology trends. Cloud provides the right IT asset portfolio to help today’s IT leaders manage the old and prepare for the new. Today the cloud conversation is evolving from private and public to hybrid. This session will provide use cases and insights to reinforce the value of the network in helping organizations to maximize their company’s cloud experience.
The Internet of Things (IoT) is making everything it touches smarter – smart devices, smart cars and smart cities. And lucky us, we’re just beginning to reap the benefits as we work toward a networked society. However, this technology-driven innovation is impacting more than just individuals. The IoT has an environmental impact as well, which brings us to the theme of this month’s #IoTuesday Twitter chat. The ability to remove inefficiencies through connected objects is driving change throughout every sector, including waste management. BigBelly Solar, located just outside of Boston, is trans...
SYS-CON Events announced today that Matrix.org has been named “Silver Sponsor” of Internet of @ThingsExpo, which will take place on November 4–6, 2014, at the Santa Clara Convention Center in Santa Clara, CA. Matrix is an ambitious new open standard for open, distributed, real-time communication over IP. It defines a new approach for interoperable Instant Messaging and VoIP based on pragmatic HTTP APIs and WebRTC, and provides open source reference implementations to showcase and bootstrap the new standard. Our focus is on simplicity, security, and supporting the fullest feature set.