Archive

Posts Tagged ‘simple image gallery’

Get recent images uploaded in flickr using flex

May 29, 2009 2 comments

Hi everybody, we have used third party widgets in our blog which shows the recent images of the subscribed URL from flickr, but do you know how it is working ?. If you dont know please trust me, i will tell you how it can be done.

As i said in my previous post, you must know few things about the api which you are going to access

  1. Which api method you are going to access ?
  2. What is the URL of the api method you need to access ?
  3. What are the parameters the api method expects ?
  4. What kind of data the api method returns ?
  5. What can you do with the returned data ?

Here i am going to access the getRecent method of flickr api which will get api key as required parameter and it will return set of XML node. Each XML node represents the details of an image and using those details we can construct the URL of the image where it has been located in flickr. Once we have known the location we could display the image in our widget.

I can sense what is going through your mind right now, i.e. “what is api key ?”, if i am not wrong. ok let me tell you about api key. Anyone who wants to access api method they must have unique identification so that the server can know who wants to access api methods. thats why we need api key and it comes up in two versions. Non commercial key & Commercial key. Non commercial key will be allowed to use by programmers who are not using for commercial product and if you want to get commercial key, you must give some information about the product which want to access api and with prior permission from flickr you can use it.

Finally what we ever need to know is URL of the api method which we are going to access. It can be constructed if you know the api key and method name you are going to access.

http://www.flickr.com/services/rest/?method={method_name_here}&api_key={your_api_key}

Now create HttpService instance, specify URL, result format, event handler function for result and fault property, then invoke the HttpService instance.


<mx:HTTPService url="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key={your_api_key}"
 result="resultHandler(event)" resultFormat="e4x" id="service" fault="faultHandler(event)" method="POST"
 showBusyCursor="true" />

Once the getRecent method has been invoked successfully it will return set of XML node named photo as I have mentioned below.

<photos page="2" pages="89" perpage="10" total="881">
<photo id="2636" owner="47058503995@N01"
		secret="a123456" server="2" title="test_04"
		ispublic="1" isfriend="0" isfamily="0" />
<photo id="2635" owner="47058503995@N01"
		secret="b123456" server="2" title="test_03"
		ispublic="0" isfriend="1" isfamily="1" />
<photo id="2633" owner="47058503995@N01"
		secret="c123456" server="2" title="test_01"
		ispublic="1" isfriend="0" isfamily="0" />
<photo id="2610" owner="12037949754@N01"
		secret="d123456" server="2" title="00_tall"
		ispublic="1" isfriend="0" isfamily="0" />
</photos>

As i have told earlier each photo node represents the details of an image in flickr and we can construct URL of the image using ID, server ID, farm ID and secret property of each photo XML node.

http://farm{farm-id}.static.flickr.com/{server-id}/{id}_{secret}.jpg

Now you know how to construct an URL of image, assign this to the source property of Image tag and it will display it. thats it!!!. How long you will use widgets that others have been developed, just develop your widgets in the way you want. Who knows someone even buy yours.

