blackcj.com » Cross Domain XML http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Tue, 10 Aug 2010 02:29:23 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 FlexFeed: Twitter RSS Feeds in Flex http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/ http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/#comments Sat, 04 Oct 2008 20:29:12 +0000 Chris Black http://www.blackcj.com/blog/?p=3 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 recieve:
[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:
http://www.blackcj.com/FlexFeed/index.html

And the source files:
http://www.blackcj.com/FlexFeed/srcview/index.html

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

]]> http://www.blackcj.com/blog/2008/10/04/flexfeed-integrate-twitter-rss-feeds-into-flex/feed/ 10