Appcelerator Titanium: Learning by examples #2


Multiple screen app

// 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();


//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var FirstView = require('FirstView');

win1.add(new FirstView());

//
// create controls tab and root window
//
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Tab 2',
    window:win2
});

var label2 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 2',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win2.add(label2);



//
//  add tabs
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// open tab group
tabGroup.open();


function FirstView() {
	
	// Top level container 
	var self = Ti.UI.createView({
		layout: 'vertical',		// vertical layout 
		top: 10					// margin from top is 10 
	});
	
	// Line 1 
	var row1 = Ti.UI.createView({
		layout: 'horizontal',
		height: 80
	});
	
	// adding to the container 
	self.add(row1);
	
	// Lets add some UI controls to the row1 
	
	var label1 = Titanium.UI.createLabel({
		color:'#999',
		text:'Label 1',
		font: {
			fontSize:20, 
			fontFamily:'Helvetica Neue'
		},
		textAlign:'center',
		width:'auto',
		left: 10
	});
	
	// 
	row1.add(label1);
	
	var textField1 = Ti.UI.createTextField({
		left: 10,									// left margin 
		keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD,	// Number keypad 
		borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,	// Better UI for iOS, no effect on Android 
		width: 160
	});
	
	row1.add(textField1);
	
	var button1 = Ti.UI.createButton({
		left: 10,
		title: 'Button1'
	});
	
	// adding click listener of the button 
	button1.addEventListener('click', function() {
		// alert will be displayed 
		alert(textField1.value);
	});
	
	row1.add(button1);
	
	var row2 = Ti.UI.createView({
		layout: 'horizontal',
		height: 80
	});
	
	self.add(row2);
	
	var button2 = Ti.UI.createButton({
		left: 10,
		title: 'Second View'
	});
	
	button2.addEventListener('click', function() {
		var SecondView = require('SecondView');
		var secondWindow = new SecondView();
		secondWindow.open();
	});
	
	row2.add(button2);
	
	return self;
}

module.exports = FirstView;

function SecondView() {
	
	var self = Ti.UI.createWindow({
		backgroundColor: '#ffffff',
		modal: true, 
		layout: 'horizontal'
	});
	
	var label = Ti.UI.createLabel({
		top: 20,
		left: 10,
		color: '#000000',
		text: 'Hello'
	});
	
	self.add(label);
	
	var closeButton = Ti.UI.createButton({
		top: 10,
		left: 10,
		title: 'Close'
	});
	
	closeButton.addEventListener('click', function() {
		self.close();
	});
	
	self.add(closeButton);
	
	return self;
}

module.exports = SecondView;

Preferences

// set property 
Ti.App.Properties.setInt('hello', 5);

// get property 
var hello = Ti.App.Properties.getInt('hello');
if (hello == null) {
	hello = 0;
}

Events

Window close

button2.addEventListener('click', function() {
	var SecondView = require('SecondView');
	var secondWindow = new SecondView();
	secondWindow.addEventListener('close', function() {
		// this event will be called on closing the new window 
	});
	secondWindow.open();
});

Custom event

// app.js
tab1.addEventListener('focus', function() {
	Ti.App.fireEvent('customEvent');
});

// FirstView.js
Ti.App.addEventListener('customEvent', function() {
		
});
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s