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
SYS-CON Events announced today that N3N will exhibit at SYS-CON's @ThingsExpo, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. N3N’s solutions increase the effectiveness of operations and control centers, increase the value of IoT investments, and facilitate real-time operational decision making. N3N enables operations teams with a four dimensional digital “big board” that consolidates real-time live video feeds alongside IoT sensor data a...
In a recent survey, Sumo Logic surveyed 1,500 customers who employ cloud services such as Amazon Web Services (AWS), Microsoft Azure, and Google Cloud Platform (GCP). According to the survey, a quarter of the respondents have already deployed Docker containers and nearly as many (23 percent) are employing the AWS Lambda serverless computing framework. It’s clear: serverless is here to stay. The adoption does come with some needed changes, within both application development and operations. Tha...
SYS-CON Events announced today that Avere Systems, a leading provider of enterprise storage for the hybrid cloud, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere delivers a more modern architectural approach to storage that doesn't require the overprovisioning of storage capacity to achieve performance, overspending on expensive storage media for inactive data or the overbui...
With major technology companies and startups seriously embracing Cloud strategies, now is the perfect time to attend 21st Cloud Expo October 31 - November 2, 2017, at the Santa Clara Convention Center, CA, and June 12-14, 2018, at the Javits Center in New York City, NY, and learn what is going on, contribute to the discussions, and ensure that your enterprise is on the right path to Digital Transformation.
Digital transformation is changing the face of business. The IDC predicts that enterprises will commit to a massive new scale of digital transformation, to stake out leadership positions in the "digital transformation economy." Accordingly, attendees at the upcoming Cloud Expo | @ThingsExpo at the Santa Clara Convention Center in Santa Clara, CA, Oct 31-Nov 2, will find fresh new content in a new track called Enterprise Cloud & Digital Transformation.
Most technology leaders, contemporary and from the hardware era, are reshaping their businesses to do software. They hope to capture value from emerging technologies such as IoT, SDN, and AI. Ultimately, irrespective of the vertical, it is about deriving value from independent software applications participating in an ecosystem as one comprehensive solution. In his session at @ThingsExpo, Kausik Sridhar, founder and CTO of Pulzze Systems, will discuss how given the magnitude of today's applicati...
Smart cities have the potential to change our lives at so many levels for citizens: less pollution, reduced parking obstacles, better health, education and more energy savings. Real-time data streaming and the Internet of Things (IoT) possess the power to turn this vision into a reality. However, most organizations today are building their data infrastructure to focus solely on addressing immediate business needs vs. a platform capable of quickly adapting emerging technologies to address future ...
SYS-CON Events announced today that NetApp has been named “Bronze Sponsor” of SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. NetApp is the data authority for hybrid cloud. NetApp provides a full range of hybrid cloud data services that simplify management of applications and data across cloud and on-premises environments to accelerate digital transformation. Together with their partners, NetApp emp...
As popularity of the smart home is growing and continues to go mainstream, technological factors play a greater role. The IoT protocol houses the interoperability battery consumption, security, and configuration of a smart home device, and it can be difficult for companies to choose the right kind for their product. For both DIY and professionally installed smart homes, developers need to consider each of these elements for their product to be successful in the market and current smart homes.
Widespread fragmentation is stalling the growth of the IIoT and making it difficult for partners to work together. The number of software platforms, apps, hardware and connectivity standards is creating paralysis among businesses that are afraid of being locked into a solution. EdgeX Foundry is unifying the community around a common IoT edge framework and an ecosystem of interoperable components.
Join IBM November 1 at 21st Cloud Expo at the Santa Clara Convention Center in Santa Clara, CA, and learn how IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Cognitive analysis impacts today’s systems with unparalleled ability that were previously available only to manned, back-end operations. Thanks to cloud processing, IBM Watson can bring cognitive services and AI to intelligent, unmanned systems. Imagine a robot vacuum that becomes your personal assistant th...
SYS-CON Events announced today that Avere Systems, a leading provider of hybrid cloud enablement solutions, will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Avere Systems was created by file systems experts determined to reinvent storage by changing the way enterprises thought about and bought storage resources. With decades of experience behind the company’s founders, Avere got its ...
SYS-CON Events announced today that Golden Gate University will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Since 1901, non-profit Golden Gate University (GGU) has been helping adults achieve their professional goals by providing high quality, practice-based undergraduate and graduate educational programs in law, taxation, business and related professions. Many of its courses are taug...
SYS-CON Events announced today that SIGMA Corporation will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. uLaser flow inspection device from the Japanese top share to Global Standard! Then, make the best use of data to flip to next page. For more information, visit http://www.sigma-k.co.jp/en/.
High-velocity engineering teams are applying not only continuous delivery processes, but also lessons in experimentation from established leaders like Amazon, Netflix, and Facebook. These companies have made experimentation a foundation for their release processes, allowing them to try out major feature releases and redesigns within smaller groups before making them broadly available. In his session at 21st Cloud Expo, Brian Lucas, Senior Staff Engineer at Optimizely, will discuss how by using...
In this strange new world where more and more power is drawn from business technology, companies are effectively straddling two paths on the road to innovation and transformation into digital enterprises. The first path is the heritage trail – with “legacy” technology forming the background. Here, extant technologies are transformed by core IT teams to provide more API-driven approaches. Legacy systems can restrict companies that are transitioning into digital enterprises. To truly become a lead...
SYS-CON Events announced today that CAST Software will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. CAST was founded more than 25 years ago to make the invisible visible. Built around the idea that even the best analytics on the market still leave blind spots for technical teams looking to deliver better software and prevent outages, CAST provides the software intelligence that matter ...
SYS-CON Events announced today that Daiya Industry will exhibit at the Japanese Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ruby Development Inc. builds new services in short period of time and provides a continuous support of those services based on Ruby on Rails. For more information, please visit https://github.com/RubyDevInc.
As businesses evolve, they need technology that is simple to help them succeed today and flexible enough to help them build for tomorrow. Chrome is fit for the workplace of the future — providing a secure, consistent user experience across a range of devices that can be used anywhere. In her session at 21st Cloud Expo, Vidya Nagarajan, a Senior Product Manager at Google, will take a look at various options as to how ChromeOS can be leveraged to interact with people on the devices, and formats th...
SYS-CON Events announced today that Yuasa System will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Yuasa System is introducing a multi-purpose endurance testing system for flexible displays, OLED devices, flexible substrates, flat cables, and films in smartphones, wearables, automobiles, and healthcare.