原文:http://wiki.appcelerator.org/display/guides/Building+Reusable+Factories
Titanium 创建UI,其实用工厂模式。当App越写越大后,就要自定义可重用组件,也就是UI工厂。
Titanium 与UI 工厂
Titanium 创建UI,就是用工厂模式:
Ti.UI.createView({
height:400,
backgroundColor:'red'
});
自己写App时,其实就是在基础的UI上变来变去。JS可以给程序加上封装和重用逻辑,可以把程序限制在某一命名空间(即作用域),而不是全局调用:
var myApp = {
someFunction: function() {
//do stuff
},
someVariable: true
};
在命名空间中,你再来写自定义可重用组件。即“面向组件” component oriented的编程模式,并使自定义组件拥有公共接口。如有必要,可以直接扩展Titanium 基础组件,高效。假定要在多个窗口显示同一顶部视图,像这样写:
myApp.ui = {}; //create a UI namespace within your app
myApp.ui.createHeaderView = function(/*Object*/ _args) {
var v = Ti.UI.createView({
backgroundColor:_args.bgColor||'red',
height:80
});
v.add(Ti.UI.createLabel({
text:_args.title||'My Cool App'
}));
return v;
};
以这种方式设计接口好处多多:在程序各处重用。因为是把JS对象作为参数,你可以自定义API的结构。还可以保证函数名统一。像这里就是Titanium 命名空间+create+View名字。你还可以更进一步,给组件加关键词base(基类)来作为后缀。所以名字就是create+View名字+Titanium 的基础组件名字:
- createHeaderView
- createLoginButton
- createMainApplicationWindow
- createRssFeedTableView
给视图加API
和基础组件一样,自定义组件通常要有一个外部API。在工厂方法的最后返回这个对象。
myApp.ui.createHeaderView = function(/*Object*/ _args) {
var v = Ti.UI.createView({
backgroundColor:_args.bgColor||'red',
height:80
});
var l = Ti.UI.createLabel({
text:_args.title||'My Cool App'
});
v.add(l);
//external API function
v.blink = function() {
v.animate({opacity:0,duration:1000},function() {
v.animate({opacity:1,duration:1000});
});
};
return v;
};
这样就能调用函数了:
var h = myApp.ui.createHeaderView();
h.blink(); // will cause the view to fade out, then in
用事件操控视图
除了定义API外,还希望自定义组件能够发送组件类型或程序类型·的事件,给自定义组件加事件很简单。稍微修改blink方法,在动画结束时,向 'base'视图发送事件。
v.blink = function() {
v.animate({opacity:0,duration:1000},function() {
v.animate({opacity:1,duration:1000});
//now, fire an event on yourself to let any
//interested parties know this animation is complete
v.fireEvent('blinkComplete');
});
};
这样一来,随便哪个窗口,只要创建了hear视图,就能接收
blinkComplete 事件了。
var h = myApp.ui.createHeaderView();
h.addEventListener('blinkComplete', function() {
Ti.API.info('blink complete');
});
h.blink(); //console will print message from listener
这些技巧,方便你创建面向组件,事件驱动的手机App。更多知识见
Helium 库。
生词
sake 原因
uniformity 统一