Tuesday, September 4, 2012

Mobile cross-platform: Appcelerator Titanium Mobile

As a mobile developer (and also because it's the topic for my master thesis) I'm really interested in developing an app once for all or at least more than one platform. A big problem with developing cross-platform apps is the different APIs the mobile platforms have, especially when it comes to user interface components.
There are some possibilities to solve this problem:
  • develop using HTML and style your components depending on which platform the app runs (e.g. using PhoneGap as a native app wrapper),
  • develop using a framework that creates an abstraction above the native APIs and dynamically (during compile- or runtime) creates user interface components,
  • and definitely some other techniques I'm not going to introduce right now.
In this blog post I'd like to focus on the second solution: using an abstraction layer above the native APIs, or even more specific: the Titanium mobile SDK by appcelerator. Their approach is to let you develop using JavaScript and during runtime, create a native interface by mapping API calls to Titanium's API to native API calls.
I really like this approach, even though the way Titanium works is a little bit too complicated, compared to real native development. Maybe it's just the quick look at the tutorials when starting to develop that makes the architecture of an app fell kind of weird.

What's really nice about Titanium mobile is, that there are not only user interface classes that are similar in both Android and iOS (when I started developing, their IDE called Titanium Studio only allowed me to select those two). If there are Android or iOS specific user interface components, it's possible to just use a condition that checks for the platform and you can use those components.
Also, their SDK does not only offer  user interface components, but also allows you to develop Android services, for example. And what is also really nice is that the local database, SQLite, that is available on Android and iOS uses the same interface!

One thing I really dislike is that the Android style is still Android 2.x and not the modern Android 4 style but as far as I read, the next release of the SDK (which should be Titanium mobile 2.2?!) does support the ActionBar, which is the thing I really miss ;)
There is an ActionBar module for Titanium, but it only supports tabs and is not a real native component (even though I already extended it to support a title as well as a menu).

Last but not least a small "Hello, World!"-code snipped with Titanium mobile:

var win = Ti.UI.createWindow({ title: 'My Awesome App' });
var view = Ti.UI.createView({ layout: 'horizontal' });
win.add(view); var lbl = Ti.UI.createLabel({ text: 'Hello, World!' });
view.add(lbl); var btn = Ti.UI.createLabel({ text: 'Click me!', left: 5 });
btn.addEventListener('click', function(e) {
  lbl.setText('Hello, User!');


This example opens a window, adds a view with an automatic vertical layout and adds a label as well as a button to that view. Clicking the button will change the label's text. As you can see, this is really only JavaScript, even the event is registered using addEventListener.
I won't post a screenshot because I think you can imagine how this will look on Android and iOS (don't forget, it's really native!).
If you want to start developing using Titanium mobile or just explore it some more, they have a quite good documentation.

Next time when I revisit the cross-platform topic I will tell you more about PhoneGap, which I worked extensively with during my internship this summer.

Labels: , , , , , , , ,


Post a Comment

Subscribe to Post Comments [Atom]

Links to this post:

Create a Link

<< Home