BoxModel Titanium Mobile Module

app.js

/*
 *  BoxModel Module Example
 *
 *  http://tihelp.me/?p=174
 */

var BoxModel = require("BoxModel");

var appWindow = Ti.UI.createWindow({
        title       : "BoxModel Example",
        exitOnClose : true,
        backgroundColor : "#FFFFFF"
    }),
    toggle = true,
    
    // We are using a label view to apply box model to
    // but you can use any view you want.
    aLabel = Ti.UI.createLabel({
    	color  : "#000000",
    	text   : "Integer in dolor quis risus accumsan porta sit amet a ipsum.",
    	backgroundColor : "#87FC70"
    }),

    // Create BoxModel object with height setting.
    // Use the constructor to set the height and width
    // to make sure the entire object is the size you want.
    // You can add a debug flag to make sure the margin and padding
    // are applied correctly. Example: new BoxModel(aLabel, { height : 100, debug : true })
    // You can change the debug colors in the module.
    contentBox = new BoxModel(aLabel, { height : 100 });

// Swap content box model settings on click
// by using the applyProperties BoxModel function
aLabel.addEventListener(
    "click",
    function(){
        if(toggle){
            toggle = false;
            contentBox.applyProperties({
                margin  : 20,
                padding : 20,
                borderWidth : 2,
                borderColor : "#000000",
                boderRadius : 5
            }); 
        }
        else{
            toggle = true;
            contentBox.applyProperties({
                height : 100,
                borderWidth : 0
            });
        }
    }
);

// Use getView() function to get UI object
appWindow.add(contentBox.getView());

appWindow.open();

BoxModel.js

/*
 * 	BoxModel Module
 *
 *  This module is used to mimic CSS Box Model features.
 *  It will convert any Ti.UI.View object into a BoxModel object.
 * 
 *  http://tihelp.me/?p=174
 */
var undef,
    defaultMargin     = 10,
    defaultPadding    = 10,
    debugMarginColor  = "#666666",
    debugPaddingColor = "#000000";

module.exports = function(view, options) {
	var container = Ti.UI.createView({
	    	height : Ti.UI.SIZE,
	    	width  : Ti.UI.SIZE,
	    	backgroundColor : options.debug ? debugMarginColor : "transparent"
	    }),
	    inner = Ti.UI.createView();

	setProps(inner, view, options || {});

	inner.add(view);
	container.add(inner);

	return {
		"getView" : function(){
			return container;
		},
		"applyProperties" : function(newOptions){
			setProps(inner, view, newOptions);
		}
	};
};

function setProps(inner, view, options){
	inner.applyProperties({
		top             : options.margin || defaultMargin,
		right           : options.margin || defaultMargin,
		bottom          : options.margin || defaultMargin,
		left            : options.margin || defaultMargin,
		height          : options.height || undef,
		width           : options.width || undef,
		borderWidth     : options.borderWidth || 0,
		borderColor     : options.borderColor || undef,
		borderRadius    : options.borderRadius || 0,
		backgroundColor : options.debug ? debugPaddingColor : view.backgroundColor
	});

	view.applyProperties({
		top    : options.padding || defaultPadding,
		right  : options.padding || defaultPadding,
		bottom : options.padding || defaultPadding,
		left   : options.padding || defaultPadding
	});
}