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.


/build/iphone/Classes/NetworkModule.m:252:44: error: use of undeclared identifier 'UIRemoteNotificationTypeNewsstandContentAvailability'

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.


$ git clone git@github.com:HugeAim/titanium-list-app.git
$ git checkout part1

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

Though English is my country's official language it is not my native tongue. If you find anything wrong with my phrases, or any incorrect information, write it out loud in the comments section. The world will be a bit better that way.
Tagged with: ,
Posted in Javascript
One comment on “Getting Started with Appcelerator Titanium
  1. Aparna says:

    how to start with android using titanium?can u please guide me.

3 Pings/Trackbacks for "Getting Started with Appcelerator Titanium"
  1. [...] a previous post, we created a very simple list application consisting only of four list items given to a tableview [...]

  2. [...] my previous posts, we discussed about creating a simple list [...]

  3. [...] 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 Share this:DiggRedditStumbleUponFacebook Posted in Javascript, Titanium. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre user="" computer="" escaped="">