Tech Tips: Display TwitPic Images in Flex & AIR

Problem:
The TwitPic API does not currently support outgoing requests and the image source from amazon aws contains an AWS AccessKeyId, expiration time stamp, and signature. This would normally require a regular expression to rip the source JPG path out of the HTML. Ripping the source out of the HTML is a bit of a pain and is not a long term solution. It is possible to use the following shortened url to gain access to the full image path using the TwitPic image id.

Solution
Use this url to gain access to the full image: http://twitpic.com/show/full/s0z4.jpg and thumbnail: http://twitpic.com/show/thumb/s0z4.jpg (replace the s0z4 with your image id). Notice that this shortened path returns the longer url that would normally have to be ripped out of the HTML to gain access to the image.

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.    id="rssParse"
  3.    url="php/twitpic.php"
  4.    result="processResult(event)"
  5.    resultFormat="e4x" />

PLAIN TEXT
PHP:
  1. <?php
  2.     $twitter_feed = 'http://twitpic.com/photos/chrisjblack/feed.rss';
  3.     $rawfeed = @file_get_contents($twitter_feed);
  4.     print $rawfeed;
  5. ?>

PLAIN TEXT
Actionscript:
  1. import mx.collections.ArrayCollection;
  2. import mx.rpc.events.ResultEvent;
  3.    
  4. [Bindable]
  5. private var _rssResults:ArrayCollection;
  6.  
  7. // Define and use atom namespace.
  8. private namespace atom = "http://www.w3.org/2005/Atom";
  9. use namespace atom;
  10.  
  11. private function processResult(event:ResultEvent):void
  12. {
  13.    var xmlList:XMLList = event.result.channel.item as XMLList;
  14.    for each(var item:XML in xmlList){
  15.        // Formatt the date
  16.        var myDate:String = item.pubDate;
  17.        myDate = myDate.slice(0,22);
  18.                
  19.        // Pull the image id out of the link url
  20.        var imageId:String = item.link;
  21.         imageId = imageId.replace("http://twitpic.com/", "");
  22.              
  23.        // Push the results into our data array
  24.        _rssResults.addItem({title: item.title, date: myDate, id: imageId});
  25.    }
  26. }
  27.  
  28. private function init():void
  29. {
  30.    _rssResults = new ArrayCollection();
  31.    rssParse.send();
  32. }

PLAIN TEXT
HTML:
  1. <mx:VBox width="900" height="500" horizontalAlign="center">
  2.    <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.    <mx:VBox height="450" width="800" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
  4.       <mx:Repeater id="twitter" dataProvider="{_rssResults}">
  5.          <mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
  6.          <mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
  7.           <mx:Image source="http://twitpic.com/show/thumb/{twitter.currentItem.id}.jpg" />
  8.           <mx:Image source="http://twitpic.com/show/full/{twitter.currentItem.id}.jpg" />
  9.       </mx:Repeater>     
  10.    </mx:VBox>
  11. </mx:VBox>

This allows for Adobe AIR applications to post to (Post to TwitPic from Adobe AIR) and retrieve images from TwitPic.

View Sample / Source Files

Links:
TwitPic Previewer

This was originally posted on blackcj.com, Chris Black's personal blog. Chris is a Senior Developer at Sierra Bravo.

, , ,
Filed under Technology

Leave a Comment