Tech Tuesday: FlexFeed — Twitter RSS Feeds in Flex

[a note from Jodi: This is the inaugural Tech Tuesday post, which is going to be a regular feature where our nerds wow you with their technical prowess. First up, we have Chris Black, who does amazing things with Flex and ActionScript]

Using Flex and PHP it is possible to integrate Twitter RSS feeds into a Flex web page. Twitters cross domain policy (which is used by Flash) does not allow external resources to access feeds. Using PHP as a medium to the data, Flex can access the feed and display all contents. This technique can be used to access any xml data that Flex may not have access to.

Let's start by creating an HTTPService:

PLAIN TEXT
HTML:
  1. <mx:HTTPService
  2.         id="rssParse"
  3.         url="http://twitter.com/statuses/user_timeline/16584421.rss"
  4.         result="processResult(event)"
  5.         resultFormat="e4x" />

Next we will create the function to process the results:

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. var myDate:String = item.pubDate;
  16. myDate = myDate.slice(0,22);
  17.  _rssResults.addItem({title: item.title, date: myDate});
  18. }
  19. }
  20.            
  21. private function init():void
  22. {
  23. _rssResults = new ArrayCollection();
  24. rssParse.send();
  25. }

Now lets add the mxml to display the content:

PLAIN TEXT
HTML:
  1. <mx:VBox width="400" height="600" horizontalAlign="center">   
  2.     <mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
  3.     <mx:VBox height="500" width="400" 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:Repeater>           
  8.     </mx:VBox>   
  9. </mx:VBox>

After testing the application locally everything works great! But wait... what about the PHP code? Well first export a release build of the application and upload it to a web server for testing.

Here is the error that you should receive:
[RPC Fault faultString="Security error accessing url" faultCode="Channel.Security.Error" faultDetail="Destination: DefaultHTTP"]

To get around this let's create a php file that collects the twitter data:

PLAIN TEXT
PHP:
  1. $twitter_feed = 'http://twitter.com/statuses/user_timeline/16584421.rss';
  2. $rawfeed = @file_get_contents($twitter_feed);
  3. print $rawfeed;

Now we need to update our HTTPService request to pull from the new php file:

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

Now everything works great!

Check out this link to view a functional example.
And the source files.

Please leave a comment if you have any questions, comments, or suggestions. Thanks!

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

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google
  • StumbleUpon
  • TwitThis

Related posts:

  1. Tech Tips: Display TwitPic Images in Flex & AIR Problem: The TwitPic API does not currently support outgoing requests...
  2. Tech Tuesday: Skinning Flex Components – Part 1: CSS This will be a three part series on skinning Flex...
  3. Tech Tuesday: Validate Twitter credentials in AIR Problem: Your AIR application needs to validate the username /...
  4. Tech Tuesday — YouTube in AIR The YouTube video player is currently written in ActionScript 2.0...
  5. Tech Tuesday: Posting to TwitPic from Adobe AIR TwitPic is a service that lets you share photos on...

, , ,
Filed under Technology

One Response to “Tech Tuesday: FlexFeed — Twitter RSS Feeds in Flex”

  1. coloreddust  on July 8th, 2009

    I am occasionally having a problem with this error in my php file:
    [function.fopen]: failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request

    Sometimes the feed comes through other times not. Could this be a host/server/php issue?

    Thanks,
    Jason


Leave a Comment