Home
Blog
Feb. 2011
iPhone and Android application development using Titanium

3rd Feb., 2011

Comments

Reactions

iPhone and Android application development using Titanium

By : ashok

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

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

https://github.com/appcelerator/KitchenSink/
https://github.com/agiliq/meditracker, our sample application for tracking medicine timings.
http://itunes.apple.com/in/app/track-my-med/id415622449?mt=8# The github code on Apple App store
http://market.android.com/details?id=com.agiliq.trackmymed same code on Android stors

Topics : iphone android titanium mobile applications

Comments

rosetta stone 31st March, 2011

Rosetta Stone is proprietary language-learning software produced by Rosetta Stone;Ltd. Its title and its logo refer to the Rosetta Stone , an artifact inscribed in multiple languages that helped Jean-Fran?ois Champollion to decipher Egyptian hieroglyphics.
The Rosetta Stone software uses a combination of images, text, and sound, with difficulty levels increasing as the student progresses, in order to teach various vocabulary terms and grammatical functions intuitively, without drills or translation. They call this the Dynamic Immersion method;. The goal is to teach languages the way first languages are learned.Now,the Rosetta Stone;Ltd have several kinds of the Rosetta Stone language on sale,such as Rosetta Stone Spanish,Rosetta Stone German and Rosetta Stone Italian, these Rosetta Stone Languages are very popular now!

Conor Clafferty 16th Aug., 2011

For any beginners looking at starting app development with titanium they should check out the TiBountyHunter app. This is the app that you will build during the Titanium Certified App Developer Training and is provided on the appcelerator website.

Unlike the KitchenSink App, the TiBountyHunter app shows you how to structure your code properly. This is in my opinion one of the best lessons as a messy app will no doubt be a nightmare to maintain in the future.

Ashish 19th Sept., 2011

Hey Ashok,
How can i save datetime.now() in my localDB ??
I'm developing an sample app,
Which can sends a message to Server(djangoApp-API support) and saves the message into local-db(mobile App) simultaneously.

Ashish 19th Sept., 2011

Jacob Dixon 11th Oct., 2011

Titanium seems to be a useful tool and tutorial over here is very nice to understand and go follow each and every steps of installation of Titanium, Can you please reply regarding the different features about it.