In this lesson, Dr. Rafael Hernandez will teach you how to add simple interactivity to an application through the use of an event listener.

Here is the code in video, you may need it.

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

// Home window
var win1 = Titanium.UI.createWindow({
	title:'Event Listeners',
	backgroundColor:'#fff'
});

var headerLabel = Titanium.UI.createLabel({
	top:0,
	left:10,
	height:"auto",
	width:"auto",
	text:"Things are lookin' up...",
	textAlign:"left",
	font:{fontFamily:"American Typewriter", fontSize:24}
});

var happyFace = Titanium.UI.createImageView({
	url:"images/face-right.png"
});

var caption = Titanium.UI.createLabel({
	bottom:10,
	right:10,
	height:"auto",
	width:"auto",
	text:"... and I'm facing left & lookin' right",
	textAlign:"right",
	font:{fontFamily:"American Typewriter", fontSize:18}	
});

var tab1 = Titanium.UI.createTab({
	icon:'KS_nav_views.png',
	title:'Example 1',
	window:win1
});

happyFace.addEventListener("swipe", function(e){
	if (e.direction == "left"){
		e.source.url = "images/face-left.png"; 
		caption.text = "... and I'm facing left & lookin' left"; 
	} else if (e.direction == "right"){
		e.source.url = "images/face-right.png"; 
		caption.text = "... and I'm facing left & lookin' right";	
	}
}); 

win1.add(happyFace);
win1.add(headerLabel);
win1.add(caption);