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: "A",
    width: 50,
    height: 50,
    style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
});
buttonA.addEventListener("click", function(e){
	alert("A!");
});
var buttonB = Ti.UI.createButton({
	title: "B",
    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: "A",
        width: 50,
        height: 50,
        style: Titanium.UI.iPhone.SystemButtonStyle.PLAIN
    },
    buttonB: {
	    title: "B",
        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"
    },
...
}

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

  1. TitaniumのJSSという機能 | ひげろぐ said on 2011年2月24日 at 6:04 PM

    […] ロジックとスタイルを分離したければJavaScript内で自分で工夫した方がいいように思える。 少なくとも現段階では。 […]

  2. […] TitaniumのロジックとUIのプロパティ定義を分離する – オススメ […]

  3. [Titanium] ファイル構成 « Titan Tip said on 2011年8月19日 at 4:22 PM

    […] まだ実装が不安定で使いづらい。なのでスタイルの割り当てはひげろぐ:TitaniumのロジックとUIのプロパティ定義を分離するの方法を利用している。 あとはhoge.jsにhoge_view.jsとhoge_style.jsを […]

トラックバック URL