Create a gist now

Instantly share code, notes, and snippets.

ZenTi OOP - basic concept (extending demo)
//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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment