iPhone and Android application development using Titanium

Titanium Mobile is Appcelerator’s development platform for developing cross-platform native mobile applications. In this article we will be introducing you to installation and developing applications using Titanium.

# Installation

Follow the steps mentioned here, to install Titanium and the corresponding sdks for your developement platform

# Hello world application

Creating a new application and aplication structure is elaborately described in appcelerator gettting started guide

# Creating Forms

# Field Label

var win = Titanium.UI.currentWindow; // get refernce to the current window
var label = Titanium.UI.createLabel({
	text: 'Label Name',
	height: 50,
	color: '#000000',
	font:{fontSize:14},
	top: 20, // vertical postion of label on the screen w.r.t screen top
	left: 20, // horizontal postion of label on the screen w.r.t screen left
	width: 200 // width of the label
});
win.add(label); // add label to the current window

Check more properties of label in Titanium Label API

# Text Field

var text_field = Titanium.UI.createTextField({
	color:'#000000',
	height: 50,
	top: 70, // vertical postion of label on the screen w.r.t screen top
	left: 20, // horizontal postion of label on the screen w.r.t screen left
	width: 200, // width of the field
	borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(text_field); // add field to the current window

Check more properties of textfield in Titanium Text Field API

# Button

var button = Titanium.UI.createButton({
	title: 'Button',
	top: 160, // vertical postion of label on the screen w.r.t screen top
	width: 200, // width of the button
	height: 50 // width of the button
});
win.add(button); // add button to the current window Check more properties of button in [Titanium Button API](http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.Button-object)

# Submiting Form Data

Form submission has to be handled via ‘click’ event listner on button

button.addEventListener('click', function() {
	var field_value = text_field.value;
});

Screenshot of how the form with the above code looks Screenshot of form

Accessing database and saving data to database is mentioned in the next section.

# Database

# Creating database

var db = Titanium.Database.open('db_name');

‘open’ returns a reference to the opened database. If the database doesn’t yet exist, ‘open’ creates the database.

# Executing SQL queries

db.execute('CREATE TABLE IF NOT EXISTS table_name (id INTEGER PRIMARY KEY, field1 VARCHAR, field2 VARCHAR);');

# Inserting data into table

var f1 = 'v1';
var f2 = 'v2';
db.execute('INSERT INTO table_name (f1, f2) VALUES (?, ?)', f1, f2);

Id of last inserted row is the value of ‘lastInsertRowId’ property on the database var last_insert_id = db.lastInsertRowId;

# Selecting and looping over the data from table

var rows = db.execute('select * from table_name');

while (rows.isValidRow()) {
    // check below on how to access field values of a row
    rows.next();
}
rows.close();

# Accessing the field values of a row by index(zero based)

var id = rows.field(0);
var v1 = rows.field(1);
var v2 = rows.field(2);

# Accessing the field values of a row by name

var id = rows.fieldByName('id');
var v1 = rows.fieldByName('field1');
var v2 = rows.fieldByName('field2');

More about Database API

  • Titanium.Database.install(‘meditracker’);, raised invalid database path error when tried to run the application on device. So I opted to use Titanium.Database.open

# Code Resources

Buy Django ORM Cookbook

Thank you for reading the Agiliq blog. This article was written by dheeru on Feb 3, 2011 in mobile ,  applications .

You can subscribe ⚛ to our blog.

We love building amazing apps for web and mobile for our clients. If you are looking for development help, contact us today ✉.

Would you like to download 10+ free Django and Python books? Get them here