Appcelerator Titanium Tutorial - Hello World With Titanium

Appcelerator Titanium is a cross platform native mobile application development tool. You can use a single code base to write applications for iPhone, Android and Blackberry (Windows 8 in the near future). The code will de written in Javascript and the compilation process will create native applications on each platform.

Pure Native Applications Vs Titanium Vs HTML based Hybrid Applications

There is no global best approach for a mobile application. It will always depend on the context and the your requirement. You will undertand the pros and cons of each development method as you read along and understand how to pick up the best solution for the given requirement. Always try understand the requirement and then decide what will be the best solution for you.

Native Applications will always have the best performance. Meaning that if you need to write an application for iPhone you need to write it using Objective C and if you need an application for Android then you need to use Java etc. But writing you code in two different platforms will make you maintain two code bases and most probably you will have to maintain two different development teams with different skill sets to do the programming. So if you need the best possible performance application you will need to stick in to native but on the other hand it will require the highest amount of coding effort.

HTML based web application development is something similar to opening up your mobile browser to display your application. So the application will be similar to a mobile web page. (The user may not always feel that it an actual web browser that is rendering the application). There are technologies such as PhoneGap (Cordova) that will allow you to access native mobile features such as the Accelerometer, GPS etc. The HTML based Hybrid Application development requires less development work and can be made to run on multiple platforms using platforms like PhoneGap. PhoneGap will allow you to make applications for iPhone, Android, Blackberry, Windows 8. But the downside of HTML based Hybrid Applications is that there is a significant performance drawback since the application runs on a web view and the web view is considered as one of the heaviest UI components and it will give you an performance drawback. But if you need an application running on on multiple platforms and with relatively less effort HTML based web application may be your answer. Note that most mobile browsers now support HTML5 and great features of HTML 5 can be used in your application.

Finally moving on to Titanium, Titanium will maintain a single javascript codebase and will compile to native. That is you write your code in Titanium and then you compile it you actually have a native application. Say you create a window using Titanium and you compile it for iPhone. Then you will get a native window for iPhone just as you create a window using Objective C. And say you compile the same code in to Android, it will create a native window on Android. So your application is actually in native but still with a single code base. Using Titanium will give you an application with near native user experience but with more effort than HTML based web application but with less effort than Native mobile application development.

How Appcelerator Titanium Works

This is how appcelerator Titanium works. You write your application using Javascript. You will use the API provided by Titanium to create your application. Example, Titanium will provide you with an API to create a window or to create a button. So you simply will have to call the API to create your UI component in your application. Then when you compile your code it will compile into native. As given in the below diagram in orange, there is a component called the Kroll bridge that will convert your Javascript code into a native code. This cross compilation process is actually done by a python script called build.py So when you actually install your application you will have native functionality.

ref : https://wiki.appcelerator.org/download/attachments/27164787/PROD_arch11.png?version=1&modificationDate=1313783264000

Installing Titanium

You can follow the detailed instructions on Titanium official site to get Titanium installed.
https://wiki.appcelerator.org/display/guides/Quick+Start

Just to walk you through the process at an very high level

step 1 : Install Xcode (For Mac Machines)
step 2 : Install Java 6 ( Mac Machines has java 6 preinstalled, set the environment variables in Windows machines)
step 3 : Download Titanium http://preview.appcelerator.com/studio/
step 4 : Download Android SDK and update it
step 5 : open Titanium,
goto, Titanium Studio -> Preferences -> Titanium Studio -> titanium -> Browse for the relevant directories.

Creating your first app using Titanium

Step 1 :

Step 2 :
Select a default project. (The actual layout and options will change depending on your Titanium Studio version)

Step 3 :

Type your project name as helloWorld and add type an App id as com.yourCompany.helloWorld. The App id will be used to uniquely identify your application and it is usually used in reverse domain format. More on App id later. :)
You can also set the SDK version and the deployment targets. The available deployment targets will depend on the SDKs you have installed on your machine. On the screenshot below you can see that the Blackberry checkbox is greyed out. It is because I have not installed the Blackberry development tools on my machine. And also note that to do iPhone development you will need a Apple, the SDKs are only supported on Mac OS. But android apps can be developed on both Windows and Mac machines.

Step 4 :

