Tuesday, December 9th, 2008
Appcelerator Titanium: Breathing AIR for the Open Web
Category: Appcelerator
, Podcasts, Runtime
The Appcelerator folks have a big announcement today. They are announcing an early release of Appcelerator Titanium which is easiest if you think of it as an "Open Web version of Adobe AIR" in that it is a runtime that has extended APIs that allows developers to create applications using Web technology.
It is built glueing and moulding WebKit, Chromium, and Gears in very interesting ways indeed. A lot of tough work was done in getting the glue to bind to graphics toolkits on various platforms, and then the work to tear apart Gears and allow it to take in new modules which implement APIs such as:
- Native windowing (transparent custom chrome)
- Direct file system access
- Database integration and storage
- Desktop notifications
- Application and system menu control
- Geo-location
Examples that show off the ti APIs are available. You will note that some of these do not use the Appcelerator Ajax library. This shows that Titanium does not rely on the Appcelerator SDK itself (although you can of course do so!).
Listen to the podcast
We sat down with some of the Appcelerator team, Jeff Haynie and Nolan Wright, and had a detailed conversation with them about why they did this, how they did it, and what it means for developers.
We walk through the implementation, and how developers actually create applications.
We have the audio directly available, or you can subscribe to the podcast.
Some details
A good way to really delve into the details is looking at a sample application. There are some good demos as we mentioned, but the Web 2.0 hello world has to be Tweetanium a twitter client.
Download the source and let's walk through it quick.
Firstly, you will notice the Rakefile, which gives away the Ruby side of the house here. In fact, the build system feels rails-like. If you open config/tiapp.xml you will see a file that is like the Adobe AIR manifest, describing the application. The windows for the app are defined here, for example:
-
-
<window>
-
<id>main</id>
-
<title>Tweetanium</title>
-
<url>app://main.html</url>
-
<width>350</width>
-
<height>750</height>
-
<maximizable>false</maximizable>
-
<minimizable>false</minimizable>
-
<closeable>false</closeable>
-
<resizable>false</resizable>
-
<chrome scrollbars="false">true</chrome>
-
<transparency>1.0</transparency>
-
</window>
-
Now, let's open up public/javascripts/main.js to see the bulk of the application logic itself.
Here you will see usage of some of the APIs. Here is how it ties into the Growl (or equivilent) notification system:
-
-
var notification = new ti.Notification;
-
notification.setTitle('Favorite');
-
notification.setMessage('Your favorite request was successful'); notification.setIcon('app://images/notification.png');
-
notification.show();
-
The database API will look very similar to you (like Gears), but you access it via var db = new ti.Database;.
The app plays sounds when you get Tweets, all via var sound = ti.Media.createSound(path);.
Then you have the tray menu access via var menu = ti.Menu.createTrayMenu(trayIcon,null,function(sysmenu) { ... });.
And you can get access to the native windows, such as i.Window.currentWindow.isVisible()).
For fine control over dragging you simple tie into ti.Extras.setDraggableRegionHandler(..).
This is exciting stuff, and I know that the team is listening to hear your thoughts.
In a related note, I just posted on an App Discover add-on that shows how we could add discoverability of applications like Titanium apps (as well as Greasemonkey, add-ons, plugins, and more).
To link to a Titanium app such as Tweetanium you would simple add a link tag like this:
-
-
<link rel="application" type="application/vnd.appcelerator-titanium-app-package+zip" title="Tweetanium Appcelerator Titanium Twitter App" href="http://titaniumapp.com/tweetanium.dmg" />
-
