Simple Flickr Flex application

I wanted to build a simple Flex application that would get photos from the Flickr Service, but most of the tutorials that i found on the web they build a very complicated full fledged application, so i built this simple application, which gets the recently added photos from Flex and displays them in simple layout. This demo application covers basic pattern for using Flickr service from Flex and once you get basics you should be able to modify it for adding other calls.



I am using As3FlickrLib library for building my code,

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" 
   minHeight="600" creationComplete="init()">
  <fx:Script>
    <![CDATA[
      import adobe.utils.CustomActions;
      import com.adobe.webapis.flickr.AuthPerm;
      import com.adobe.webapis.flickr.FlickrService;
      import com.adobe.webapis.flickr.PagedPhotoList;
      import com.adobe.webapis.flickr.Photo;
      import com.adobe.webapis.flickr.events.FlickrResultEvent;
      import mx.collections.ArrayCollection;
      import mx.collections.ArrayList;
      import mx.logging.Log;
      import mx.logging.LogEventLevel;
      import mx.logging.targets.TraceTarget;
      public var flickr:FlickrService = new FlickrService("ReplaceWithYourFlickerKey");
      private function initLogging():void {
        var logTarget:TraceTarget = new TraceTarget();
        logTarget.level = LogEventLevel.ALL;
        Log.addTarget(logTarget); 
      }
      public function init():void{
        initLogging();
        trace("After enabling logging");
        flickr.secret=""ReplaceWithYourFlickerSecret"";
        flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, onGetFrob);
        flickr.auth.getFrob();
      }
      public function onGetFrob (event : FlickrResultEvent) : void{
        if (event.success){
          var frob : String = event.data.frob as String;
          var authURL : String = flickr.getLoginURL (frob, AuthPerm.READ);
          flickr.addEventListener(FlickrResultEvent.PHOTOS_GET_RECENT,showRecent);
          flickr.photos.getRecent();
        }
      }
      public function showRecent(e:Object):void{
        trace("Inside showPhotoDetail "+ e)
        var photoList:PagedPhotoList = e.data.photos;
        trace("Paged Photo List "+ photoList);
        var photos:ArrayList = new ArrayList();
        for( var i = 1 ; i < 40 ; i++){
          var photo:Photo = photoList.photos[i];
          var photoUrl:String ='http://static.flickr.com/' + 
    photo.server+ '/' + photo.id + '_' + photo.secret + '_t.jpg';
          trace(photoUrl);
          photos.addItem(photoUrl);
        }
        imageDisplay.dataProvider = photos;
      }
    ]]>
  </fx:Script>
  <fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
  </fx:Declarations>
  <s:Panel x="0" y="0" width="600" height="500" title="Flickr Demo">
    <s:List id="imageDisplay"  width="530" 
      height="400"  x="0"  y="0"> 
      <s:layout> 
        <s:TileLayout requestedColumnCount="5"  requestedRowCount="8" 
          horizontalGap="2" verticalGap="2"/> 
      </s:layout> 
      <s:itemRenderer> 
        <fx:Component> 
          <mx:Image source="{data}" 
                height="100" width="100" /> 
        </fx:Component> 
      </s:itemRenderer> 
    </s:List>
  </s:Panel>
</s:Application>

In order to use Flickr Service you will need a Flickr API key, you can get it from here , once you have it, you can replace the ReplaceWithYourFlickerKey in sample code with your key and ReplaceWithYourFlickerSecret in sample code with your secret.

Before you start using FlickrService you will have to authenticate with the service, you can do that by using following code

public var flickr:FlickrService = new FlickrService("ReplaceWithYourFlickerKey");
flickr.secret="ReplaceWithYourFlickerSecret";
flickr.addEventListener (FlickrResultEvent.AUTH_GET_FROB, onGetFrob);
flickr.auth.getFrob(); 

Create object of FlickrService by passing your developer key, then set the secret property equal to value of secret you got from Flickr, Once that is done add a event listener for FlickrResultEvent.AUTH_GET_FROB and call the flickr.auth.getFrob(), this will result in Authentication call being made to Flickr Service, with your key and secret and the response will return a frob value like this

Request
http://api.flickr.com/services/rest/?api_key=yourkey&method=flickr.auth.getFrob&api_sig=secretinencodedformat&
Response
<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<frob>72157623957288592-f1571eccb125f756-29961</frob>
</rsp>

After you get response for the frob, you can start making the actual calls to get data from service, in my case i wanted to keep this application very simple so i am making call to get all the recent additions to flickr and displaying it using this code

public function onGetFrob (event : FlickrResultEvent) : void{
  if (event.success){
    var frob : String = event.data.frob as String;
    var authURL : String = flickr.getLoginURL (frob, AuthPerm.READ);
    flickr.addEventListener(FlickrResultEvent.PHOTOS_GET_RECENT,showRecent);
    flickr.photos.getRecent();
  }
}
public function showRecent(e:Object):void{
  trace("Inside showPhotoDetail "+ e)
  var photoList:PagedPhotoList = e.data.photos;
  trace("Paged Photo List "+ photoList);
  var photos:ArrayList = new ArrayList();
  for( var i = 1 ; i < 40 ; i++){
    var photo:Photo = photoList.photos[i];
    var photoUrl:String ='http://static.flickr.com/' + 
 photo.server+ '/' + photo.id + '_' + photo.secret + '_t.jpg';
    trace(photoUrl);
    photos.addItem(photoUrl);
  }
  imageDisplay.dataProvider = photos;
}     

As you can see after getting authentication i am attaching event listener for FlickrResultEvent.PHOTOS_GET_RECENT event and then making call to get flickr.photos.getRecent() recent photos, This results in following HTTP request to flickr service

http://api.flickr.com/services/rest/?api_key=apikey&method=flickr.photos.getRecent&extras=&per_page=100&page=1&


And response is XML feed with information about recently added photos like this

<?xml version="1.0" encoding="utf-8" ?>
<rsp stat="ok">
<photos page="1" pages="10" perpage="100" total="1000">
  <photo id="4563046917" owner="19673208@N08" secret="2e8188f6e7" server="4052" 
  farm="5" title="DSCN0379" ispublic="1" isfriend="0" isfamily="0" />
  <photo id="4563047015" owner="8867627@N07" secret="16e4c986a6" server="3375" 
  farm="4" title="red blossom" ispublic="1" isfriend="0" isfamily="0" />

I am iterating through the feed and creating URLs to the photos.

Note: If you want to call any other method of FlickrService you can find the corresponding Event name and method name and use them to call the service