Ext

With the growing popularity of Web 2.0, more companies are providing public APIs for developers to create new and exciting compilations. These APIs can be used to grab small snippets of content which can be used in an application or site. Commonly referred to as a mashup, content from different sources are collected and presented to the user in a single interface. By aggregating the data in a single place, users remain on your site and need not be inconvenienced by multiple interfaces.

Flickr is a popular image sharing management tool. Amongst a number of services, it allows users to create online photo albums and the ability to categorize and tag photos. In this post we’ll look at retrieving data from Flickr by extending Ext’s native data package to display an image gallery. The image gallery widget will support the ability to search images based on how they are tagged inside Flickr.

Getting Started

To begin using the Flickr web services, we need to get an API key. The API key is sent with all requests and is used to identify the caller. Instructions on obtaining a key can be found here (there is no cost to get one). Once we have our key, we can look at the various methods the service exposes to us, which can be broadly classified as blog information, user information, contact information and photos. It is important to note that a lot of the methods in the Flickr API require authentication via a username and password. In our example, we will be using a public method only, which can be run without needing to be authenticated.

Cross domain restrictions and workarounds

Due to security restrictions in web browsers, Ajax requests can only be made to the domain of origin. Practically, this means we can’t make a call to another domain to request data. This poses a problem for building our image gallery. Enter Ext.data.ScriptTagProxy! ScriptTagProxy uses a technique called JSONP or JSON with padding that bypasses cross-domain restrictions by using script tags to transport data. It works by dynamically creating a new function in the window scope of the document. It then injects a script tag into the head of the document pointing at the remote resource with a url parameter of the name of the function it just created. The server-side must then use this url parameter to wrap around an object literal. Check out the Ext documentation for a Java Example.

Helper Classes

For the image gallery, I’ve written 2 small classes to assist with loading data from Flickr. The first is the FlickrProxy, which handles simple tasks like appending the api key and the method to each request. The second class is the FlickrPhotoReader, which defines the response format of photos. There are a number of different objects that get returned, so additional readers could be created for that purpose. The other class created is a FlickrWindow class. It is used to do basic paging operations and handle searching for images by tags.

Putting It All Together

Now we have all our components, we can use our new gallery. The code to create it is as follows:

var store = new Ext.data.Store({
    reader: new Flickr.FlickrPhotoReader(),
    proxy: new Flickr.FlickrProxy({
        apiKey: 'd4396e08e2a00f2c913d1fe5aa040c16',
        method: 'photos.search'
    })
});
 
var win = new Flickr.FlickrWindow({
    store: store,
    width: 400,
    height: 400
});
win.show();

The example code has been packaged as a zip and is available here.

After populating our data store, we can now navigate between the images. Some images are available in multiple sizes. You can use the image menu drop down to select what size you’d like displayed. If an image is not available in the size you have chosen you will receive a white image back with the text “This photo is currently unavailable.”

Next Steps

This example only uses a very small portion of the Flickr API. You can use the FlickrProxy as a base for accessing other methods offered in the Flickr API. The methods which require user authentication could prove to be particularly interesting for those of you who use Flickr on a regular basis. We’re always amazed at the wealth of talent and creativity in the Ext community and would love to see what you can create withthis small stepping stone into Flickr’s data services.

This entry was posted on Friday, October 17th, 2008 at 12:25 am and is filed under Ext JS. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.