Learn TITANIUM-APPCELERATOR with Real Code Examples

// app.js
var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        listView.data = todos;
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Demonstrates a simple Titanium app with a Todo list, adding tasks, and displaying them using native UI components.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count = 0;
    label.text = 'Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.open();

A simple counter app using Titanium UI with increment, decrement, and reset buttons.

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var addButton = Ti.UI.createButton({top:100, title:'Add'});
var listView = Ti.UI.createTableView({top:150, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo, i){
        var row = Ti.UI.createTableViewRow({title:todo.title});
        row.addEventListener('click', function(){
        todos.splice(i,1);
        refreshList();
        });
        return row;
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim()});
        todoInput.value = '';
        refreshList();
    }
});

win.add(todoInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app with delete functionality for each task.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;
var isDark = false;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var decButton = Ti.UI.createButton({title:'-', top:150});
var resetButton = Ti.UI.createButton({title:'Reset', top:200});
var themeButton = Ti.UI.createButton({title:'Toggle Theme', top:250});

incButton.addEventListener('click', function(){
    count++;
    label.text = 'Counter: ' + count;
});

decButton.addEventListener('click', function(){
    count--;
    label.text = 'Counter: ' + count;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

themeButton.addEventListener('click', function(){
    isDark = !isDark;
    win.backgroundColor = isDark ? 'black' : 'white';
    label.color = isDark ? 'white' : 'black';
});

win.add(label);
win.add(incButton);
win.add(decButton);
win.add(resetButton);
win.add(themeButton);
win.open();

Counter app with dark/light mode toggle using Titanium UI.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var counters = [0,0,0];

counters.forEach(function(count,i){
    var label = Ti.UI.createLabel({text:'Counter ' + (i+1) + ': 0', top:50+i*100, font:{fontSize:20}});
    var inc = Ti.UI.createButton({title:'+', top:80+i*100, left:50});
    var dec = Ti.UI.createButton({title:'-', top:80+i*100, left:120});

    inc.addEventListener('click', function(){
        counters[i]++;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });
    dec.addEventListener('click', function(){
        counters[i]--;
        label.text = 'Counter ' + (i+1) + ': ' + counters[i];
    });

    win.add(label);
    win.add(inc);
    win.add(dec);
});

win.open();

Multiple independent counters in one window.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var pauseButton = Ti.UI.createButton({title:'Pause/Resume', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var isRunning = true;
var interval = setInterval(function(){
    if(isRunning){
        count++;
        label.text = 'Counter: ' + count;
    }
},1000);

pauseButton.addEventListener('click', function(){
    isRunning = !isRunning;
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(pauseButton);
win.add(resetButton);
win.open();

Counter that automatically increments every second.

var todos = [];
var win = Ti.UI.createWindow({backgroundColor:'white'});

var todoInput = Ti.UI.createTextField({top:50, width:200, hintText:'New Todo'});
var priorityInput = Ti.UI.createTextField({top:90, width:200, hintText:'Priority'});
var addButton = Ti.UI.createButton({top:130, title:'Add'});
var listView = Ti.UI.createTableView({top:170, data:[]});

function refreshList(){
    listView.data = todos.map(function(todo){
        return Ti.UI.createTableViewRow({title:todo.title + ' (Priority: ' + todo.priority + ')'});
    });
}

addButton.addEventListener('click', function(){
    if(todoInput.value.trim() !== ''){
        todos.push({title: todoInput.value.trim(), priority: priorityInput.value.trim()});
        todoInput.value=''; priorityInput.value='';
        refreshList();
    }
});

win.add(todoInput);
win.add(priorityInput);
win.add(addButton);
win.add(listView);
win.open();

Todo app where each task has a priority and displays it.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 10;

var label = Ti.UI.createLabel({text:'Time: 10', top:50, font:{fontSize:24}});
var startButton = Ti.UI.createButton({title:'Start', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

var timer;
startButton.addEventListener('click', function(){
    clearInterval(timer);
    timer = setInterval(function(){
        if(count>0) { count--; label.text='Time: ' + count; }
    },1000);
});

resetButton.addEventListener('click', function(){
    clearInterval(timer);
    count=10;
    label.text='Time: ' + count;
});

win.add(label);
win.add(startButton);
win.add(resetButton);
win.open();

Countdown timer starting from 10 seconds.

var win = Ti.UI.createWindow({backgroundColor:'white'});
var count = 0;

var label = Ti.UI.createLabel({text:'Counter: 0', top:50, font:{fontSize:24}});
var incButton = Ti.UI.createButton({title:'+', top:100});
var resetButton = Ti.UI.createButton({title:'Reset', top:150});

incButton.addEventListener('click', function(){
    count++;
    label.text='Counter: ' + count;
    if(count===10){
        Ti.UI.createAlertDialog({title:'Alert', message:'Count reached 10!'}).show();
    }
});

resetButton.addEventListener('click', function(){
    count=0;
    label.text='Counter: ' + count;
});

win.add(label);
win.add(incButton);
win.add(resetButton);
win.open();

Counter shows an alert when it reaches 10.