Flex HTTPService - Retrieving Data From Flickr

There are many ways to retrieve data in Flex, one of the easiest and most used methods is utilizing the HTTPService component. Explaining how to use this object to gather photos from Flickr is exactly what this tutorial is about. Included is an explanation of how we can send requests and handle their results using simple http web requests.

Before we get started let's take a look at the example we are going to build. The little demo below is a very simple application that does a couple things. First it will search Flickr for the top 15 images with the tag in the top text box and will load these into the list below. It will also retrieve the tags related to the top tag and load them into the combobox. If you click the search related button it will get the images for the selected related tag. Finally, if you select one of the images in the list it will display it on the right hand side.

Well, what are we waiting for let's get started. In order to create an application that uses the Flickr api you need an api key, this can be obtained over at the Flickr API page, at the top there is a link to apply for a key. The first piece of code we are going to put in is the basic interface. This includes the main application tag along with a few other items.

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" width="500" height="278">
  <mx:Label x="10" y="10" text="Tag"/>
  <mx:TextInput x="44" y="8" width="278" id="tagSearchTxt" text="ireland"/>
  <mx:Button x="330" y="8" label="Search Tag" />
  <mx:Label x="10" y="40" text="Related Tags"/>
  <mx:ComboBox id="relatedTagList" x="97" y="38" width="225"/>
  <mx:Button x="330" y="38" label="Search Related Tag"/>
  <mx:List x="10" y="68" width="272" height="200" id="photoList"
    labelField="title"/>
  <mx:Image x="290" y="68" width="200" height="200" id="photo" 
    horizontalAlign="center" verticalAlign="middle"/>
</mx:Application>

Above you can see we have a few components, most of them are pretty self explanatory. The TextInput is the tag that we use to search for images and related tags, right now it's defaulted to ireland - something nice and friendly. The ComboBox displays the related tags. The List shows the images for a tag and the Image tag shows the image from Flickr, of course.

To make things more interesting let's start adding a bit of functionality. To do this we are going to have to add a few new items. The first is going to be the HTTPService tag to call the Flickr API to get related tags. We set the url endpoint to be the path to the Flickr function we are trying to call. I also personally like to set the resultFormat to object when dealing with well formed XML because Flex will automatically decode the XML as appropriate objects. The only other properties we need to set are the event handlers for result and fault. The following piece of code goes inside our main application.

<mx:HTTPService
  id="tagRelatedSearch"
  url="http://api.flickr.com/services/rest/?method=flickr.tags.getRelated" 
  resultFormat="object" 
  result="tagRelatedSearchResult(event)" fault="fault(event)" />

We now need to create the event handling functions, this means we need a Script tag. Below is the code for handlers.

<mx:Script>
<![CDATA[
  import mx.collections.ArrayCollection;
  import mx.controls.Alert;
  import mx.rpc.events.FaultEvent;
  import mx.rpc.events.ResultEvent;

  [Bindable]
  private var relatedTags:ArrayCollection;

  private function tagRelatedSearchResult(re:ResultEvent):void
  {
    relatedTags = re.result.rsp.tags.tag;
  }

  private function fault(fe:FaultEvent):void
  {
    Alert.show(fe.fault.message);
  }
]]>
</mx:Script>

As you can see above the code to handle getting the results from Flickr is very simple. The only thing we need to know is the path which we can get either from the debugger or the Flickr API documentation. We also added an ArrayCollection to hold our list of related tags. But we have no way of actually sending the request, well that is another simple task. We create another function to take care of this.

private var key:String = "your_api_key_here";

private function doTagRelatedSearch():void
{
  var params:Object = {};
  params.tag = tagSearchTxt.text;
  params.api_key = key;
  tagRelatedSearch.send(params);
}

The above function is pretty simple. We have some additional parameters which need to be sent so we wrap them up in an object. To actually send the the request we use the send function on the HTTPService object. To call the function we add some code to the enter (called when Enter button is clicked inside the text input) event on the text input and the click event on our search tag button.

<mx:TextInput x="44" y="8" width="278" id="tagSearchTxt" text="ireland" 
  enter="doTagRelatedSearch();"/>
<mx:Button x="330" y="8" label="Search Tag" 
  click="doTagRelatedSearch();"/>

To display the results we simply set the dataProvider to the relatedTags object as seen below.

<mx:ComboBox id="relatedTagList" x="97" y="38" width="225" 
  dataProvider="{relatedTags}"/>

We follow the same basic procedure for getting the list of images. We add another HTTPService.

<mx:HTTPService
  id="tagImageSearch"
  url="http://api.flickr.com/services/rest/?method=flickr.photos.search" 
  resultFormat="object" 
  result="tagImageSearchResult(event)" fault="fault(event)" />

There are also a couple more actionscript functions that need to be added to handle sending a request for images and handling the result.

[Bindable]
private var photos:ArrayCollection;

