Tuesday, January 31, 2006

Flex 2.0 FlickrService (Beta)

I'm planning on developing a Flash application that makes use of Flickr images and their open API. Partly inspired by Flashr, I've created an API in AS3 to get me started. It was a nice learning exercise and a good way for me to test all the new Flex 2 stuff.

The key bits of the library are the Flickr: Service, Operation, Decoder and Manager.

The FlickrService is essentially the core that bridges into the Flickr API. You won't be calling FlickrService.groups.pools.getPhotos () however, instead, methods like getGroupPoolPhotos have been created. You can always call getOperation ('groups.pools.getPhotos') if you need to, for example if a new method is added to Flickr but is not present in the service.

A FlickrOperation is an HTTPService that pulls its information from a FlickrService to allow signing, authentication and various other added capabilities.

The FlickrDecoder is the default method of decoding the XML result from Flickr. The decoder has some built in functionality that also batches the decoding of the results; this is to help in the case of slower machines that might freeze when decoding large amounts of data.

The final bit is the FlickrManager that houses all of the result objects from various calls. This is to allow the management and data population of single objects and to maintain their relationships with each other.

I've got everything all packaged up and working with the new Flex 2 Beta. I'm still making changes but everything seems to be working well so far... While the library source is ASDoc-ed there is no separate documentation.

FlickrService Library: SWC | View and Download Source

gSOLO Global Library: SWC | View and Download Source

A collection of miscellaneous classes used by the FlickrService.

FlickrService Tests and Examples: View and Download Source

Outside of the auth test, the examples are pretty well undocumented. I'll write up some info or get to that sooner or later.

  • flickr.as - Plug your API key in here along with your shared secret if you plan on doing any authentication. This is the service used for all of the tests.

  • FlickrAuthTest.mxml - An application to illustrate how to go about authenticating a user and storing that information for future use.

  • FlickrCategoryBrowseTest.mxml - A simple Flickr category browser / group photo pool display. Makes use of the ITreeDataDescriptor interface to format a Tree.

  • FlickrEchoTest.as - A quick test to make sure your API key is working. Simply echoes some values to the flickr API.

  • FlickrPhotoSearchTest.mxml - An application put together to test binding, states and the general separation of view and controller. It searches and displays photo information too...

  • FlickrSearchInfoTest.mxml - Given an array of tags, this application will test the Flickr API by pulling a list of photos and the information for each photo returned. Just a stress test of sorts.

  • FlickrServiceTest.mxml - Flickr result tester. Tests all of the Flickr apis and allows you to traverse through the various relationships between the decoded results. Just login, move to the Users tab and start clicking on all of the various List that are displayed.

  • FlickrTagSearchTest.mxml - A very quick tag search application. See the example below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2005/mxml" xmlns="*"
viewSourceURL="srcview/index.html" creationComplete="init (event)">
import com.gsolo.collections.PartialCollection;
import com.gsolo.flickr.photos.Photo;
import com.gsolo.flickr.rpc.FlickrService;

import flash.events.Event;

import mx.rpc.events.ResultEvent;

public const flickr:FlickrService = new FlickrService ("API_KEY");

public function init (event:Event):void {
flickr.addEventListener (ResultEvent.RESULT, searchResult);

public function search (event:Event):void {
flickr.searchPhotos ({tags:tags_txt.text}, null, page_nstep.value);

public var photos:PartialCollection;

public function searchResult (event:ResultEvent):void {
photos = PartialCollection (event.result);
<mx:Label text="Tags:" />
<mx:TextInput id="tags_txt" enter="search (event)" change="page_nstep.value = 1;" />
<mx:NumericStepper id="page_nstep" minimum="1" maximum="{photos.totalIndices}" />
<mx:Button id="search_btn" label="Search" click="search (event)" />
<mx:Panel id="result_panel" title="Result Panel" width="100%" height="100%">
<mx:Tile id="result_tile" width="100%" height="100%">
<mx:Repeater id="result_repeater" dataProvider="{photos}">
<mx:Image source="{result_repeater.currentItem.getURLString ('t')}"
toolTip="{result_repeater.currentItem.title}" />

If you check it out, let me know that you think.


Post a Comment

<< Home