Titanium教程day2-自定义可重用UI组件

原文：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 统一