If you were present at MAX 2005 and/or have begun particpation in the Flex 2 Alpha project at Macromedia Labs, you will have seen a demonstration of Flex 2 that uses the Flickr service to display images.
I was intrigued by this because I saw an opportunity to build my own Flickr application in Flex. I decided to use Flex 1.5 first because I have not spent much time with Flex 2. That will come shortly.
I wanted to build a ‘real world’ application that any of Macromedia’s customers might build. It is one thing to support a product and while I was an avid user of Flex before joining Macromedia, I haven’t built an application in a long time. Flickr provided an excellent excuse because I did not have to build the back-end.
If you are interested in my application, you can download it from the link below. You will need your own Flickr account however, so set that up first. And you will need to get a Flickr API key as well as I have removed mine from the source code.
My goals for developing this application were:
- to get a small taste of what customers go through while building a Flex application;
- to make a robust enough application that was challenging, but not so complex that it would not be worthwhile to post;
- to use a variety of Flex’s features, such as effects and drag-and-drop;
- to follow “best practices” as much as possible.
I believe I achieved these goals, but you can be the judge of the last one when you look at my code. Remember, I’m a “support engineer” not an “application developer”. So be kind.
One thing you will notice as you look through the code is that it is loosely coupled. That is, there are a lot of events being dispatched and no child component knows anything about its parent. For example, when you click on an image to see its larger version, the Thumbnail component dispatches a “click” event like a button. The Thumbnail does not invoke a method in its parent. This proves useful because the Thumbnail is used not only in the main Gallery, but in the Favorites panel as well. The approach left me a great deal of freedom to change components without affecting the rest of the application.
How to use PhotoSearch
Here’s a quick overview of how you use the program:
When the program first starts you have to log into Flickr. A window is presented with instructions. Once you pass the login process, the window disappears and the application becomes active.
On the left side of the screen is the Search Panel and the Favorites Panel. At the bottom is the Trashcan where you can drag items from the Favorites or Search History to delete them. In the Search Panel you can enter a tag, such as a “dog” and press the Go (magnifying glass) button.
When Flickr returns the results of the search, the search term is placed into the search history DataGrid and the Photo Gallery displays the Thumbnails of the first (or only) page of images found. If the search results in more than one page, the bottom right corner allows you to select a new page along with a convenient Go button.
If you see a image you like, you can drag it from the Photo Gallery to the Favorites area. The list of images, as well as the search history, are remembered between sessions using the Flash SharedObject. So the next time you run the application on the same computer you will see your favorite images and past searches. At any time you can drag them to the Trashcan.
The Search Panel also has a small triangular button next to the search TextInput field. This exposes “advanced” search options. You can enter multiple tags and search for images that match all of the words (the default) or any of words. You can also enter a Flickr user name into the User TextInput field and display all that user’s images. The Clear History button does what it says: it erases your entire search history.
When you want to see a large version of an image – whether it is in the Photo Gallery or the Favorites Panel – just click it with the mouse. The ImageView displays and dims the Photo Gallery. You can continue to select images from Favorites or the Photo Gallery and they will change in the Image Viewer. By the way, I lifted the ImageMixer component the ImageViewer uses right from the Flex samples that come with Flex.
The ImageView also has some controls. You can see what they are with their toolTips, but briefly that are print, info, dim, add to favorites, previous image, and next image. On the far right of the ImageViewer is the name of the user who uploaded the picture. If you click their name you can search for all of their photos as if you entered their name into the User TextInput field of the Search Panel.
The info button will display more details about the image. This includes the description (if any), the date the photo was taken (if given), who took the picture (if provided) and any tags associated with the photo. You can click on any of the tags and start a whole new search this way.
You should have noticed that when the ImageViewer appeared, the Photo Gallery got more transparent. I called this feature “dim” for lack of an imagination. I did this because I found it difficult to see the enlarged image on top of the often colorful Photo Gallery. But you may not like that, so the dim control on the ImageViewer will toggle that on and off, then remember your preference in the SharedObject along with your favorite images and search history.
Finally, you can move the ImageViewer by dragging its title bar and dismiss the ImageViewer by clicking the small X in its upper right corner.
That’s the brief overview of the application. I’ve placed a lot of comments (but are there ever enough?) in the code to guide you. I’ve also made some extra notes below. I hope you find this to helpful as another example of a Flex application.
Download the Code
Disclaimer: Macromedia and Flickr do not support this program. I supply this as-is and may choose to change or replace it as I see fit. Please report any egregious bugs to me if you feel so inclined. You may use the source code for your own projects without the need for copyright; neither I, nor Macromedia, nor Flickr, are responsible for any data lost or corrupted through the use of this code.
One of the most challenging aspects was logging into Flickr. You will find this all taken care of for you in the
Drag and Drop
I make use of the Flex DragManager by allowing you to drag Thumbnails from the Photo Gallery to the Favorites panel. You can also drag Thumbnails from the Favorites panel to the Trashcan to delete it. But you will notice that you cannot drag a Thumbnail from the Photo Gallery to the Trashcan. If you want to use drag and drop, the code in the Trashcan will help you understand it better.
There are not many effects in this program, but I think they are used, well, effectively. For example, when you have the ImageViewer displayed and pick another image, the first image fades out while the new one fades in. I picked up this code right out of the examples that ship with Flex. Another example if the ImageInfo component that displays details about an image in the ImageViewer. This component is zoomed up and down. You can also find examples in the Search Panel and the Gallery.
If you have already written Flex applications, you will notice that I did not go all out making everything into a component. I decided to be practical and am still mulling over have complex the main application (PhotoSearch.mxml) component turned out. I can see a couple of new components could come of it, but I’m pretty happy with things as they are.
My rule of thumb was that anything I wanted to hide or make look like it was self-contained, would become a component. Here are some examples:
The Trashcan appears as an icon. But it has a lot of code that makes it work. If that code where in the main application file, it would become very messy. It is certainly possible to keep the code in the main file, but I wanted the Trashcan to handle its own affairs, so it became a component.
The Favorites component extends Tile, but is placed within a Panel which is declared in the main application file. I decided that even if Favorites + Panel became its own component, the management and display of the Favorite images required its own component. The same is true for the Gallery.
Once I started getting results back from Flickr, I knew I wanted to show a ProgressBar. One way to do that is to tell the progress bar, manually, when to advance itself. But the ProgressBar can be given a dataProvider object as long as that object has a
bytesTotal method and dispatches “complete” and “progress” events. Since the ProgressBar would track the loading of the images from Flickr, I used the fact that the Gallery was already a component and just added the missing pieces. Now the Gallery can be a dataProvider to a ProgressBar. This is a really good demonstration of the loose coupling technique.
The SearchHistory is just an extension of the DataGrid but with some added functions. It has the ability to load and save its contents to the SharedObject (see the
com.macromedia.flickr.UserData class). There is also a function that makes sure only unique criteria are added (and then saved).