Titanium 备忘1

使用ti也有一段时间了，也看到ti的不断更新和壮大。
Ti之MVC模式，这个当然首推官网的alloy啦，但以我自己看来
使用alloy也是有诸多不便之处，其实就是想要点随意发挥，有时候在UI上做逻辑
十分方便，还有学alloy的学习成本，毕竟是js啊，呵呵。
这个可能不可取，但这也算是js的成败因素（太灵活了）。
我目前的畸形MVC模式基本上没有什么M，除非用到了数据库sqlite（这个可以使用
joli这个js框架还是十分方便的）；
V：视图的话一般都只是做布局、加监听的事，有些数据转换我也会写到这里；
C：主要是数据控制（请求、处理转换）、页面跳转控制（视图的事件处理）；
MVC模式就是一些规则呗，Ti使用的是js，JS比较灵活，也必须作一些规则的限制：
我总结以下几点：
1：尽量把通用的代码统一在一个js文件，只需要require一次，然后再加载js文件时只需
传递这个require处理的对象就可以了，（这个方便？相当于全局变量？总之当初考虑是为了
能在android和ios上用同一文件。
2：android项目最好不用tabgroup，因为它奇丑无比。总之我是没有办法改变它的样式。
鉴于tabgroup是app界滥用的标准，还必须客制化它，所以我使用的就是单window的模式，
再打开新页面时仍然是window（只不过固定了新window的高度，使得主window一直存在,就看到tab啦）。
具体的实现方法会在下面贴出（代码没有抽离和使其更灵活，所以使用起来还是有限制的：[）;

var self = {};
var platformWidth = Ti.Platform.displayCaps.platformWidth;
var tabs = [], lock = false, second = false;
function createTabBar(__selectTab, __Win) {
    var tabBar = Ti.UI.createView({
        bottom : 0,
        width : platformWidth,
        height : util.dp(50),
        backgroundImage : '/images/tab/tab_bg.png',
        layout : 'horizontal'
    });
var titles = ["订单管理", "商品管理", "客服中心", "促销管理"], icon = ["/images/tab/tab_order.png", "/images/tab/tab_product.png", "/images/tab/tab_meber.png", "/images/tab/tab_sale.png"];
var tabStyle = {
        height : util.dp(50),
        width : platformWidth / 4,
        borderWidth : 1,
        borderColor : '#222',
        layout : 'vertical'
    }, iconStyle = {
        top : util.dp(6),
        height : util.dp(25),
        width : util.dp(25),
        touchEnabled : false
    }, titleStyle = {
        top : util.dp(3),
        color : '#fff',
        touchEnabled : false,
        font : {
            fontSize : util.dp(12)
        }
    };
    for (var i = 0; i < 4; i++) {
        var c_tab = Ti.UI.createView(tabStyle);
        c_tab.index = i;
        c_tab.openWins = [];
        var c_icon = Ti.UI.createImageView(iconStyle);
        c_icon.image = icon[i];
        var c_title = Ti.UI.createLabel(titleStyle);
        c_title.text = titles[i];
        c_tab.add(c_icon);
        c_tab.add(c_title);
        c_tab.hadCall = false;
        c_tab.addEventListener("click", function(e) {
            self.currentTab.backgroundImage = 'undefined';
            e.source.backgroundImage = "/images/tab/tab_selected.png";
            if (self.tabs[e.source.index].hadCall) {
                self.tabs[e.source.index].hadCall = false;
                if (self.tabs[e.source.index].openWin) {
                    closeWin(self.tabs[e.source.index].openWins);
                    self.tabs[e.source.index].openWins.length = 0;
                    if (!util.platform.isIOS) {
                        self.windows[e.source.index].left = 0;
                        self.windows[e.source.index].show();
                    } else {
                        self.tabs[e.source.index].openWins = [];
                    }
                    self.tabs[e.source.index].openWin = null;
                } else {
                    __selectTab(e);
                }
            }
            if (!self.tabs[e.source.index].hadCall) {
                self.tabs[e.source.index].hadCall = true;
                if (self.currentTab != self.tabs[e.source.index]) {
                    self.currentTab.hadCall = false;
                    __selectTab(e);
                }
            }
        });
        __Win && (c_tab.window = __Win.views[i]);
        tabs.push(c_tab);
        tabBar.add(c_tab);
    }
    self.currentTab = tabs[0];
    self.currentTab.backgroundImage = "/images/tab/tab_selected.png";
    self.tabs = tabs;
    return tabBar;
}

function closeWin(wins) {
    for (var i = 0, j = wins.length; i < j; i++) {
        wins[i].close();
    }
}
function IOS_TabBar(tabgroup) {
    self.IOS_tabgroup = tabgroup;
    function _selectTab(e) {
        self.currentTab = self.tabs[e.source.index];
        tabgroup.setActiveTab(e.source.index)
    }
    var tabBar = createTabBar(_selectTab);
    self.tabBar = tabBar;
    tabgroup.add(tabBar);
    tabgroup.is1_tabs = tabs;
    tabgroup.current_is1_tab = self.currentTab;
    return tabBar;
}
function TabGroup(__Win) {
    self.mainWin = __Win;
    __Win.addEventListener('android:back', __WinBack);
    var ADDED_PRODUCT = 1, ADDED_SERVICE = 2, ADDED_MORE = 3;
    self.windows = __Win.views;
    var tabBar = createTabBar(changeTab, __Win);
    self.tabBar = tabBar;
    return tabBar;
    function changeTab(e) {
        selectTab(e.source.index);
    }
}
function selectTab(index) {
    if (self.currentTab.openWin) {
        self.currentTab.openWin.setLeft("100%");
        self.currentTab.openWin.hide();
    } else {
        self.mainWin.remove(self.mainWin.currentView);
    }
    self.currentTab = self.tabs[index];
    self.currentWindow = self.windows[index];
  if (self.currentTab.openWin) {
        self.currentTab.openWin.setLeft(0);
        self.currentTab.openWin.show();
    } else {
        self.mainWin.currentView = self.windows[index];
        self.mainWin.add(self.windows[index]);
    }
}
function winColse() {
    if (!lock) {
        lock = true;
        self.currentTab.openWin.animate({
            left : "100%", // platformWidth,
            duration : 240
        });
        self.currentTab.openWin.addEventListener('close', function() {
            self.currentTab.openWin.removeEventListener('close', arguments.callee);
            lock = false;
        });
        self.currentTab.openWins.pop(self.currentTab.openWin);
        var l = self.currentTab.openWins.length;
        if (l > 0) {
            self.currentTab.openWins[l - 1].show();
            self.currentTab.openWins[l - 1].animate({
                left : 0.0,
                duration : 240
            }, function() {
                self.currentTab.openWin.close();
                self.currentTab.openWin = self.currentTab.openWins[l - 1];
            });
 } else {
            self.currentTab.window.left = 0;
            self.currentTab.window.show();
            self.currentTab.window.animate({
                left : 0,
                opacity : 1.0,
                duration : 240
            });
            self.currentTab.openWin.close();
            self.currentTab.openWin = null;
        }
    }
}
function __WinBack(e) {
    if (self.currentTab.openWin && self.currentTab.openWin != null) {
        winColse()
    } else {
        setTimeout(function() {
            second = false;
        }, 10000);
        if (!second) {
            second = true;
            util.messageshow('再按一次回退键退出程序。', 2000);
        } else {
            try {
                self.mainWin.close();
                var activity = Titanium.Android.currentActivity;
                activity&&activity.finish();
            } catch(ex) {
                Ti.API.error(ex)
            }
        }
    }
}

/**
 *
 * Attention!!!! this method only work for android
 * @param {int} tabIndex
 * @param {int} remainWins    // how much opened windows you want to remain
 * @param {fucntion} callback // it will return current open window
 */
exports.closeOpenWins = function(tabIndex, remainWins, callback) {
    if (util.platform.isAndroid) {
        var wins_length = self.tabs[tabIndex].openWins.length - 1;
        remainWins = remainWins || 0;
        for (; wins_length > remainWins - 1; wins_length--) {
            self.tabs[tabIndex].openWins[wins_length].close();
        }
        self.tabs[tabIndex].openWins.length = remainWins;
        if (remainWins === 0) {
            self.tabs[tabIndex].openWin = null;
        } else {
            self.tabs[tabIndex].openWin = self.tabs[tabIndex].openWins[remainWins - 1];
            //self.tabs[tabIndex].openWin.left = 0;
            self.tabs[tabIndex].openWin.show();
            self.tabs[tabIndex].openWin.animate({
                left : 0,
                duration : 240
            }, function() {
            });
        }
        callback && callback(self.tabs[tabIndex].openWin);
    }
};
/**
 * hide __ tabs
 */
exports.hideTabBar = function() {
    self.tabBar && self.tabBar.hide();
}
/**
 * show __ tabs
 */
exports.showTabBar = function() {
    self.tabBar && self.tabBar.show();
}
/**
 *@param {Ti Window} win
 */
exports.__WinClose = function(win) {
    if (util.platform.isIOS) {
        var tem_wins = util._.clone(self.currentTab.openWins);
        tem_wins.pop(self.currentTab.openWin);
        self.currentTab.openWins = tem_wins;
        //.pop(self.currentTab.openWin);
        win.close();
    } else {
        winColse();
    }


}
/**
 *@param {int} tabIndex
 */
exports.setActiveTab = function(index) {
    self.currentTab.backgroundImage = 'undefined';
    if (util.platform.isIOS) {
        self.currentTab = self.tabs[index];
        self.IOS_tabgroup.setActiveTab(index);
    } else {
        selectTab(index);
    }
   self.currentTab.backgroundImage = "/images/tab/tab_selected.png";
};
/**
 * tabIndex is index of tab in TabGroup(Ti tabgroup or __ tabs)
 *
 * @param {Ti Window} win
 * @param {int} tabIndex
 */
exports.open__Win = function(win, tabIndex) {
    if (util.platform.isIOS) {
        var tem_wins = util._.clone(self.tabs[tabIndex].openWins);
        self.tabs[tabIndex].openWin = win;
        tem_wins.push(win);
        self.tabs[tabIndex].openWins = tem_wins;
        self.IOS_tabgroup.getTabs()[tabIndex].open(win, {
            animated : true
        });
    } else {
        win.left = "100%", //platformWidth;
        win.opacity = 0;
        self.tabs[tabIndex].openWin = win;
        self.tabs[tabIndex].openWins.push(win);
        var l = self.currentTab.openWins.length;
        if (l > 1) {
            self.tabs[tabIndex].openWins[l - 2].animate({
                left : "-100%", //-platformWidth,
                duration : 240
            }, function() {
            });
            win.width = "100%", //platformWidth;
            win.open();
            win.animate({
                left : 0.0,
                opacity : 1.0,
                duration : 240
            }, function() {
                self.tabs[tabIndex].openWins[l - 2].hide();
            });
        } else {
            win.width = "100%", //platformWidth;
            win.open();
            win.animate({
                left : 0,
                opacity : 1.0,
                duration : 240
            }, function() {
                self.tabs[tabIndex].window.hide();
            });
            self.tabs[tabIndex].window.animate({
                left : '-100%', //-platformWidth,
                duration : 240
            }, function() {
            });
        }
    }
}; 
exports.UI = {
    /**
     *
     * @param {Ti Window} __Win
     */
    createTabGroup : function(__Win) {
        return new TabGroup(__Win);
    },
    /**
     *
     * @param {Ti TabGroup} tabgroup
     */
    createIOSTabBar : function(tabgroup) {
        return new IOS_TabBar(tabgroup);
    },
    createWin : function() {
        return Ti.UI.createWindow({
            top : 0,
            bottom : util.dp(50),
            backgroundColor : '#911'
        });
    }
}

想不到贴代码之后这麽长的啊，好吧，为了方便阅读要另起一篇文章了，用户体验很重要嘛。