Titanium Alloyはじめました（４）-タブを作ってみる

さて、今回はタブを作ってみます。

viewを作る

まずは、viewです。タブを作るときには、<TabGroup>内に<Tab>を作ってタブを定義します。TitaniumのcreateTabGroup()とcreateTab()のような感じです。

• views/index.xml

<Alloy>
    <TabGroup>
        <Tab id="tab1">
            <Window id="win1">
                <Label>I am Tab1.</Label>
            </Window>
        </Tab>
        <Tab id="tab2">
            <Window id="win2">
                <Label>I am Tab2.</Label>
            </Window>
        </Tab>
        <Require src="win3" />
    </TabGroup>
</Alloy>

ここではtab1とtab2を定義して、それぞれのタブにウィンドウとラベルを定義して、I am Tab1.とI am Tab2.を表示します。下から３行目に<Require>があります。<Require>は、src属性で定義したxmlファイルの内容をインポートします。ここでは、src="win3"としていますので、win3.xmlを読み込みます。win3.xmlは次のようにしました。

• views/win3.xml

<Alloy>
    <Tab id="tab3">
        <Window id="win3">
            <Label>I am Tab3.</Label>
        </Window>
    </Tab>
</Alloy>

win3.xmlでtab3を定義しています。このように<Require>を使うとviewを適当なところでファイル分割してくれるようなので、ファイルサイズが大きくなるときには分割した方が見やすそうです。さて、次はスタイルです。

styleを作る

先ほど定義したコンポーネントに装飾をします。ビューをindex.xmlとwin3.xmlのふたつに分割したので、スタイルも同じように分割します。

• styles/index.tss

"#win1": {
    backgroundColor: "gray",
    title: "win1"
},
"#win2": {
    backgroundColor: "blue",
    title: "win2"
},
"#tab1": {
    title: "Tab1"
},
"#tab2": {
    title: "Tab2"
},
"Label": {
    color: "#fff"
}

• styles/win3.tss

"#win3": {
    backgroundColor: "red",
    title: "win3"
},
"#tab3": {
    title: "Tab3"
},
"Label": {
    color: "#000"
}

特に新しいことは何もしていません。タブを切り替えたときに分かりやすいようにタブごとにウィンドウの色を変えてみました。次はコントローラです。

controllerを作る

コントローラはこれだけです。

• controllers/index.js

$.index.open();

今回はタブを表示するだけなので、indexをopen()するだけです。さて、実行してみましょう。

実行してみる

実行できました。今回はタブを表示するだけですが、タブ内で何か動作させたい場合は、タブごとにコントローラを作ってあげれば良いのだと思います。

この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。