Jul
2

Several weeks ago I became hooked on Twitter and the ability to keep up with what my friends are doing. Since then I spent some time building an Apollo application that integrated with the Twitter services. Shortly after that Adobe announced AIR and I scrapped what I was working on and started over. My goal was to not only build something that worked with Twitter but to use some key development aspects of Flex 3 and AIR. Along the way I hoped to learn more about Flex development.

Today I'm making the application (twitterAIR) available for the general public to try in the hopes of getting comments and suggestions. I'd like for twitterAIR to become an application people enjoy using on a daily basis but in order for that to happen I need to know what works well, what doesn't, and what features folks would like to see.

So, if you use Twitter and you'd like to try twitterAIR on Mac or Windows you can download it via the Downloads pod to the right or using this link:

Download twitterAIR!

If you're interested you can also read about some of the features of Flex/AIR development I used to put the application together. Just click the "more" link below.

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.

Aaron West's Gravatar
About this post:

This entry was posted by Aaron West on July 2, 2007 at 4:08 PM. It was filed in the following categories: twitterAIR, Adobe AIR, Flex. It has been viewed 33009 times and has 17 comments.

6 related blog entries

17 Responses to Yet Another Twitter/AIR Application Released

  1. I've had a couple days to play with the app. I like it a lot. The UI is very clean... tis verr nice. Verr nice indeedy.

  2. I've had a couple days to play with the app. I like it a lot. The UI is very clean... tis verr nice. Verr nice indeedy.

  3. arg... stupid phone browser!

  4. Any way to resize this bad boy?

  5. Not at the moment Robert. Due to the custom skinning with the background image I'm still looking into the possibility of allowing resizing. twitterAIR was the first fully custom skin in Flex I've done so I'm working through the request.

    I certainly think the ability to resize will make the app "feel" better so I hope to get it done.

  6. Wow! Very nice tool! I guess your server had some performance issues after EV posted the link to your blog :)

  7. Hi Markus, I've actually been having major performance problems for quite some time due to the shared server I host with. I'm investigating new hosting options. By the way, what is "EV?"

  8. Rarr, nevermind.. EV = Evan Williams from Twitter fame.

  9. Nomad

    It looks great, but used font doesn't display cyrillic characters, is it possible to fix that?

  10. Nomad, it may be possible. I'm embedding a font into the SWF and I do have control over what characters of the font are embedded. Currently, I'm embedding only a-z, A-Z, and 0-9. The real question is whether the font I'm using has Cyrillic characters available. If it does I could embed them. I'll see what's available and I might add the Cyrillic characters if they don't overly bloat twitterAIR in terms of file size.

  11. Aaron...at most you'd be adding an extra 20-30k. That's probably accepable so that our cyrillic typing friends can use this thingy.

  12. Although very cool, I dont think this is the goal that Adobe wants to accomplish with Flex right? I dont really see Flex as a solution for building flash websites. Feels more native for Applications.

    Alexander
    http://www.jmihai.ro

  13. Alexander, what do you mean by "flash websites?" twitterAIR is an AIR application built with Flex 3, which is one of the intentions behind Flex, to power AIR apps.

    Now, as far as building Flash-based Web sites using purely Flex, I would tend to agree. I don't see a point in building an entire Web site in Flex. Entire Web applications however, are a different story. Flex is perfect for that.

  14. kafka

    Great App, Show uz the Code !!!!

  15. great application . thanxs for keep it goign

  16. Maurice del Prado

    Aaron, Beautiful app. But I don't see a tab -- or any method for that matter -- to see my Replies. Perhaps I am just being dense.

  17. @Maurice Yea you're right. I never built the ability to view replies to messages. It's a core feature of twitter that my app is lacking. Glad you like what is there though.