0 Flares 0 Flares ×
Those of you that have followed our platform for some time might remember the Tweetanium project. As we discussed during last week’s webinars we are breathing new life into this project. A mobile version of the application is being developed to demonstrate some best practices for cross platform mobile development with Titanium (i.e.) iPhone & Android. The desktop version of Tweetanium has also been redesigned and rebuilt from the ground up. Today we are releasing both versions of Tweetanium. The rest of this post will cover the desktop version in detail. A follow-up post will be coming out soon focused on Tweetanium mobile. Both versions are being released under the Apache 2.0 license and the code will be made available on Github later on this afternoon. Installable versions of Tweetanium Desktop will also be made available for download at that time.
Behind the Scenes
xAuthIn order to interact the Twitter API beyond simple searches (e.g.) tweet, reply, retweet, follow/unfollow, etc an application will need to utilize OAuth/xAuth. Tweetanium utilizes xAuth and does it’s integration via SpazCore. Below are the basic set of methods created in Tweetanium to deal with Authentication (Note: these are taken out of context so review the full source for the actual implementation). [gist id= 778443]
Taking Advantage of CSS3 & Webkit
Targeting a single (modern) browser virtually eliminates the need to worry about browser compatibility issues and also has the added bonus of allowing developers to take advantage of newer browser technologies like enhanced support for CSS3 features. CSS3 makes doing common tasks like adding box shadows and rounded corners a breeze. Below are a few examples taken directly from Tweetanium. The main tweet input box in Tweetanium uses a box shadow effect. The code to achieve this effect is simple:
-webkit-box-shadow: 3px 3px #888;
The search input box combines box shadow and border radius:
-webkit-border-radius: 10px; -webkit-box-shadow: inset 0 0 2px 2px #888;
Often an important element of cross platform desktop development is the ability to keep our UI consistent while also allowing the app to blend in with the environment it is running on. Titanium Desktop allows us to do this quite nicely. The application can pickup system chrome, uses standard system installers and generally blends very well. Below are a few screenshots of Tweetanium running on Mac OS X, Windows 7, and Ubuntu 10.10.
However, in some cases this can make our design less appealing so it is possible to turn of chrome and/or override certain UI elements such as scrollbars. Webkit supports custom scrollbars and can be used to help us build a really refined UI. Tweetanium takes advantage of this feature and recreates the Bespin style scrollbars outlined here.
System NotificationsAnother common task required in many desktop applications is posting system notifications. Titanium Desktop makes creating system notifications simple and they look great across the various environments. They integrate nicely with Growl, Snarl, etc and generally have basic fallbacks in place for when these more advanced notification systems are not available. Tweetanium uses system notifications to indicate when new tweets have been found and creates a menu item that allows for the notifications to be enabled or disabled at will. Here is the basic code used to create & display the notification: [gist id= 778482] The resulting notifications look like:
- In our case jslint is disabled when running via juicer because some of the external libraries fail to lint. The Tweetanium files themselves are linted separately.
- Spazcore is included separately and not pulled into the juicer dependencies because it defines it’s own set of dependencies and we are using a prebuilt version of SpazCore for Titanium.