UI module with callbacks - Titanium Appcelerator

app.js

var UI = require('ui');

var btn = UI.Button({
	title: 'Hello World',
	width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	onClick: function(){
		alert('Button Clicked');
	}
});

var win = UI.Win({
	backgroundColor: 'white',
	fullscreen: false,
	onFocus: function(){
		// some code
	},
	onBlur: onWindowBlur,
	subviews: [ btn ]
});

function onWindowBlur(e) {
	// some code
	UI.Alert({
		title:'meh',
		message: 'foo',
		buttonNames: ['ok', 'cancel']
	},  function(e) {
			// some code
	});
}

win.open();

ui.js

var UI = exports;
(function(){
	var Android = Ti.Platform == 'android';
	var iPhone = Ti.Platform == 'iphone';

	// Some constants
	UI.FIT = UI.SIZE			= Ti.UI.SIZE;
	UI.FILL					= Ti.UI.FILL;
	UI.RETURN_KEY_NEXT			= Ti.UI.RETURNKEY_NEXT;
	UI.RETURN_KEY_GO			= Ti.UI.RETURNKEY_GO;
	UI.TABLEVIEW_GROUPED			= Ti.UI.iPhone.TableViewStyle.GROUPED;
	UI.TEXTFIELD_AUTOCAPITALIZATION_NONE 	= Ti.UI.TEXT_AUTOCAPITALIZATION_NONE;
	UI.TEXTFIELD_KEYBOARD_NUMPAD		= Ti.UI.KEYBOARD_DECIMAL_PAD;
	UI.TEXTFIELD_KEYBOARD_DEFAULT		= Ti.UI.KEYBOARD_DEFAULT;
	UI.ACTIVITY_INDICATOR_BIG		= Ti.UI.iPhone.ActivityIndicatorStyle.BIG;
	UI.TABLEVIEW_SELECTION_STYLE_NONE	= Ti.UI.iPhone.TableViewCellSelectionStyle.NONE;
	UI.TABLEVIEW_SELECTION_STYLE_BLUE	= Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE;
	UI.TEXT_ALIGN_LEFT			= 'left';
	UI.TEXT_ALIGN_CENTER			= 'center';
	UI.TEXT_ALIGN_RIGHT			= 'right';

	/**
	 * Adds events to Ti.UI.Stuff
	 * @param {Ti.UI.Something} TiElement	Ti.UI.Element
	 * @param {String} EventName		Name of event, ie. onClick
	 * @param {Function} Event 		Acutal event callback
	 */
	function addEvent(TiElement , EventName, Event) {
		if(!Event) return;
		var name = String(EventName).replace('on', '').toLowerCase();
		TiElement.addEventListener(name, Event);
	}

	/**
	 * Checks wether a key value pair a callback function or not
	 * @param  {string}  key   String has to be on[Uppercase]
	 * @param  {object}  value Must be a function to be a callback
	 * @return {Boolean}       True or False
	 */
	function isCallback(key, value) {
		var begin = key.slice(0,2);	// gets the first two characters
		var next = key.slice(2,3);	// gets the third
		// The first two characters must be "on", the next one must be upper case
		// and the value must be afunction
		if(begin == 'on' && next == next.toUpperCase() && typeof value == 'function')
		  return true;
		return false;
	}

	/**
	 * Create Ti.UI.Stuff with callback functions. The callbacks will not be inserted into the proxy
	 * @param  {Ti.UI.Proxy} TiElement	Proxy to create - must be in the form of Ti.UI.createView
	 * @param  {Object} Options  		Parameters to pass
	 * @return {Ti.UI.Proxy}      
	 */
	function createElement(TiElement, Options) {
		// Create the subviews array
		var subviews = [];
		// Create the object to hold the events
		var callbacks = {};
		// Iterate through the arguments to fetch the callbacks and the subviews
		// Once added to the object, delete from the Options
		// Passing custom functions or Ti.Proxies to Ti.Proxies is bad practice!
		for(var key in Options) {
			if(isCallback(key, Options[key])){
				callbacks[key] = Options[key];
				delete Options[key];
			}
			if(key == 'subviews') {
				subviews = Options[key];
				delete Options[key];				
			}
			
		}
		// Once the callbacks are extracted, create the proxy
		var el = TiElement(Options);
		// Add the event listeners to the proxy
		for(var key in callbacks) {
			addEvent(el, key, callbacks[key]);
		}
		for(var i = 0, len = subviews.length; i < len; i++) {
			el.add(subviews[i]);
		}
		// Null out variables, not sure if necessary, who knows!
		callbacks = null;
		Options = null;
		TiElement = null;
		subviews = null;
		return el;
	}

	/**
	 * Example on how to use above function:
	 * 
	 * var UI = require('ui'); // this file
	 * var button = UI.Button({
	 *	width: 100,
	 *	height: 40,
	 *	title: 'Hello World!',
	 *	onClick: function() {
	 *		alert('clicked!');
	 *	}
	 * });
	 */

	/////////////////////////////////////////////
	//////////////// Generic UI /////////////////
	/////////////////////////////////////////////

	UI.Button = function(args){
		args = args || {};
		if(!args.top || !args.bottom) {
			args.height = args.height || UI.FIT;
		}
		if(!args.left || !args.right) {
			args.width = args.width || UI.FIT;
		}
		return createElement(Ti.UI.createButton, args);
	};
	UI.Image = function(args){
		args = args || {};
		return createElement(Ti.UI.createImageView, args);
	};
	UI.Label = function(args){
		args = args || {};
		if(Android){
			args.color = args.color || 'black';
		}
		return createElement(Ti.UI.createLabel, args);
	};
	UI.Line = function(args){
		args = args || {};
		return UI.View({
			width: UI.FILL,
			height:1,
			backgroundColor: args.color || 'black'
		});
	};
	UI.Table = function(args){
		args = args || {};
		return createElement(Ti.UI.createTableView, args);
	};
	UI.TableRow = function(args){
		args = args || {};
		args.height = args.height || 44;
		return createElement(Ti.UI.createTableViewRow, args);
	};
	UI.TableSection = function(args){
		args = args || {};
		args.height = args.height || 22;
		return createElement(Ti.UI.createTableViewSection ,args);
	};
	UI.TextArea = function(args) {
		args = args || {};
		args.font = args.font || {};
		args.font.fontSize = args.font.fontSize || 17;
		args.suppressReturn = args.suppressReturn === true;
		if(Android){
			args.color = args.color || 'black';
		}
		return createElement(Ti.UI.createTextArea, args);
	};
	UI.TextField = function(args){
		args = args || {};
		if(Android){
			args.color = args.color || 'black';
		}
		return createElement(Ti.UI.createTextField, args);
	};
	UI.View = function(args){
		args = args || {};
		return createElement(Ti.UI.createView, args);
	};
	UI.Win = function(args){
		args = args || {};
		if(Android){
			args.fullscreen = args.fullscreen || false;
		}
		return createElement(Ti.UI.createWindow, args);
	};

	/**
	 * This is an intersting one, different from the others
	 * The args can be an object or string
	 * The alert will ALERT!
	 * @param {Stiring or Object}   args
	 * @param {Function} callback Fires when clicked
	 */
	UI.Alert = function(args, callback){
		if(!args){
			return;
		}
		var params = {};
		if(typeof args == 'string'){
			params.title = 'Alert!!';
			params.message = args;
			if(Android){
				params.buttonNames = ['Ok'];
			}
		} else {
			for(var key in args){
				params[key] = args[key];
			}
		}
		var el = Ti.UI.createAlertDialog(params);
		if(callback){
			el.addEventListener('click', callback);
		}
		el.show();
	}

	/////////////////////////////////////////////
	///////////////// Custom UI /////////////////
	/////////////////////////////////////////////

	UI.SwitchRow = function(args){
		args = args || {};

		var label = UI.Label({
			text: args.title || '',
			left: 10,
			height: UI.FILL,
			width: UI.FIT,
			font:{ fontWeight: 'bold' }
		});

		var toggle = Ti.UI.createSwitch({
			right: 10,
			value: args.value || '',
		});
		delete args.title;

		args.selectionStyle = args.selectionStyle || TABLEVIEW_SELECTION_STYLE_NONE;
		args.height = 44;
		args.className = 'switch_row';

		var el = UI.TableRow(args);
		el.add(label);
		el.add(toggle);

		return {
			row: el,
			toggle: toggle,
			getValue: function(){ return getValue.value; }
		}
	}

	UI.FieldRow = function(args){
		args = args || {};

		var label = UI.Label({
			text: args.title || '',
			left: 10,
			height: UI.FILL,
			width: UI.FIT,
			font:{ fontWeight: 'bold' }
		});

		var textField = UI.TextField({
			left: 110,
			right: 20,
			height: UI.FILL,
			color: '#2f4b81',
			textAlign: args.textAlign || UI.TEXT_ALIGN_LEFT,
			keyboardType: args.type || UI.TEXTFIELD_KEYBOARD_DEFAULT,
			autocapitalization: args.autocapitalization || UI.TEXTFIELD_AUTOCAPITALIZATION_NONE,
			passwordMask: args.password || false,
			value: args.value || '',
			hintText: args.hint || '',
			enabled: args.enabled === undefined ? true : args.enabled,
		});
		delete args.textAlign;
		delete args.type;
		delete args.enabled;
		delete args.title;

		args.selectionStyle = args.selectionStyle || UI.TABLEVIEW_SELECTION_STYLE_NONE;
		args.height = 44;
		args.className = 'login_row';

		var el = UI.TableRow(args);
		el.add(label);
		el.add(textField);
		return {
			row: el,
			textField: textField,
			getValue: function(){ return textField.value; },
			setValue: function(val){ textField.value = val; }
		}
	}

	UI.Loading = function(args, win){
		args = args || {};
		args.message = args.message || 'Loading, please wait...'
		args.width = UI.FIT;
		args.height = UI.FIT;
		args.color = 'white';
		args.style = args.style || UI.ACTIVITY_INDICATOR_BIG;
		args.top = 100;
		var w = Ti.UI.createWindow();
		var o = Ti.UI.createView({
			width: UI.FILL,
			height: UI.FILL,
			backgroundColor: 'black',
			opacity: 0.5
		})
		w.add(o);
		var l = Ti.UI.createActivityIndicator(args);
		w.add(l);
		return {
			show: function(){
				if(win){
					win.add(w);
				} else {
					w.open();
				}
				l.show()
			},
			hide: function(){
				l.hide()
				if(win){
					win.remove(w);
				} else {
					w.close();
				}
				w = null;
				l = null;
			}
		}
	}
})();