app.js

//require custom component
var StopLightView = require('StopLightView');

//component test harness
var app = Ti.UI.createWindow({
	backgroundColor:'white'
});

//create the component
var stopLight = new StopLightView();
app.add(stopLight);

//track stop light state
var currentState = Ti.UI.createLabel({
	text:'Light is currently: '+stopLight.lightColor(),
	textAlign:'center',
	top:10,
	height:'auto',
	color:'#000000',
	font: {
		fontWeight:'bold',
		fontSize:18
	}
});
app.add(currentState);

//listen for changes in the stoplight's internal state
stopLight.addEventListener('lightchange', function(e) {
	currentState.text = 'Light is currently: '+e.color;
});

//stop light controls
var controls = Ti.UI.createView({
	backgroundColor:'#cdcdcd',
	height:60,
	bottom:0
});
app.add(controls);

//trigger the "go" function on the stop light
var go = Ti.UI.createButton({
	left:10,
	top:5,
	height:50,
	width:140,
	title:'Switch to go'
});
go.addEventListener('click', stopLight.go);
controls.add(go);

//trigger the "stop" function on the stop light
var stop = Ti.UI.createButton({
	right:10,
	top:5,
	height:50,
	width:140,
	title:'Switch to stop'
});
stop.addEventListener('click', stopLight.stop);
controls.add(stop);

//show app UI
app.open();

StopLightView.js

//helper function to construct light views
function createLightView(color,on) {
	return Ti.UI.createView({
		backgroundColor:color,
		top:10,
		width:60,
		height:60,
		opacity:(on) ? 1 : 0.2
	});
}

//main component constructor
function StopLightView() {
	//create component instance
	var self = Ti.UI.createView({
		height:220,
		width:80,
		backgroundColor:'#232323',
		layout:'vertical'
	});
	
	//create state/instance data
	var lightColor = 'red';
	
	//construct UI
	var greenLight = createLightView('green');
	self.add(greenLight);
	
	var yellowLight = createLightView('yellow');
	self.add(yellowLight);
	
	var redLight = createLightView('red', true);
	self.add(redLight);
	
	//private helper function to handle changing of light colors
	function changeColor(newColor) {
		//update object state
		lightColor = newColor;
		
		//toggle opacity, based on the color requested
		switch(newColor) {
			case 'green':
				greenLight.opacity = 1;
				yellowLight.opacity = 0.2;
				redLight.opacity = 0.2;
				break;
			case 'yellow':
				greenLight.opacity = 0.2;
				yellowLight.opacity = 1;
				redLight.opacity = 0.2;
				break;
			default:
				greenLight.opacity = 0.2;
				yellowLight.opacity = 0.2;
				redLight.opacity = 1;
				break;
		}
		
		//when light change is complete, fire custom event on component instance
		self.fireEvent('lightchange', {
			color:lightColor
		});
	}
	
	//create public component interface
	
	//create an accessor for the current color state
	//CAUTION - "getXXX" and "setXXX" functions are RESERVED on iOS, and you can't name functions with that prefix!
	self.lightColor = function() {
		return lightColor;
	};
	
	//after a transitional period, change the color from yellow to red
	self.stop = function() {
		if (lightColor !== 'red') {
			changeColor('yellow');
			setTimeout(function() {
				changeColor('red');
			},1500);
		}
	};
	
	//change the light color to green for a time, then stop
	self.go = function() {
		changeColor('green');
		setTimeout(function() {
			self.stop();
		},4000);
	};
	
	//return component instance
	return self;
}

//make component constructor the public interface for the module
module.exports = StopLightView;