Dr. Winston Prakash Ph.D. 

Personal Website

Creating a Flickr enabled Visual Web Application

As mentioned in it's web site, Flickr - almost certainly the best online photo management and sharing application in the world. It is becoming popular to mash up your own photos or other's public pictures from Flickr in to your own web application. Flickr exposes rich sets of open API via Web Services, which allows you to write your own program to fetch Flickr data such as photos, tags, groups and profiles.  

In this article, I'll explain how to fetch data from Flickr using a proxy client library and displaying the data in a Visual Web Application page. We can do lots of cool things with Flickr data. To keep it simple, in this tutorial, I'll explain how to obtain photos corresponding to a certain tag and displaying the square thumbnails as a grid using  GridPanel Component of Netbeans 6.0 Visual Web  tool.

Download: Zip containing both the project - flickr_app.zip

Creating the Flickr Client Library

Flickr Service API consists of Web Service end points and set of callable methods with several Request/Response formats. I've chosen Flick REST service for this article.

  • Create Flickr Client Library Project
    • Click on the Create project icon in the toolbar (second button)
    • Select General -> Java Application
      • Project Name: FlickrCientLibrary
      • Package: com.sample.lib.flickr
  • Create the Class FlickrClient.java. This acts as the main entry point in to the library. This is a factory class and an instance of it is created passing a Flickr API key. The main methods of this class are
    • constructFlickrRequestUrl (private) - Construct the REST Request URL passing one of the Flick API methods and its parameters.  It returns the URL object.
    • getFlickrData (private) - This method actually executes the request.  The trick used in this method is to pass the InputStream obtained from the constructed URL directly to JAXP DocumentBuilder  and ask it to fetch and parse the document. We don't have to worry about the network communication.   DocumentBuilder  will take care of every thing for us. The parser returns the W3C Document object.
    • getPhotosByTag - This method constructs the REST URL using the Flickr API method flickr.photos.search and parameters
      • API Key
      • No of photos per page.
      • Page number.
      and using the getFlickrData method obtains the  W3C Document corresponding the response from the Flickr Service. This method returns the FlickrPhotoList (see below) object.
    • getRecentPublicPhotos - Returns the FlickrPhotoList  object which contains the list of recent photos published by Flickr users. The method sends Flickr Request with the method flickr.photos.recent and parameters
      • API Key
      • No of photos per page.
      • Page number.
  • Create the class FlickrPhoto.java, corresponding to a <photo> XML element returned by the Flickr Service Response. One important attribute of <photo> element is photo_id. The three important methods of this class are
    • getPhotoSizes - This method sends a Flickr Request using the Flickr API method flickr.photos.getSizes and parameters - API Key and photo_id.  The Response contains list of different sized images of the photo stored in the server, their URL and sizes.
    • getImageURL - This method is called passing a key for the size of the required image. The key is usually one of Square, Thumbnail, Small, Large, Medium or Original. The URL of the required size image is returned if available.
    •  getTitle - Title of the Flickr photo is returned.
  • Create the class FlickrPhotList.java which represents the <photos> XML element, returned as response to Flickr API methods such as  flickr.photos.search or flickr.photos.recent. The W3C Document returned by FlickrClient.getPhotosByTag() is passed as an argument to its constructor. Two of the methods of this class are
    • getCount - Returns the number of Flickr Photos in this list.
    • getPhoto - This method is called passing an index and the method returns the FlickrPhoto object.

Creating the Flickr enabled Visual Web Application

Armed with the Flickr Client Library, now we are ready to fetch the Flickr photos and display them in our web application. 

  • Click on the Create project icon in the toolbar (second button)
  • Select Web -> Visual Web Application
    • Project Name: FlickrWebApp
    • Package: com.sample.web.flickr
  • Add the project FlickrCientLibrary as dependent project to Web Project
    • Right Click on the project node and select "properties"
    • In the dialog click on the "Library" node in the left
    • In the right hand side click on the add project and select the location of "FlickrCientLibrary"
  • Create the simple fetch UI
    • Drag and drop a GridPanel componet and set its column property values as 3. Drop the following three component on to to the GridPanel
      • Label - Set its text property value as  "Flickr Tag"
      • TextField - This field is where you will enter the tag name. Set its text property value as "tiger".
      • Button -  Set its text property value as "Fetch".
      • Drag and drop a Message Group component.
    • Drag and drop another GridPanel and sets its column property values as 5. We will be using this Grid Panel to dynamically display the photos obtained from Flickr in two rows of 5 photos per row.
    • Double click on the Button and enter the following code to fetch the Photos corresponding to the tag and display it in the Grid Panel. 
      public String button1_action() {
  try{
    // You must get your own Flickr API key registering at
    // http://www.flickr.com/services/api/misc.api_keys.html
    // Following is a temporary key which may not work later.
    FlickrClient flickrProxy = FlickrClient.createInstance(
                          "0d9d5b77fc42c97d5058ad147f4d708a");
    gridPanel2.getChildren().clear();
    FlickrPhotoList photoList = flickrProxy.getPhotosByTag(
                             (String) textField1.getText(), 1);
    for (int i = 0; i < photoList.getCount(); i++) {
      FlickrPhoto photo = photoList.getPhoto(i);
      ImageComponent image = new ImageComponent();
      image.setUrl(photo.getImageUrl(FlickrPhoto.SQUARE));
      gridPanel2.getChildren().add(image);
    }
  }catch (Exception ex) {
      error(ex.getMessage());
  }
  return null;
}

That is it. Your Flickr enabled Visual Web Application ready. Execute the application, enter a tag and click on the "Fetch" button. Viola! your web page is filled with photos from Flickr as shown below. 

Flickr Enabled Webpage