Flex 1.5 Flickr PhotoSearch Application

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.

Download the code here

Notes

Flickr

One of the most challenging aspects was logging into Flickr. You will find this all taken care of for you in the com.macromedia.flickr.Flickr class. Flickr also requires you to use an MD5 encoder. I found a Javascript version (sorry, I have already forgotten where I got it), but it was very easy to turn it into the com.macromedia.flickr.MD5 class.

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.

Effects

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.

Components

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 bytesLoaded and 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).

20 Responses to Flex 1.5 Flickr PhotoSearch Application

  1. AndyC says:

    Peter
    On launch I just get a small amount of the application at top of page with a

    “This application requires your authorization before it can read or modify your photos and data on Flickr.”

    covering it

  2. Peter Ent says:

    You are probably using FireFox. When I tried to launch it on FireFox, I got the same thing. This is a known issue. For some reason, specifying a width and height of 100% causes FireFox to display just a portion of a Flex application. The solution (for now) is for me to specifically set the width and height. For now, try and use IE if possible.

  3. fenin says:

    I am using Linux.I believe in using only Firefox.Why should you “force” me and other firefox users to use IE?
    Its just a matter of changing the height property(u can keep width as 100%).Why dont you do that?
    Am I being rude?!

  4. Peter Ent says:

    I modified the HTML wrapper page and it should now work for FireFox (at least it works for me now). My apologies.

    One of the goals of my project was to encounter problems customers face and to resolve them. This is one of those issues. While we claim to be ‘browser independent’ with Flex and Flash, the truth is that not all browsers implement ‘standards’ the same way.

    I wound up using the HTML that Flex automatically generates when you request an MXML file as my template.

    I hope this now works for everyone.

  5. fenin says:

    Wow!Peter,you are the man.

  6. felix says:

    The authorization process is broken for me. I’m wondering why you need to do authorization at all?

    I logged into my Yahoo account and returned to the app and got: “108:Invalid frob…” (IE/PC).

  7. Peter Ent says:

    You do not need authorization at all; that was my misunderstanding of the Flickr service when I started this application. I’ve since learned that for this app, authorization is unnecessary.

    But I have not changed this code base yet. Once I publish the Flex 2 version (which doesn’t use authorization), I’ll change this code as well.

    Thanks for your patience.

  8. I tried viewing this in Firefox under Linux (Debian and Suse) and the width of the flash player seems to be shorten! E.g. I can only see part of the application.

    I assume this has something to do with the ‘standards’ being different on Linux. But how do I fix this? Is there a solution for this

  9. Peter Ent says:

    I thought I fixed the Firefox issue. Did you launch the version at the top of this article or did you build it yourself? If you did the latter, then you must use the HTML wrapper Flex generates. That’s how I (supposedly) solved this problem – I took the Flex-generated HTML wrapper and used it to launch the application from here.

  10. Mitra says:

    please send me jennifer lopez picture. Thank you.

  11. I launched the application from the version above using Firefox 1.0.6 in Suse Linux 10.0. I still get the same problem.

    Kam.

  12. Rajesh says:

    hey i am getting an error saying..
    could not to a component implementation
    <mx:Link icon=”@Embed(‘assets/search_icon.gif’)”
    click=”searchFromPage()” id=”goButton2″ enabled=”false”

  13. Peter Ent says:

    At first I thought you might be using Flex 2 on this, which would give you tons of errors and warnings. But now that I realize you are using Flex 1.5, my suggestion is to change the embed to be “/assets/…” and not “assets/…” and see what that does.

  14. izle says:

    Thanks for tutorials

    great service

  15. hari says:

    When I click ‘authorize’ a message box with message “could not retrieve data” appeared. Did the target url change??

  16. Peter Ent says:

    I modified this code for Flex 2, Beta 2 (see http://weblogs.macromedia.com/pent/archives/2006/04/updated_flickr.cfm) and have not modified it for Flex 2.0.1; so I’m not sure if this would be a problem with a Flickr account or with incompatabilities with Flex 2.0.1. It is on my to-do list.

  17. suneel says:

    hi,
    i am getting error like:
    ” Could not resolve to a component implementation”
    <mx:Link
    id=”minmax”
    tabIndex=”70″
    x=”{width – minmax.width – 30}”

    error is showing at id place. i m using flex 2.
    so plz help me

  18. Peter Ent says:

    You should use the code I’ve already ported to Flex 2; if you try to port this 1.5 code you will learn alot, but it will also be frustrating. Check the rest of my blog for the Flickr 2 version. The comment above yours gives the URL; I still haven’t certified it for Flex 2.0.1, I’m afraid.

  19. jagannath says:

    hello this is jagannath. can you give me source code and demo file for photo gallery or image gallery which have uploading image functionality, adding new image functionality to that gallery, add to cart functionality, and deleting a image from photo galley functionality. i am doing a flex application which is for image gallery.
    please can you help me and send me source coad and example for this. i beg you.
    ———-
    Peter: I would if I had the code to do that, but I don’t. You should look at the FileReference class for uploading, DataGrid and ArrayCollection to make a cart.