ZenTi OOP - basic concept (extending demo)

app.js

//basic wrapper
function Element(props) {
    this.setProperties(props);
}

Element.prototype = {
    __TiElement: null,
    __TiConstructor: Ti.UI.createView,
    __getTiElement: function() {
        if (!this.__TiElement) {
            this.__TiElement = this.__TiConstructor(this.getProperties())
        }
        return this.__TiElement;
    },
    getProperties: function() {
        var props = {};
        for (var p in this) {
            props[p] = this[p];
        }
        return props;
    },
    setProperties: function(props) {
        if (this.__TiElement) {
            for (var p in props) {
                this[p] = props[p];
                this.__TiElement[p] = props[p];
            }
        }
        else {
            for (var p in props) {
                this[p] = props[p];
            }
        }
    },
    on: function(type, callback) {
    	this.__getTiElement().addEventListener(type, callback);
    }
};

function View(props) {
	this.setProperties(props);
}

View.prototype = new Element();

View.prototype.add = function(component) {
	if (component && component.__getTiElement) {
		this.__getTiElement().add(component.__getTiElement());
	}
};

function Window(props) {
	this.setProperties(props);
}

Window.prototype = new View();

Window.prototype.open = function() {
	this.__getTiElement().open();
};
Window.prototype.close = function() {
	this.__getTiElement().close();
};

Window.prototype.__TiConstructor = Ti.UI.createWindow;

function ExtendedView() {
    
}

//extend
ExtendedView.prototype = new View();

ExtendedView.prototype.width = 200;
ExtendedView.prototype.height = 200;
ExtendedView.prototype.backgroundColor = '#00f';

function create() {
	var win = new Window({
	    backgroundColor: '#f00',
	    layout: 'vertical'
	});

	var view1 = new View({ backgroundColor: '#0f0', width: 100, height: 100 });
	var view2 = new ExtendedView();

	win.add(view1);
	win.add(view2);

	view1.on('click', function() {
		win.close();
	});

	view2.on('click', function() {
		create();
	});

	win.open();
}

create();