Action Bar Module for Titanium Mobile

ActionBarView.js

/*
 * 	Android API Guide
 *		http://developer.android.com/guide/topics/ui/actionbar.html
 *  Android Design Guide
 *		http://developer.android.com/design/patterns/actionbar.html
 *  Titanium Mobile will support someday
 *		https://jira.appcelerator.org/browse/TIMOB-2371
 */
var osName = Ti.Platform.osname,
	isAndroid = osName==='android',
	isIOS = osName==='iphone' || osName==='ipad' || osName==='ipod',
	theme = {
		fontFamily : isIOS ? 'Helvetica Nue' : 'Droid Sans',
		backgroundColor : '#cdcdcd',
		borderColor : '#b5b5b5',
		textColor : '#5f5f5f',
		dividerColor : '#b5b5b5',
		selectedColor : '#00b7e3',
		height : '48dp',
		buttonHeight : '46dp',
		selectedButtonHeight : '42dp',
		dividerWidth : 1,
		dividerHeight : '32dp',
		fontSize : '12dp'
	},
	events = {
		'TAB_CLICK' : 'ActionBar.NavigationTab:Click'
	};

function createNavigationTabGroup(tabs){
	var _tabs = tabs || [],
		_tabCount = _tabs.length,
		_i = 0,
		_deviceWidth = Ti.Platform.displayCaps.platformWidth,
		_width = (_deviceWidth / _tabCount) - 1,
		_selectedTab,
		_view = Ti.UI.createView({
			layout : 'horizontal',
			width : Ti.UI.FILL,
			top : 1,
			bottom : 1
		});

	for(; _i < _tabCount; _i++){
		_tabs[_i].width = _width;
		_tabs[_i] = buildTab(_tabs[_i]);
		_view.add(_tabs[_i].tabView);
		_view.add(tabSeperator());
	}

	_view.addEventListener(events.TAB_CLICK, function(e) {
		var _n = 0,
			_len = _tabs.length,
			_aTab;
		for(; _n<_len; _n++){
			_aTab = _tabs[_n];
			if(_aTab.tabView.id==_selectedTab){
				_aTab.select(false);
			}
			if(_aTab.tabView.id==e.tabId){
				_aTab.select(true);
			}
		}
		_selectedTab = e.tabId;
	});

	function tabSeperator(){
		var seperatorView = Ti.UI.createView({
				backgroundColor : theme.backgroundColor,
				width : theme.dividerWidth
			}),
			seperator = Ti.UI.createView({
				height : theme.dividerHeight,
				backgroundColor : theme.dividerColor
			});

		seperatorView.add(seperator);
		return seperatorView;
	}

	function buildTab(params){
		var _params = params || {},
			_tabView,
			_tabItem,
			_tabCover,
			_config = {
				id : _params.id || (new Date()).getTime()+'',
				text : _params.text || "Nav",
				icon : _params.icon,
				selectedColor : _params.selectedColor || theme.selectedColor,
				backgroundColor : _params.backgroundColor || theme.backgroundColor,
				textColor : _params.textColor || theme.textColor,
				width : _params.width || 'auto',
				selected : _params.selected || false
			};

		if(_config.selected){
			_selectedTab = _config.id;
		}

		_tabView = Ti.UI.createView({
			id : _config.id,
			backgroundColor : _config.selectedColor,
			width : _config.width,
			layout : 'vertical'
		});

		if(_config.icon) {
			_tabItem = Ti.UI.createImageView({
				image: _config.icon,
				backgroundColor : _config.backgroundColor,
				height : theme.selectedButtonHeight,
				left : 0,
				right : 0
			});
	
			_tabView.add(_tabItem);
		} else {
			_tabItem = Ti.UI.createLabel({
				text : _config.text,
				color  : _config.textColor,
				backgroundColor : _config.backgroundColor,
				textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
				height : theme.selectedButtonHeight,
				left : 0,
				right : 0,
				font   : {
					fontSize   : theme.fontSize,
					fontWeight : 'bold'
				}
			});
	
			_tabView.add(_tabItem);
		}
		
		_tabCover = Ti.UI.createView({
				backgroundColor : _config.backgroundColor,
				height : theme.buttonHeight,
				left : 0,
				right : 0,
				visible: !_config.selected
		});
		
		_tabView.add(_tabCover);

		_tabView.addEventListener('click', function() {
			_view.fireEvent(
				events.TAB_CLICK,
				{ tabId : _tabView.id }
			);
		});

		return {
			tabView : _tabView,
			select : function(bool){
				_tabCover.visible = !bool;
			}
		};
	}

	return _view;
}

function ActionBarView(args) {
	var ActionBar = Ti.UI.createView({
			height : theme.height,
			backgroundColor : theme.borderColor,
			layout : 'horizontal',
			top : 0
		}),
		navigationTabGroup = createNavigationTabGroup(args.tabs);

	ActionBar.add(navigationTabGroup);

	return ActionBar;
}
ActionBarView.HEIGHT = parseInt(theme.height);
ActionBarView.EVENT_TAB_CLICK = events.TAB_CLICK;

module.exports = ActionBarView;

app.js

//Here is how it is used
var ApplicationWindow = Ti.UI.createWindow({
		navBarHidden : true,
		exitOnClose  : true,
		backgroundColor : '#fff'
	}),
	ActionBarView = require('ActionBarView'),
	actionBar = new ActionBarView({
		tabs : [
			{
//				text : 'Home',
				icon : '/images/home.png'
				id : 'home',
				selected : true
			},
			{
				text : 'Products',
				id : 'products'
			},
			{
				text : 'Info',
				id : 'info'
			},
			{
				text : 'Cart',
				id : 'cart'
			}
		]
	});

ApplicationWindow.add(actionBar);

actionBar.addEventListener(
	'ActionBar.NavigationTab:Click',
	function(e){
		//Add code to manage windows or views
		alert(e.tabId); //fire alert to make sure this works
	}
);

ApplicationWindow.open();