private function doTagImageSearch(tag:String):void
{
  var params:Object = {};
  params.tags = tag;
  params.api_key = key;
  params.per_page = 15;
  tagImageSearch.send(params);
}

private function tagImageSearchResult(re:ResultEvent):void
{
  photos = re.result.rsp.photos.photo;
}

There is not a new fault handler because we used the same one from before. To display the results we bind the dataProvider property on our list to the photos.

<mx:List x="10" y="68" width="272" height="200" id="photoList"
  dataProvider="{photos}" labelField="title"/>

Sending the actual request is done through a few methods, by pressing enter in the text input or by clicking either of the search buttons. You should have noticed the image search function takes the tag to use in the search. To search for the images we add calls to the request function.

<mx:TextInput x="44" y="8" width="278" id="tagSearchTxt" text="ireland" 
  enter="doTagRelatedSearch();doTagImageSearch(tagSearchTxt.text);"/>
<mx:Button x="330" y="8" label="Search Tag" 
  click="doTagRelatedSearch();doTagImageSearch(tagSearchTxt.text);"/>
<mx:Button x="330" y="38" label="Search Related Tag" 
  click="doTagImageSearch(relatedTagList.selectedItem as String)"/>

The final thing we need to do is set the source on the image when one of the images in the list is clicked. The correct url can be obtained from the Flickr Url Documentation The updated list is below.

<mx:List x="10" y="68" width="272" height="200" id="photoList"
  dataProvider="{photos}" labelField="title" 
  change="showPhoto()" />

The showPhoto function simply sets the source on the image. It takes the selectedItem and uses several properties on it to create the correct url.

private function showPhoto():void
{
  var p:Object = photoList.selectedItem;
  photo.source = "http://farm" + p.farm + 
                 ".static.flickr.com/" + p.server + 
                 "/" + p.id + "_" + p.secret + "_m.jpg";
}

With that all that is left is to show the entire source.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute" width="500" height="278">
  <mx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.rpc.events.FaultEvent;
      import mx.rpc.events.ResultEvent;

      private var key:String = "your_api_key";

      [Bindable]
      private var relatedTags:ArrayCollection;

      [Bindable]
      private var photos:ArrayCollection;

      private function doTagRelatedSearch():void
      {
        var params:Object = {};
        params.tag = tagSearchTxt.text;
        params.api_key = key;
        tagRelatedSearch.send(params);
      }

      private function doTagImageSearch(tag:String):void
      {
        var params:Object = {};
        params.tags = tag;
        params.api_key = key;
        params.per_page = 15;
        tagImageSearch.send(params);
      }

      private function showPhoto():void
      {
        var p:Object = photoList.selectedItem;
        photo.source = "http://farm" + p.farm + 
                       ".static.flickr.com/" + p.server + 
                       "/" + p.id + "_" + p.secret + "_m.jpg";
      }

      private function tagRelatedSearchResult(re:ResultEvent):void
      {
        relatedTags = re.result.rsp.tags.tag;
      }

      private function tagImageSearchResult(re:ResultEvent):void
      {
        photos = re.result.rsp.photos.photo;
      }

      private function fault(fe:FaultEvent):void
      {
        Alert.show(fe.fault.message);
      }
    ]]>
  </mx:Script>
  <mx:HTTPService
    id="tagRelatedSearch"
    url="http://api.flickr.com/services/rest/?method=flickr.tags.getRelated" 
    resultFormat="object" 
    result="tagRelatedSearchResult(event)" fault="fault(event)" />
  <mx:HTTPService
    id="tagImageSearch"
    url="http://api.flickr.com/services/rest/?method=flickr.photos.search" 
    resultFormat="object" 
    result="tagImageSearchResult(event)" fault="fault(event)" />
  <mx:Label x="10" y="10" text="Tag"/>
  <mx:TextInput x="44" y="8" width="278" id="tagSearchTxt" text="ireland" 
    enter="doTagRelatedSearch();doTagImageSearch(tagSearchTxt.text);"/>
  <mx:Button x="330" y="8" label="Search Tag" 
    click="doTagRelatedSearch();doTagImageSearch(tagSearchTxt.text);"/>
  <mx:Button x="330" y="38" label="Search Related Tag" 
    click="doTagImageSearch(relatedTagList.selectedItem as String)"/>
  <mx:Label x="10" y="40" text="Related Tags"/>
  <mx:ComboBox id="relatedTagList" x="97" y="38" width="225" 
    dataProvider="{relatedTags}"/>
  <mx:List x="10" y="68" width="272" height="200" id="photoList"
    dataProvider="{photos}" labelField="title" 
    change="showPhoto()" />
  <mx:Image x="290" y="68" width="200" height="200" id="photo" 
    horizontalAlign="center" verticalAlign="middle"/>
</mx:Application>

As easy as it is to use the HTTPService the component is one of the most useful found in the framework. With that this tutorial is pretty much a wrap. I hope you found the tutorial informative and interesting.

Source Files:

• main.mxml