Related Posts (generated):

• Flash Debug crashing in Firefox?
• How to Flex the Twitter API
• Flex OIM review
• Flex Open Iteration Meeting
• Flex in Eclipse tips

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

Just to review, the new component and skinning architecture has been dubbed Spark. Halo, now referred to as MX, is the current Flex architecture and will eventually fade into the sunset (or Flex 5). That doesn’t mean Halo will go away, just that the goal is to transition new users and applications to Spark. They also emphasized that with Flex 4, you may not be able to create a pure Spark application due to lack of Spark components. With Flex 5 being the targeted release for the ability to replace all the MX system with the Spark components. Thus Flex 4 will be a boundary release, allowing a user to mix in Spark components alongside the existing MX components.

The primary driver of Spark will be Flash Builder 4 & Catalyst. In the meeting we were told that Flash Builder 4 will offer a new choice when creating a Flex project. Whether to use Spark/Halo or Just Halo. This will alter the auto-complete and code hinting suggestions. The user can still use one or both, but this will allow Adobe to shape the experience toward Spark. Thus allowing a more natural feeling transition without an forced choice that will lock a user down. Catalyst will require Spark for the output it creates.

There will also be a separation of the theme and the components themselves. There will be both Spark and MX components, and they will be named separately from the TBD (“Spark”) theme and the Halo theme. So the look & feel will be separated from the functionality. No name exists for the “Spark” theme, but after the suggestion of “Fire” or “Smoke” by Simeon Bateman, Matt Chotin replies “but we were thinking along those lines ”

Along with this news, the presentation went through a good bit of Spark components. Adobe is working on better Spark/MX container compatibility. That may mean adjusting some MX components as well to unify them using Interfaces rather than hard classes. Each Spark component had a nice “what we’re fixing” list as well. The end goal is not to clone a MX component’s functionality but to work out the most features while keeping things simple. One example was that instead of having border styles of many components, a border container was created that would allow a border to be created around a single or many components.

Currently Flex 4 is targeted Early 2010 with a Late 2009 second beta.

Other handy links:
Differences between Flex 3 and Flex 4
What’s new in Flex 4 beta

Related Posts (generated):

• Flex Open Iteration Meeting
• Flash Builder 4 delay doesn’t impact Catalyst
• Scientific Notation Patch Accepted
• Altering Flash Builder’s new menu
• How to Flex the Twitter API

The official link is here but if you miss the meeting, there will be a summary at the Gumbo Opensource Site.

Related Posts (generated):

• Flex OIM review
• Scientific Notation Patch Accepted
• Altering Flash Builder’s new menu
• How to Flex the Twitter API
• Let’s patch: Fun with Scientific Notation!