[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:
HTML:
-
<mx:HTTPService
-
id="rssParse"
-
url="http://twitter.com/statuses/user_timeline/16584421.rss"
-
result="processResult(event)"
-
resultFormat="e4x" />
Next we will create the function to process the results:
Actionscript:
-
import mx.collections.ArrayCollection;
-
import mx.rpc.events.ResultEvent;
-
-
[Bindable]
-
private var _rssResults:ArrayCollection;
-
-
// Define and use atom namespace.
-
private namespace atom = "http://www.w3.org/2005/Atom";
-
use namespace atom;
-
-
private function processResult(event:ResultEvent):void
-
{
-
var xmlList:XMLList = event.result.channel.item as XMLList;
-
for each(var item:XML in xmlList){
-
var myDate:String = item.pubDate;
-
myDate = myDate.slice(0,22);
-
_rssResults.addItem({title: item.title, date: myDate});
-
}
-
}
-
-
private function init():void
-
{
-
_rssResults = new ArrayCollection();
-
rssParse.send();
-
}
Now lets add the mxml to display the content:
HTML:
-
<mx:VBox width="400" height="600" horizontalAlign="center">
-
<mx:Label styleName="subTitleText" text="Twitter Feed:" fontWeight="bold" fontSize="16"/>
-
<mx:VBox height="500" width="400" verticalScrollPolicy="auto" horizontalScrollPolicy="off" horizontalAlign="center">
-
<mx:Repeater id="twitter" dataProvider="{_rssResults}">
-
<mx:Text textAlign="center" width="300" text="{twitter.currentItem.date}"/>
-
<mx:Text textAlign="center" width="300" text="{twitter.currentItem.title}"/>
-
</mx:Repeater>
-
</mx:VBox>
-
</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:
PHP:
-
$twitter_feed = 'http://twitter.com/statuses/user_timeline/16584421.rss';
-
-
Now we need to update our HTTPService request to pull from the new php file:
HTML:
-
<mx:HTTPService
-
id="rssParse"
-
url="php/twitter.php"
-
result="processResult(event)"
-
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.
