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
DXWorldEXPO LLC announced today that All in Mobile, a mobile app development company from Poland, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. All In Mobile is a mobile app development company from Poland. Since 2014, they maintain passion for developing mobile applications for enterprises and startups worldwide.
Digital Transformation is much more than a buzzword. The radical shift to digital mechanisms for almost every process is evident across all industries and verticals. This is often especially true in financial services, where the legacy environment is many times unable to keep up with the rapidly shifting demands of the consumer. The constant pressure to provide complete, omnichannel delivery of customer-facing solutions to meet both regulatory and customer demands is putting enormous pressure on...
The best way to leverage your CloudEXPO | DXWorldEXPO presence as a sponsor and exhibitor is to plan your news announcements around our events. The press covering CloudEXPO | DXWorldEXPO 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 CloudEXPO. Product announcements during our show provide your company with the most reach through our targeted audienc...
IoT is at the core or many Digital Transformation initiatives with the goal of re-inventing a company's business model. We all agree that collecting relevant IoT data will result in massive amounts of data needing to be stored. However, with the rapid development of IoT devices and ongoing business model transformation, we are not able to predict the volume and growth of IoT data. And with the lack of IoT history, traditional methods of IT and infrastructure planning based on the past do not app...
"Akvelon is a software development company and we also provide consultancy services to folks who are looking to scale or accelerate their engineering roadmaps," explained Jeremiah Mothersell, Marketing Manager at Akvelon, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
IoT is rapidly becoming mainstream as more and more investments are made into the platforms and technology. As this movement continues to expand and gain momentum it creates a massive wall of noise that can be difficult to sift through. Unfortunately, this inevitably makes IoT less approachable for people to get started with and can hamper efforts to integrate this key technology into your own portfolio. There are so many connected products already in place today with many hundreds more on the h...
More and more brands have jumped on the IoT bandwagon. We have an excess of wearables – activity trackers, smartwatches, smart glasses and sneakers, and more that track seemingly endless datapoints. However, most consumers have no idea what “IoT” means. Creating more wearables that track data shouldn't be the aim of brands; delivering meaningful, tangible relevance to their users should be. We're in a period in which the IoT pendulum is still swinging. Initially, it swung toward "smart for smart...
DXWorldEXPO LLC, the producer of the world's most influential technology conferences and trade shows has announced the 22nd International CloudEXPO | DXWorldEXPO "Early Bird Registration" is now open. Register for Full Conference "Gold Pass" ▸ Here (Expo Hall ▸ Here)
As data explodes in quantity, importance and from new sources, the need for managing and protecting data residing across physical, virtual, and cloud environments grow with it. Managing data includes protecting it, indexing and classifying it for true, long-term management, compliance and E-Discovery. Commvault can ensure this with a single pane of glass solution – whether in a private cloud, a Service Provider delivered public cloud or a hybrid cloud environment – across the heterogeneous enter...
The Jevons Paradox suggests that when technological advances increase efficiency of a resource, it results in an overall increase in consumption. Writing on the increased use of coal as a result of technological improvements, 19th-century economist William Stanley Jevons found that these improvements led to the development of new ways to utilize coal. In his session at 19th Cloud Expo, Mark Thiele, Chief Strategy Officer for Apcera, compared the Jevons Paradox to modern-day enterprise IT, examin...
DXWorldEXPO LLC announced today that ICC-USA, a computer systems integrator and server manufacturing company focused on developing products and product appliances, will exhibit at the 22nd International CloudEXPO | DXWorldEXPO. DXWordEXPO New York 2018, colocated with CloudEXPO New York 2018 will be held November 11-13, 2018, in New York City. ICC is a computer systems integrator and server manufacturing company focused on developing products and product appliances to meet a wide range of ...
Headquartered in Plainsboro, NJ, Synametrics Technologies has provided IT professionals and computer systems developers since 1997. Based on the success of their initial product offerings (WinSQL and DeltaCopy), the company continues to create and hone innovative products that help its customers get more from their computer applications, databases and infrastructure. To date, over one million users around the world have chosen Synametrics solutions to help power their accelerated business or per...
We are seeing a major migration of enterprises applications to the cloud. As cloud and business use of real time applications accelerate, legacy networks are no longer able to architecturally support cloud adoption and deliver the performance and security required by highly distributed enterprises. These outdated solutions have become more costly and complicated to implement, install, manage, and maintain.SD-WAN offers unlimited capabilities for accessing the benefits of the cloud and Internet. ...
Bill Schmarzo, author of "Big Data: Understanding How Data Powers Big Business" and "Big Data MBA: Driving Business Strategies with Data Science," is responsible for setting the strategy and defining the Big Data service offerings and capabilities for EMC Global Services Big Data Practice. As the CTO for the Big Data Practice, he is responsible for working with organizations to help them identify where and how to start their big data journeys. He's written several white papers, is an avid blogge...
Charles Araujo is an industry analyst, internationally recognized authority on the Digital Enterprise and author of The Quantum Age of IT: Why Everything You Know About IT is About to Change. As Principal Analyst with Intellyx, he writes, speaks and advises organizations on how to navigate through this time of disruption. He is also the founder of The Institute for Digital Transformation and a sought after keynote speaker. He has been a regular contributor to both InformationWeek and CIO Insight...
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 tha...
"MobiDev is a software development company and we do complex, custom software development for everybody from entrepreneurs to large enterprises," explained Alan Winters, U.S. Head of Business Development at MobiDev, in this SYS-CON.tv interview at 21st Cloud Expo, held Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA.
I think DevOps is now a rambunctious teenager - it's starting to get a mind of its own, wanting to get its own things but it still needs some adult supervision," explained Thomas Hooker, VP of marketing at CollabNet, in this SYS-CON.tv interview at DevOps Summit at 20th Cloud Expo, held June 6-8, 2017, at the Javits Center in New York City, NY.
Recently, WebRTC has a lot of eyes from market. The use cases of WebRTC are expanding - video chat, online education, online health care etc. Not only for human-to-human communication, but also IoT use cases such as machine to human use cases can be seen recently. One of the typical use-case is remote camera monitoring. With WebRTC, people can have interoperability and flexibility for deploying monitoring service. However, the benefit of WebRTC for IoT is not only its convenience and interopera...
Cloud-enabled transformation has evolved from cost saving measure to business innovation strategy -- one that combines the cloud with cognitive capabilities to drive market disruption. Learn how you can achieve the insight and agility you need to gain a competitive advantage. Industry-acclaimed CTO and cloud expert, Shankar Kalyana presents. Only the most exceptional IBMers are appointed with the rare distinction of IBM Fellow, the highest technical honor in the company. Shankar has also receive...