My simple image gallery

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="service.send()">

 <mx:Script>
 <!&#91;CDATA&#91;
 import mx.collections.ArrayCollection;
 import mx.rpc.xml.SimpleXMLDecoder;
 import mx.rpc.AsyncToken;

 import mx.controls.*;
 import mx.rpc.events.*;
 import mx.effects.easing.*;

 &#91;Bindable&#93;public var p : String;

 &#91;Bindable&#93; public var index : Number = 0;

 &#91;Bindable&#93;public var xmlRes : XML;

 &#91;Bindable&#93; public var ac : ArrayCollection = new ArrayCollection();

 &#91;Bindable&#93; public var imgSource : ArrayCollection = new ArrayCollection();

 &#91;Bindable&#93; public var timer : Timer;

 public function resultHandler(event : ResultEvent):void
 {
 xmlRes = new XML(event.result.photos);

 for each(var x:XML in xmlRes.photo)
 {
 ac.addItem(x);

 var url : String = "http://farm"+ x.@farm +".static.flickr.com/" + x.@server + "/"+ x.@id + "_" + x.@secret+".jpg"

 var obj : Object = {isource : url};

 imgSource.addItem(obj);

 } 

 var farmid : String = ac.getItemAt(index).@farm;
 var serverid : String = ac.getItemAt(index).@server;
 var id : String = ac.getItemAt(index).@id;
 var secret : String = ac.getItemAt(index).@secret;

 var source : String = "http://farm"+farmid+".static.flickr.com/" + serverid + "/"+ id + "_" + secret+".jpg";

 img.source = source;
 panel.title = ac.getItemAt(index).@title;

 img.visible = true;
 img.includeInLayout = true;

 timer = new Timer(10000);
 timer.addEventListener(TimerEvent.TIMER,nextHandler);
 timer.start();

 }

 public function nextHandler(event : Event):void
 {
 index = index + 1;

 if(index < ac.length)
 {
 var farmid : String = ac.getItemAt(index).@farm;
 var serverid : String = ac.getItemAt(index).@server;
 var id : String = ac.getItemAt(index).@id;
 var secret : String = ac.getItemAt(index).@secret;

 var source : String = "http://farm"+farmid+".static.flickr.com/" + serverid + "/"+ id + "_" + secret+".jpg";

 img.source = source;
 panel.title = ac.getItemAt(index).@title;

 img.visible = true;
 img.includeInLayout = true;

 }

 }

 public function faultHandler(event : FaultEvent):void
 {
 Alert.show(event.fault.message);

 }

 public function callService():void
 {
 var asyn : AsyncToken = service.send();
 }

 public function nextClick(event : Event):void
 {
 back.enabled = true;

 if((hList.horizontalScrollPosition + 6) < hList.maxHorizontalScrollPosition)
 {
 next.play(&#91;hList&#93;);
 }

 if((hList.horizontalScrollPosition + 12) > hList.maxHorizontalScrollPosition)
 {
 forw.enabled = false;
 }
 } 

 public function prevClick(event : Event):void
 {
 forw.enabled = true;

 if((hList.horizontalScrollPosition - 6) > 0)
 {
 prev.play(&#91;hList&#93;);
 }
 if((hList.horizontalScrollPosition - 12) < 0)
 {
 back.enabled = false;
 }
 }

 &#93;&#93;>
 </mx:Script>

 <mx:HTTPService url="http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=your_api_key_here"
 result="resultHandler(event)" resultFormat="e4x" id="service" fault="faultHandler(event)" method="POST"
 showBusyCursor="true" >

 </mx:HTTPService>

 <mx:WipeUp id="fade" duration="2000" />

 <mx:Panel id="panel" width="600" height="300">
 <mx:Image showEffect="fade" hideEffect="fade" id="img" width="100%" height="100%" maintainAspectRatio="false" />
 </mx:Panel>

 <mx:HorizontalList id="hList" dataProvider="{imgSource}" columnWidth="100" horizontalScrollPolicy="off" rowHeight="150" width="600" height="150" >
 <mx:itemRenderer>
 <mx:Component>
 <mx:HBox dropShadowEnabled="true" horizontalGap="300" verticalGap="200" >
 <mx:Image  showEffect="" source="{data.isource}" maintainAspectRatio="false" width="100%" height="80%"   />
 </mx:HBox>
 </mx:Component>
 </mx:itemRenderer>
 </mx:HorizontalList>

 <mx:HBox>
 <mx:Button id="back" label="prev" enabled="false" click="prevClick(event)" />
 <mx:Button id="forw" label="next" click="nextClick(event)" />
 </mx:HBox>

 <mx:Sequence id="prev">
 <mx:AnimateProperty property="horizontalScrollPosition"
 fromValue="{hList.horizontalScrollPosition}" toValue="{hList.horizontalScrollPosition - 6}" duration="7000" easingFunction="{Elastic.easeOut}" />
 </mx:Sequence>

 <mx:Sequence id="next">
 <mx:AnimateProperty property="horizontalScrollPosition" easingFunction="{Elastic.easeOut}"
 fromValue="{hList.horizontalScrollPosition}" toValue="{hList.horizontalScrollPosition + 6}" duration="7000"/>
 </mx:Sequence>

</mx:Application>