Getting Started with Appcelerator Titanium

This blog series will teach you on how to create a complicated list application.

I assume that you have installed the appcelerator in your system as written here, if not please go ahead. I will wait.

A List App

After installation, go ahead and open your Titanium IDE. From the menu, you will find File>New>Titanium Mobile project. A dialog wizard appears. We will name our app as ListApp.

Please note that the Titanium SDK version I selected is 1.8.2. Version 2.0 throws an exception similar to below.

After pressing “Finish”, the IDE generates a bunch of files which are the minimum amount of codes you would need to run an appcelerator titanium app. The file you need to look at immediately should be located in “Resources>app.js”. That file has some sample code written as reference.

...
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();
...

But that code only creates 2 tabs which are not what you need in this blog post. Go ahead and delete all those.

You are now ready to create the app.

Lets create some data

var data = [
	{title:'List Content 1'},
	{title:'List Content 2'},
	{title:'List Content 3'},
	{title:'List Content 4'}
];

In titanium, a data is a simple json array. To become a real list, you need to give this data to a view object. That is called table view.

// create table view
var tableview = Titanium.UI.createTableView({
	data:data
});

But a TableView is still not enough. You will need a Window to display that view.

//create a window object
var win1 = Titanium.UI.createWindow({  
	 backgroundColor:'#fff'
});
//add table view to that object
win1.add(tableview) 

A Window is a container that can be opened or closed. Because we only have one window right now, we will need to open that window immediately.

win1.open();

You can now run the application. Press the “Run” toolbar or through “Run>Run” in the menu. It should show the following.

Congratulations! You have created a very expensive list application.

You may download the source code for this application through Github

To download the code specific to this Part 1, do.

Part 1: Getting Started with Appcelerator Titanium
Part 2: Sliding Windows with Appcelerator Titanium
Part 3: Grouping the Table View in Titanium Mobile
Part 4: Add/Delete Items in the List with Titanium Mobile
Part 5: Using SQLite Database with Titanium Mobile
Part 6: Create the Database API in Appcelerator Titanium