Archive

Posts Tagged ‘Third party API’

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>

Save bookmark on delicious using flex

May 15, 2009 Leave a comment

Hi, today i come up with interesting blog which explains about how to invoke api methods from flex application. Before that, i want to tell why do we need to access api methods ?. If you ever need to store or retrieve data from the third party server through any client application then we can make it possible with the help of third party api. If you want to access any third party api, you must be aware of certain things.

They are follows

  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 ?

If you can answer to the questions above when you try to access then nothing will stop you. Once you have understood what you want to do, what you are going to pass as an input and what it gonna return then you have done more than 50% of the work. the rest of the thing is coding which is very easy if you aware about flex nothing more needs.

Now i am going to add a new bookmark in my delicious account, for that i have to know certain details i have mentioned above. To know those details i have to go developers section in delicious API where you can see the available api methods in delicious and you can know about each api method HTTP URL, parameters need to pass and the data it returns. Check out this below URL and explore the delicious  api methods. http://delicious.com/help/api. now i know which method i need to access ie posts/add and all those stuff i need to know.

Steps to create flex application which adds new post in your delicious account

  • create mxml application in flex builder
  • create httpservice instance and give an ID to the httpservice
  • specify the URL of the httpservice
  • Declare the event handler function for result and fault property of httpservice
  • specify the result format of httpservice
  • pass the parameters of the httpservice via <mx:Request> which is declared inside <mx:HttpService> ie httpservicee instance
  • define event handler functions which you have declared in result and fault property of httpservice
  • Bind the user input data to the request parameters of httpservice.
  • invoke httpservice and it will prompt you to sign in your delicious account if you are not logged in already.

Once you have successfully added new bookmark, it will return xml node ie <result code=”done”/>, else it will return <result code=”something went wrong”/>.

Code


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<!&#91;CDATA&#91;

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

&#91;Bindable&#93;public var varUrl : String;
&#91;Bindable&#93;public var desp : String;
&#91;Bindable&#93;public var tagName : String;

public function resultHandler(event :ResultEvent):void
{
Alert.show(event.result.@code);
}

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

}

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

<mx:HTTPService id="myService" url="https://api.del.icio.us/v1/posts/add?" fault="faultHandler(event)"
resultFormat="e4x" result="resultHandler(event)" showBusyCursor="true" >
<mx:request xmlns="">
<url>{urlInput.text}</url>
<description>{description.text}</description>
<tags>{tags.text}</tags>
</mx:request>
</mx:HTTPService>

<mx:Panel title="Bookmark on delicious" backgroundAlpha="0.2" paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
<mx:Form>
<mx:FormItem label="URL">
<mx:TextInput id="urlInput" />
</mx:FormItem>
<mx:FormItem label="Description" >
<mx:TextInput id="description" />
</mx:FormItem>
<mx:FormItem label="Tags">
<mx:TextInput id="tags" />
</mx:FormItem>
<mx:Button label="Save bookmark" click="myService.send()" />
</mx:Form>
</mx:Panel>

</mx:Application>