Enigmatic Thought

While sitting in #flex on Freenode a while back, someone asked how to use Twitter within Flex. Since I’ve meddled with other APIs I offered some advice, but I’d never personally dealt with Twitter. Douglas Knudsen pointed out at his 360|Indy session that no true web mashup is complete without using twitter so here is how to “complete” your own project.

With that in mind (and a fresh Flash Builder 4 Beta install) I figured what better way to learn a little about Spark than to create a Twitter Flex app? Since I was intending on posting it as a how-to, I kept it simple and sweet. Of course, it should be easy to take the code snippets and move them to your own mega-app.

I thought the first step was to learn the Twitter API, until I discovered there already existed projects out there that already took care of that. Thanks to the open source library tweetr, I just have to have a vague idea about twitter and let tweetr do the heavy lifting. No worrying about value objects or dealing with XML, just a simple event listener. So, with that I got to focus on Spark, which I’d never dealt with before.

If you want to see the final output (and view source) I’ve posted it here.

The search code to work with Tweetr is very simple. I simply add an eventListener for the COMPLETE event and shove the results into a bindable ArrayCollection. I’ve bound the search function to the enter & click events of a Spark TextInput and Button, but since they operate just like their MX components, it’s not really interesting to look at.

[Bindable]
private var _searchResults:ArrayCollection = new ArrayCollection();
 
private function search():void {
	var tweetr:Tweetr = new Tweetr;
 
	tweetr.addEventListener(TweetEvent.COMPLETE, searchResults, false, 0, true);
	tweetr.search(searchInput.text);
}
 
private function searchResults(event:TweetEvent):void {
	_searchResults.source = event.responseArray;
	_searchResults.refresh();
}

Using MX, I’d normally bind that data to some sort of DataGrid or Repeater, but Spark has neither. But, thanks to Flash Builder’s code hinting, I discovered the DataGroup component. It’s somewhat like a repeater, but with more layout options thanks to the way layouts work in Spark.

<s:DataGroup
	dataProvider="{_searchResults}"
	itemRenderer="com.enigmaticthought.components.TweetBox" width="100%">
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
</s:DataGroup>

So all I had left was to create a renderer for the data. That’s where TweetBox came in to play. Its base class is a Spark ItemRenderer, which was a little tricky to deal with because I had to define states for it, even though I didn’t use any states. This is because the ItemRenderer uses states to handle things like hover and select to make the component customizable.

To fill in the TweetBox, I simply overrode the set data function and assigned all the values to the display components. Sadly, SearchResultData was not built as Bindable, so I couldn’t just let data binding do the work.

import com.swfjunkie.tweetr.data.objects.SearchResultData;
private var _tweet:SearchResultData;
 
override public function set data(value:Object) : void {
	super.data = value;
	_tweet = value as SearchResultData;
	if (_tweet) {
		tweetImage.source = _tweet.userProfileImage;
		tweetText.text = _tweet.text;
		tweetAuthor.text = _tweet.user;
	}
}

One other thing to note is that while I could use Spark components for the text data, the image is still an MX component. There isn’t any plan for a Spark Image in Flex 4, but this is a good example of how mixing Spark & MX works.

<s:ItemRenderer
	xmlns:fx="http://ns.adobe.com/mxml/2009"
	xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/halo"
	width="100%">
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
--------------------------------------------
...State & Code Removed...
--------------------------------------------
	<mx:Image id="tweetImage" height="48" width="48" scaleContent="true" />
	<s:VGroup id="textGroup" width="100%">
		<s:SimpleText id="tweetText" width="100%" explicitMaxWidth="{textGroup.width}" />
		<s:SimpleText id="tweetAuthor" width="100%" textAlign="right"/>
	</s:VGroup>
</s:ItemRenderer>

And now I have a really simple twitter search application. So, what are some of the other uses for Twitter, other than e-stalking people? You could build a new alert system that watches Twitter Trends to see what’s in the news, or use the search to keep an eye on a company, team, movie, TV Show, or stock. Of course, may you just want to amuse yourself.

Related Posts (generated):

• Altering Flash Builder’s new menu
• Flex OIM review
• Flex Open Iteration Meeting
• Flash Debug crashing in Firefox?
• Why Algorithms Matter