Running your application. Right click on your project click Run As -> Select the Simulator or Emulator you need to run your app. The app will now get installed on the target and it will pop up on your screen. Note that the Android Emulator takes ages to load so don't close it once it is up and running until you are done with the development session. :)

Your Default application

The below screenshots are taken from running the application on Android and iPhone.

Here you will notice that the the Application on iPhone and the application on Android seems bit different from each other. The Tab buttons/ Tag group is at the bottom on iPhone while it is on top in Android. But its the same code. The reason is simple. It is because Titanium calls native functions on the respective platform, and the Tab group native implementations are different thus it is rendered differently.
Simple example, an Android user will always expect the tabs to be at the top, an iPhone user will always expect the tab group to be at the bottom. And Titanium simply offers the user the look and feel of a real native application.

Now you are done with your default application. Let's move on to creating our own hello world application.

Hello world with Appcelerator Titanium

Open app.js and delete its content. Lets create the hello world app from scratch. :)

the existing app.js with the default application may look as follows. (Select the contents and delete.)

Step 1:

You need to create a window to hold the UI components of your application. Titanium provides a method called 'createWindow' to create a new window.
The parameter passed to the method is a JSON object and it will define the properties of the window.
In this example I've set the property background color to 'white'.

The API is available at :
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Window

var win = Ti.UI.createWindow({

backgroundColor : 'white'

});

Step 2:

Now lets create the label 'Hello World'. Titanium provides a method called 'createLabel' to create a new label. The parameter passed to the method is a JSON object and it will define the properties of the label.

In this example I've set the property text color to 'Hello World' and the top property to 250.

The API is available at :
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Label

var myLabel = Ti.UI.createLabel({

text : 'Hello World',

top : 250

});

Step 3:

You need to add the UI components to your window. Adding the UI components to the window will make them visible when the window is opened.

win.add(myLabel);

Step 4:

Open the window.

win.open();

The complete Hello World code

var win = Ti.UI.createWindow({

backgroundColor : 'white'

});

var myLabel = Ti.UI.createLabel({

text : 'Hello World',

top : 250

});

win.add(myLabel);

win.open();

Copy the above code snippet on app.js and Run your application.

Adding Event Listeners

An event listener is used to capture certain events on your application. The simplest example is a button click. say you need to perform some task when the button is clicked. Then you will need to attach an event listener to the button and when the event lister identifies a click event you can trigger your code that needs to execute.
Lets use the Hello World example to add an event listener to a button.

Step 1:

Titanium provides a method called 'createButton' to create a new button. The parameter passed to the method is a JSON object and it will define the properties of the button.
In this example I've set the properties title, top, width and left.

The API is available at :
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button

var myButton = Ti.UI.createButton({

title : 'My Button',

top : 300,

width : 300,

left : 10

});

Step 2:

Add the button to the window.

win.add(myButton);

Step 3:

Now lets add an Event Listener to the button and when the button is clicked we will have a pop up saying the button is clicked.

The event listener function signature is,

addEventListener( String EventName, Callback<Object> callback )

The first parameter is the event to be captured. Like 'click', 'dbclick' etc.
The second parameter is a callback function that will execute when the button is clicked. So in simple the code/ function that needs to get executed when the button is clicked.

In our example we need to capture the 'click' event, so the first parameter needs to be 'click'. The second parameter is a function that actually gives an alert.

The following is an anonymous function that will create an alert.

function(e){

alert('My Button Clicked');

}

The following code snippet will add an event lister to the button

myButton.addEventListener('click', function(e){

alert('My Button Clicked');

});

The complete code snippet for our example will be as follows. Remove any existing code from app.js and add the following code.

var win = Ti.UI.createWindow({

backgroundColor : 'white'

});

var myLabel = Ti.UI.createLabel({

text : 'Hello World',

top : 250

});

win.add(myLabel);

var myButton = Ti.UI.createButton({

title : 'My Button',

top : 300,

width : 300,

left : 10

});

win.add(myButton);

myButton.addEventListener('click', function(e){

alert('My Button Clicked');

});

win.open();

Run Your application.

Now click the button. You will see the alert. :)

Appcelerator Titanium Tutorial - Hello World With Titanium

Pages

Wednesday, April 10, 2013

Get Ready For Titanium Certified Application Developer Exam (TCAD) & TCAD Sample Questions

Introduction to Appcelerator Titanium - Part 1