TitaniumのロジックとUIのプロパティ定義を分離する

UIの部品をたくさん追加するとコードの見通しが悪くなってくるので、なんとかしたいと思った。
そこでUIのプロパティを指定するオブジェクトを別の場所で定義して分離することにしてみた。

Ti.includeを使うとコードの分離は簡単なので、方法は至って単純。
styles.jsというファイルにプロパティの定義を追い出す。

2010/02/12追記

Titamium Mobile 1.5からJSSというものが使えるようになっていて、以下のstyles.jsでやっていることをCSSっぽく書ける。
ただ1.5の時点ではiOSで問題があり、JSSの更新が二度目以降のビルドに反映されず、更新を確認するためには都度build以下を削除しないといけないようなことになっているようだ。

元のコード

まずは分離前。

hoge.js

いたって普通に書いたコード。
UI部品が少ないうちは問題ないが、部品が増えてくると見通しが悪くて修正したい処理をぱっと探せなくなってくる。

var viewA = Ti.UI.createView({
    backgroundColor: "#000",
    opacity: 0.5,
    top: 100,
    left: 10,
    width: 300,
    height: 200,
    layout: "vertical"
});
var buttonA = Ti.UI.createButton({
	title: "Ａ",
    width: 50,
    height: 50,
    style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
buttonA.addEventListener("click", function(e){
	alert("A!");
});
var buttonB = Ti.UI.createButton({
	title: "Ｂ",
    width: 50,
    height: 50,
    image: "../icons/button-b.png",
    style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
buttonB.addEventListener("click", function(e){
	alert("B!");
});

viewA.add(buttonA);
viewA.add(buttonB);
Ti.UI.currentWindow.add(viewA);

分離したコード

styles.jsにプロパティを追い出した後。

hoge.js

だいぶスッキリしてロジックを追いかけるのが楽になる。

Ti.include("styles.js")

var viewA = Ti.UI.createView(styles["viewA"])
var buttonA = Ti.UI.createButton(styles["buttonA"]);
buttonA.addEventListener("click", function(e){
	alert("A!");
});
var buttonB = Ti.UI.createButton(styles["buttonB"]);
buttonB.addEventListener("click", function(e){
	alert("B!");
});

viewA.add(buttonA);
viewA.add(buttonB);
Ti.UI.currentWindow.add(viewA);

styles.js

こちらはこちらでUIの調整をするときに、対象箇所が探しやすくなった。

var styles = {
    viewA: {
        backgroundColor: "#000",
        opacity: 0.5,
        top: 100,
        left: 10,
        width: 300,
        height: 200,
        layout: "vertical"
    },
    buttonA: {
        title: "Ａ",
        width: 50,
        height: 50,
        style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
    },
    buttonB: {
	    title: "Ｂ",
        width: 50,
        height: 50,
        image: "../icons/button-b.png",
        style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
    }
};

2011/03/24追記

最近はrequireを使っている。

hoge.js

var styles, viewA;
styles = require("style/hoge.js")

viewA = Ti.UI.createView(styles["viewA"])
...

style/hoge.js

var exports = {
    viewA: {
        backgroundColor: "#000",
        opacity: 0.5,
        top: 100,
        left: 10,
        width: 300,
        height: 200,
        layout: "vertical"
    },
...
}