Projects | twitterAIR

Overview

twitterAIR is an Adobe Integrated Runtime (AIR), Flex 3 application that integrates with the services provided by twitter.com. Users can view the public Twitter timeline, their friends tweets, and configure automatic refresh settings.

Requirements

The Adobe Integrated Runtime (AIR) must be installed in order to use twitterAIR. You can get AIR for either Windows or Mac here: http://get.adobe.com/air/

Features

Integration with twitter.com

All of the integration with twitter was done with custom HTTP calls and XML processing. Twitter provides an AS3 API but it could use significant improvement as it's lacking in several key areas. I only use the API for specifying the event handler event types.

Complete custom skinning and chrome

The design was created in Photoshop (png's) and pieced into Flex as a completely custom "look and feel." This includes the background image, all buttons, chrome, logos, scrollbars, and fonts (excluding the text input font). Also, there's no native windowing elements in the app; all windowing mechanisms were written in AS3. The scrollbars were created in PhotoShop and displayed via CSS.

Embedded fonts

In order to provide as clean a UI as possible 3 typefaces are embedded into the application and used in every area text shows (excluding the text input font).

Date localization and manipulation

In order to display the "4 minutes ago" or "8 hours ago" text for each tweet some cool date manipulation was written. This involved doing some minor conversions between UTC time and the client's localized time and determining there difference in milliseconds. Then, configuring the text that says how old each tweet is when compared to the client machine.

View components

The settings window and error windows were created as view (the V in MVC) components. All communication between these view components and the main application occur via the Flash event model. The settings view component functions as an ItemRender to a List component.

Aggressive no-cache

The Twitter servers do a good job of caching data to the client. For an application like Twitter, this can prove frustrating when you're trying to keep up with what your friends are doing on Twitter. To combat this, I've employed some anti-caching mechanisms to ensure each HTTP call to Twitter returns the most up-to-date tweets possible.

Custom Form Validation

In order to validate the form controls in the settings window, I wrote a custom validation package/class that extends the Validator class and is fed by a defined Model (vanilla XML with data binding). It's a decent example of validating an entire Flex form with a custom validator and having results dispatched back to the settings window via events. The tooltips that display when there are form errors are skinned in CSS.

File-system API integration

All information gathered in the settings window is stored on the client machine. The username and password fields are encrypted to provide a small level of security. You don't want anyone to obtain your Twitter username/password do you?

AS3 Timer

The update minutes and seconds are configured into the proper milliseconds value which is used as the source for a Timer instance. When the timer runs it executes ActionScript that facilitates communication with Twitter. This can be retrieving the public tweets or friends tweets. The timer is started and reset based on different user activity in the app.

Auto-update Frequency

Auto-update can be configured from 59 seconds to 1 hour to never. Of course, the user can always force an update by pressing Refresh. I envisioned someone wanting to refresh on a manual basis so this is accomplished by setting the update frequency to 0 minutes, 0 seconds, and then using the Refresh button. Keep in mind that at the time this documentation was written Twitter was allowing a maximum of 70 HTTP pings per hour per client. The auto-update settings are restricted to keep this from happening, but the refresh button is not, so be careful or you might not receive any tweets for awhile.

Internet connectivity monitoring

Admittedly, the application does not utilize the connectivity monitoring provided by AIR. However, network monitoring is accomplished and error messages will display if you disconnect from the Internet.

Screenshots