Adobe AIR article

Flickr Floater: Building an Adobe AIR application with Flex 3

Scoping and designing Flickr Floater

OK, so this is "yet another Flickr application" (YAFA), but there's good reason to choose the Flickr API for this sample application. Flickr Floater uses key Adobe AIR features, including:

• The embedded SQLite database
• Online/offline connectivity detection
• File management
• Drag-and-drop support
• Native menus

Also, the Flickr API offers developers full access to a user's account through HTTP calls and is well documented with plenty of sample code. What's more, developing Flickr applications is an easy process for Flex developers through a freely available Flickr ActionScript 3 library that leverages the Flickr API.

Flickr Floater was conceived and coded for this article in a relatively short amount of time. Like many projects it started off with familiar "must have", "would like to have", and "if I have the time" lists. Needless to say, during the development process the lists themselves changed numerous times.

Note: Although I acknowledge the value of design patterns to application structure and development, for the sake of brevity I decided not to use a formal pattern for this application with the exception of some snippets of code to speed the development process—particularly in the Flickr authentication process and with assisting in persisting data between the various components within the application. Flickr Loader relies on calls to Flickr to upload photographs and retrieve information, therefore it would be best served by an MVCS (Model View Controller Service) pattern like Cairngorm or the MVCS architecture offered by Joel Berkovitz in his article, An architectural blueprint for Flex applications.

The Flickr API and the necessity for an authentication key

Flickr is one of the most popular online social applications today, offering photo sharing to the masses and enabling users to tag items so they can be easily categorized.

The folk at Flickr have also made their application available to developers through an API that is free to use for personal projects. To get started you need a free authentication key. This is necessary for your application to work, as the key and its matching shared secret are part of the authentication process (see Figure 2). You'll need to apply for keys on an application-by-application basis.

Figure 2. You need a free authentication key to get access to the Flickr API.

The Flickr API enables you to build applications that utilize information about your:

• Photos (including how often they have been viewed and what people are saying about them)
• Photosets
• Groups
• Contacts

The application will need to have the user grant permission to access his or her Flickr account before it can make any calls to the API. After that the application can do its thing.

Leveraging existing ActionScript libraries

Flex has a number of classes to access types of data and objects remotely. A service would need to be established to handle the application's requests to the Flickr API. That would in turn need to have methods established to handle the various calls that the application would make to send and receive data. The good news is that someone has done that for you already.

A collective of developers has already built an ActionScript 3.0 library to communicate with the Flickr API, this is a perfect fit for our application. The library is available in two forms: as a compiled SWC and as a library of classes. Both are bundled in a single download from a Google code project, which also includes documentation. At the time of publishing, the SWC has buggy upload code, so I used the individual classes instead. The authors of this library have also created a library of ActionScript 3.0 utilities that may prove to be useful to the type of application you're building. These utilities are also available from Google code.

The First Processes: Talking to the system

User interface design considerations aside the application needs to be able to communicate with Flickr before you can start to use online data. If it were a commercial product the application would have its own permanent API key. For this example, I'm going to require users to register on their own with Flickr, then get them to enter that information into the application for use as part of all calls that the application will make to the API.

The common approach is to create a process where the user is required to enter the key and its shared secret through a form. The two values are then stored as part of a structured application variable.

I do that, using the embedded SQLite database that was introduced with the first Adobe AIR beta release. The application will then read those variables each time it launches, storing them temporarily in memory for use during operation, and writing them back to the database each time they change.

I also need a form to accept details for both the API key and the shared secret to establish contact with the Flickr API. They'll be passed across to retrieve a token, which is required for the authentication process.

First I send the API key and shared secret together in a single call to Flickr and wait for a response. Then I call the API again. This, in turn, opens a browser window so that I can display a page on the Flickr site, which informs the user that they need to grant the application permission to communicate with Flickr.

When approved, the user closes the browser window and confirms with the application that they've done the last step in the process, which enables them to store internal data.

Flickr Floater is now ready for business.

Page 2 of 9

Previous Page

Next Page