Posted on by

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:

<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:

[as]
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();
}
[/as]

Now lets add the mxml to display the content:

<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 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:

$twitter_feed = 'http://twitter.com/statuses/user_timeline/16584421.rss';
$rawfeed = @file_get_contents($twitter_feed);
print $rawfeed;

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

<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:
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!

11 thoughts on “FlexFeed: Twitter RSS Feeds in Flex”

  2. You can use any server side language as a medium to access Twitter. I used php since it is the one that I am most familiar with. I would be interested in seeing what the jsp looks like if anyone is willing to post it here. Thanks!

  3. What’s the purpose of the atom namespace? You don’t seem to define or reference any name in or from it.

  4. Here is info from Adobe:

    “When working with XML, ensure that you open any namespaces that you want to use. The namespace for the Flickr RSS feed is http://www.w3.org/2005/Atom. You must define a namespace and set it to this unique URL and then include the use statement for that namespace. Otherwise, you do not have access to the contents of the loaded XML document.”

    http://www.adobe.com/devnet/flex/quickstart/httpservice/

    and info on Nampspace:

    http://livedocs.adobe.com/flex/3/langref/Namespace.html

    Declaring a name space in Flex will affect all subsequent calls to xml from there on out.

  5. The PHP does not seem to consistently retrieve the data via this script (PHP). I can only occasionally receive the data into flex. any ideas as to why this is?

  7. I discovered the issue was with the PHP settings on my server. Never mind the previous posts. Thanks again for the great tutorial!

  8. Hey thanks for this, I was making calls directly from flash, and it worked fine locally, then I uploaded to my server, and I got nothing. Hit google and found this, solved my problem within 5 mins. Thanks!

  10. Yup. You can use htmlText rather than text when setting the variable. It doesn’t look like twitter is returning the a href tags though. That means that you would need to parse the text and use a regular expression to add the link tags into the string before setting the htmlText.

    Sample RegExp:
    var regEx:RegExp = new RegExp(‘[a-zA-Z]+://([.]?[a-zA-Z0-9?=&%#_/-])*’, ‘ig’);
    _dynamicText.htmlText = string.replace(regEx, “<a href=\”$&\”><u>$&</u></a>”);

  11. Hi, I got this error when run it on firefox

    [RPC Fault faultString=”Error #1088: The markup in the document following the root element must be well-formed.” faultCode=”Client.CouldNotDecode” faultDetail=”null”]
    at mx.rpc.http::HTTPService/http://www.adobe.com/2006/flex/mx/internal::processResult()
    at mx.rpc::AbstractInvoker/http://www.adobe.com/2006/flex/mx/internal::resultHandler()
    at mx.rpc::Responder/result()
    at mx.rpc::AsyncRequest/acknowledge()
    at DirectHTTPMessageResponder/completeHandler()
    at flash.events::EventDispatcher/dispatchEventFunction()
    at flash.events::EventDispatcher/dispatchEvent()
    at flash.net::URLLoader/onComplete()

Comments are closed.