dmathieu - Introduction to titanium

Introduction to titanium

Tuesday, 21 September 2010 in Development Articles by Damien Mathieu Creative Commons License

When you’re looking forward to developing a mobile application, one of the first problems to occur is the non compatibility of Android and iPhone applications.
Theoricaly, this would mean we’d have to develop twice the same application. Once in Java and once in Objective-C.
And if, moreover, you wish to offer a blackberry version, you’re not seeing the way out of it.

In order to avoid duplicating effort (which is, after all, what a developer does), there is a tool. Titanium. With which you’ll be able to program multi platforms applications in javascript.

It’s advantage is clear : the built applications are native. It’s not Objective-C which tries to execute javascript.

An other advantage is that Titanium allows not only to build mobile applications. But also iPad (and potentially in the futur, for Android tablets) … And desktop (Window, Mac and Linux). All that in javascript. Cool no ?

Install Titanium

titanium iphone

You can install and use Titanium on Linux, Mac and Windows.
The appropriate version for your operating system is available on the titanium website.

In order to develop mobile applications, you’ll also have to download and install the iphone androind sdks.

Create your first application

Now that you have installed Titanium, launch it. You’ll then be asked to register. It’s free and required to continue.

Once you’ve registered, click on the “profile” icon at the top left.
A page allowing you to update your profile will appear. At the bottom of it, you’ll be able to specify the path to the Android SDK on your machine. Fill it correctly.

Go back on the “projects” icon and click on the “New Project” button at the top of the screen. Create a mobile project.
You’ll then see a window allowing you to define the main parameters for this project and the installed platforms.
If one of the both (iPhone or Android) isn’t displayed in green, you probably forgot to install it’s SDK.

Click on “Create Project”. You’ve just created your first Titanium application !

Titanium compiles your applications to be executed. But it’s not an IDE.
You’ll always have to keep editing your project with your favorite code editor.

Project’s architecture

titanium android

If you look at your new project, you’ll see several files and folders.

  • build - This is the directory in which Titanium will build the Android and iPhone applications. You’ll see there the Java classes and the Objective-C code of your applications.
  • tiapp.xml - This is your project’s configuration. You can for exemple, define there, the filename of your application’s icon.
  • Resources - Your application is there.

The Resources folder

Let’s see more closely the Resources folder as it’s there we’ll be working. It also contains several files and folders.

  • android - In this folder, there’ll be the files specific to Android (usually images).
  • iphone - In this folder, there’ll be the files specific to iPhone (usually images).
  • app.js - Your application’s main file. It’ll be executed when you start your application (you’ll be able to start other .js files of course).

Open the app.js file. You’ll see there some Javascript code.
When you create a new project, Titanium creates in fact an Hello World application.

Let’s see what we have.

1
Titanium.UI.setBackgroundColor('#000');

We define here the default application’s background to white. Without it, our application would have a black background.

1
var tabGroup = Titanium.UI.createTabGroup();

Then we create a new object which will hold several tabs in our application.
In the iPhone, the tabs are displayed at the bottom of the screen. On Android, it’s at the top.

1
2
3
4
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});

Then we create our first window. You can add content like text, images or animations in any window.

1
2
3
4
5
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

After creating our first window, we add a tab leading to it.
The path to the icon is from the top of the project.

1
2
3
4
5
6
7
8
var label1 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 1',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
win1.add(label1);

Then we create a text element by defining it’s color, it’s contenu, it’s font and it’s alignement.
And we add this new text element in our window.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var win2 = Titanium.UI.createWindow({
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});
var label2 = Titanium.UI.createLabel({
    color:'#999',
    text:'I am Window 2',
    font:{fontSize:20,fontFamily:'Helvetica Neue'},
    textAlign:'center',
    width:'auto'
});
win2.add(label2);

We can, of course, add as many windows as we wish in our application. Here, we’re only adding a second one.

1
2
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);

We then add all the created tabs to the tabs group created at the second line of our application.

1
tabGroup.open();

Finally, we open our tabs group which will then be displayed on the screen.

This will display in your application the equivalent of the screenshots provided above on iPhone and Android.
You’ll now be able to add several objects like text, images, buttons or other animations.
An exhaustive list of the available objects is provided in the Titanium’s API Doc.

Conclusion

With this quick introduction, we’ve seen how to install Titanium, create our first project and a bit what is a basic application.
That’s a start. But it’s not gonna be enough to build real applications.

Fortunately for us, the Titanium API is particularly rich. Digging through it will allow you to do anything you need.