LeatherFace Application Code

app.js

// 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({
	backgroundImage:'/images/tabbar.png'
});


// Component Creation

function createWindow(_args) {
	return Ti.UI.createWindow({
		title: _args.title || 'Title Bar',
		backgroundImage:'/images/bg.png',
		barImage:'/images/titlebg.png'
	});
}

function createTab(_args) {
	return Ti.UI.createTab({
		icon:'/images/'+_args.title+'.png',
		title:_args.title,
		window:_args.win
	});
}

function createButton(_args) {
	var btn = Ti.UI.createButton({
		width:180,
		height:41,
		top:35,
		color:'#fff',
		title:_args.title,
		tabIndex:_args.idx,
		backgroundImage:'/images/btn_'+_args.img+'.png'
	});
	btn.addEventListener('click', function(e) {
		tabGroup.setActiveTab(e.source.tabIndex);
	});
	return btn;
}

function createAlert(_args) {
	//283x170
	var alert = Ti.UI.createView({
		width:283,
		height:170,
		visible:false,
		backgroundImage:'/images/alert.png'
	});
	
	var label = Ti.UI.createLabel({
		text:'This is a custom alert box.\n\nAre you sure that you really want to do that?',
		width:263,
		height:100,
		top:10,
		textAlign:'center',
		color:'#fff',
		font:{
			fontWeight:'bold',
			fontSize:16
		}
	});
	alert.add(label);
	
	var cancel = Ti.UI.createButton({
		width:127,
		height:42,
		bottom:10,
		left:10,
		title:'Wait a tick ...',
		backgroundImage:'/images/cancel.png'
	});
	cancel.addEventListener('click', function(e) {
		alert.hide();
	});
	alert.add(cancel);
	
	var ok = Ti.UI.createButton({
		width:127,
		height:42,
		bottom:10,
		right:10,
		title:'Lets do it!',
		backgroundImage:'/images/ok.png'
	});
	ok.addEventListener('click', function(e) {
		alert.hide();
	});
	alert.add(ok);
	
	return alert;
}


// Tab Window Creation

function createHomeWindow(_win) {
	_win.layout = "vertical";
	var btn_fav = createButton({
		title:'Favorites',
		img:'green',
		idx:1
	});
	_win.add(btn_fav);
	
	var btn_mail = createButton({
		title:'Mail',
		img:'dbrown',
		idx:2
	});
	_win.add(btn_mail);
	
	var btn_chat = createButton({
		title:'Chat',
		img:'brown',
		idx:3
	});
	_win.add(btn_chat);
	
	var btn_settings = createButton({
		title:'Settings',
		img:'green',
		idx:4
	});
	_win.add(btn_settings);
}

function createFavWindow(_win) {
	var alert = createAlert({text:'This is a custom alert box'});
	_win.add(alert);
	
	var edit = Ti.UI.createButton({
		width:50,
		height:30,
		backgroundImage:'/images/edit.png',
		title:'Edit',
		font:{
			fontSize:12,
			fontWeight:'bold'
		}
	});
	edit.addEventListener('click', function(e) {
		alert.show();
	});
	_win.rightNavButton = edit;
}

function createMailWindow(_win) {
	var data = [],
		row, label;
	for (var i = 0; i < 10; i++) {
		row = Ti.UI.createTableViewRow({
			rightImage:'/images/table_right.png',
			leftImage:'/images/mail.png'
		});
		label = Ti.UI.createLabel({
			text: 'Mail #' + (i+1),
			color: '#420404',
			shadowColor:'#FFFFE6',
			shadowOffset:{x:0,y:1},
			textAlign:'left',
			top:10,
			left:85,
			width: 'auto',
			height:'auto',
			font:{fontWeight:'bold',fontSize:18}
		});
		row.add(label);
		data.push(row);
	}
	var tableview = Titanium.UI.createTableView({
		data:data,
		style:Titanium.UI.iPhone.TableViewStyle.PLAIN,
		backgroundColor:'transparent'
	});
	_win.add(tableview);
}

function createChatWindow(_win) {
	var search = Titanium.UI.createSearchBar({
		backgroundImage:'/images/searchbg.png',
    	showCancel:false,
    	height:43,
    	top:0,
	});
	_win.add(search);
	
	var label = Ti.UI.createLabel({
		text:'Click Window To Cancel Search',
		textAlign:'center',
		top:20
	});
	_win.add(label);
	_win.addEventListener('click', function(e) {
		search.blur();
	});
}

function createSettingsWindow(_win) {
	var data = [];

	for (var c=0;c<2;c++) {
		data[c] = Ti.UI.createTableViewSection({
			headerTitle:'Group '+(c+1)
		});
		for (var x=0;x<4;x++) {
			data[c].add(
				Ti.UI.createTableViewRow({
					title:'Group '+(c+1)+', Row '+(x+1)
				})
			);
		}
	}

	// create table view
	var tableview = Titanium.UI.createTableView({
		data:data,
		style: Titanium.UI.iPhone.TableViewStyle.GROUPED,
		backgroundColor:'transparent'
	});
	_win.add(tableview);
}

var tabs = ['Home', 'Fav', 'Mail', 'Chat', 'Settings'],
	len = tabs.length,
	i = 0,
	win, tab;

for (; i < len; i++) {
	win = createWindow({title:tabs[i]});
	tab = createTab({title:tabs[i], win:win});
	
	switch (tabs[i]) {
		case 'Home':
			createHomeWindow(win);
			break;
		case 'Fav':
			createFavWindow(win);
			break;
		case 'Mail':
			createMailWindow(win);
			break;
		case 'Chat':
			createChatWindow(win);
			break;
		case 'Settings':
			createSettingsWindow(win);
			break;
		default:
			createHomeWindow(win);
	}
	
	tabGroup.addTab(tab);
}



// open tab group
tabGroup.open();