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:

  1. <window>
  2.    <id>main</id>
  3.    <title>Tweetanium</title>
  4.    <url>app://main.html</url>
  5.    <width>350</width>
  6.    <height>750</height>
  7.    <maximizable>false</maximizable>
  8.    <minimizable>false</minimizable>
  9.    <closeable>false</closeable>
  10.    <resizable>false</resizable>
  11.    <chrome scrollbars="false">true</chrome>
  12.    <transparency>1.0</transparency>
  13. </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:

javascript
< view plain text >
  1. var notification = new ti.Notification;
  2. notification.setTitle('Favorite');
  3. notification.setMessage('Your favorite request was successful');                                                        notification.setIcon('app://images/notification.png');
  4. 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:

  1. <link rel="application" type="application/vnd.appcelerator-titanium-app-package+zip" title="Tweetanium Appcelerator Titanium Twitter App" href="http://titaniumapp.com/tweetanium.dmg" />

Related Content:

Posted by Dion Almaer at 7:00 am
7 Comments

+++--
3.8 rating from 57 votes

7 Comments »

Comments feed TrackBack URI

This looks very interesting, and it’s definitely nice to see an open source solution become available, especially without much loss in functionality at all. You mention that they made use of Chromium – would that mean they found a way to make use of V8 alongside of Webkit?

Comment by tkadlec — December 9, 2008

Looks great, but I want to see other people get some real apps out before I bag AIR.
.
Is there any nice editor/debugger solution like there is in Aptana for AIR? The latest AIR/Aptana has pretty amazing in-editor debugging. The first time I have programmed in JavaScript without being absolutely desperate for FireBug.
.
One problem I have with AIR is the documentation. I spend a lot of time trying to fight my way out of Flex documentation to find useful HTML/JS/CSS examples. It’s also hard to find out what has changed in the latest AIR. Has full text search or traditional introspection been added to AIR 1.5? I don’t know yet.

Comment by Nosredna — December 9, 2008

Would like to correct my prior comment – WebKit is actually used in Chromium. I blame my lack of coffee at the time of my comment….

Comment by tkadlec — December 9, 2008

Great idea! There are still many features missing, but considering the early version, this is ok. I see a great potential in this. AIR does similar things, but what I don’t like about AIR is, that even HTML based AIR applications are actually flash-based and everything goes through the flash display list and all the other bloating stuff. Also, AIR uses a very old version of webkit, without support for all the cool new css-animation/transformation stuff (it even lacks data-uri capabilities).

Comment by AndiSkater — December 9, 2008

For how many days the “download source” link isn’t working now. I really would like to give this a try, but how should I, without the sources?

Comment by 343max — December 12, 2008

Hey guys, i you have any feedback or comments for Appcelerator, feel free to drop a post at http://www.appcelefeedback.blog.com and discuss.

Comment by Appcelerator — December 16, 2008

“The Open Web” has got to be the stupidest buzzword I’ve ever come across.

Comment by mrmass — December 20, 2008

Leave a comment

You must be logged in to post a comment.