Split window-like CommonJS component for Titanium

example_usage.js

// define your leftView and rightView content views here...
var Win = require('ui/components/splitwindow'),
	win = new Win({
		splitWidth: 300,
		masterTitle: 'Master',
		detailTitle: 'Details',
		navBarHidden: true,
		backgroundColor: 'transparent',
	}, leftView, rightView);
win.open();

splitwindow.js

var is = {},
  osname = Ti.Platform.osname;
is.ios = (osname === 'iphone' || osname === 'ipad' || osname === 'ipod'),
is.width = Ti.Platform.displayCaps.platformWidth;
	
var Titlebar = function(title) {
	var hView = Ti.UI.createView({
		top:0, left: 0,
		height: 40,
		width:'100%',
		backgroundColor:'transparent',
		borderRadius: 0,
	});
	if(is.ios) {
		hView.backgroundGradient = {
	        type: 'linear',
	        colors: [ { color: '#666'}, { color: '#020202' } ],
		}
	} else {
		hView.backgroundColor = '#020202';
	}
	var titleView = Ti.UI.createView({
		layout: 'horizontal',
		width: Ti.UI.SIZE,
		height: Ti.UI.SIZE,
		top: 0
	});
	var label = Ti.UI.createLabel({
		text: title,
		color: '#fff',
		width: Ti.UI.SIZE,
		height: Ti.UI.SIZE,
		top: 3, left: 20,
		font:{
			fontWeight:'bold',
			fontSize:22,
		}
	});
	titleView.add(label);
	hView.add(titleView);
	
	return hView;
};
var SplitWindow = function(params, master, detail) {
	var options = params || {};
	var splitWidth = options.splitWidth || 300;
	var win = Ti.UI.createWindow(options);
	win.layout = 'horizontal';
	// add left/master view
	var mView = Ti.UI.createView({
		width: splitWidth,
	});
	var masterTitle = new Titlebar(options.masterTitle || 'Master');
	mView.add(masterTitle);
	win.masterTitle = masterTitle;
	if(master) {
		master.top = 40;
		mView.add(master);
		win.master = master;
	} else {
		win.master = mView;
	}
	win.add(mView); 

	var divider = Ti.UI.createView({
		width: 1, height: Ti.UI.FILL,
		backgroundColor: '#ccc'
	});
	win.add(divider);
	
	// add right/detail view
	var rView = Ti.UI.createView({
		width: (is.width - splitWidth - 1),
	});
	rView.add(new Titlebar(options.detailTitle || 'Detail'));
	if(detail) {
		detail.top = 40;
		rView.add(detail);
		win.detail = detail;
	} else {
		win.detail = rView;
	}
	
	win.add(rView); 

	if(typeof options.backgroundImage == 'string') {
		win.backgroundColor = 'transparent';
		mView.backgroundColor = 'transparent';
		rView.backgroundColor = 'transparent';
		win.backgroundImage = options.backgroundImage;
	}

	return win;
}

module.exports = SplitWindow;