TitaniumのAlloy事始め。画面から別の画面に遷移する

TitaniumのAlloyについて調べたメモ２までで、だいたいなんとなく、たぶん、わかってきたので、実際にアプリをいじくってみる。

TitaniumのAlloyについて調べたメモでりんご画像を出すように変えちゃったindexをぜんぶappleに変えて、indexは元通りにする。で、indexにボタンを置いて、それをクリックするとapple画面に遷移するようにしてみる。
index画面とapple画面のファイル構成はこんな感じになっている。

とりあえずViewについてざっくり調べて、ボタンを置けるようにする。
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Views
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_XML_Markup
XMLダリー見にきーJadeだろー的な話はまた今度。

Alloyプロジェクト作ると初めからできているViewファイルを参考に各パーツの役割を見ていく。

<Alloy>
    <Window class="container">
        <Label id="label" onClick="doClick">Hello, World</Label>
    </Window>
</Alloy>

Alloyタグはルートエレメントで、すべてのViewで必要。WindowタグはTi.UI.Windowと等価で、その中にあるLabelタグはTi.UI.Labelと等価。ということで、ほとんどのタグはTitaniumのUIコンポーネントの名前からTi.UIが省かれたかたちになっている。

Controller内では、idが振られていれば参照できる。たとえば上記のLabelは"label"というidが振られているのでController内では$.labelでアクセスできる。

View内のトップレベルのコンポーネントにidが振られていない場合、Controllerからそのコンポーネントには$.にController名でアクセスできる。例えば上記のWindowには$.indexでアクセスできる。

上記のマークアップをゴリ書きにするとこんな感じ。

var win = Ti.UI.createWindow();
var label = Ti.UI.createLabel({text: 'Hello, World'});
label.addEventListener('click', doClick);
win.add(label);

タグに定義できるattributeとかは公式を参照。

とすると、ボタンはTi.UI.Buttonだろう、ということでindex.xmlに加えてみる。

<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick">Hello, World</Label>
		<Button id="button">Go to Apple</Button>
	</Window>
</Alloy>

これで一度画面を確認してみる。

あれ、labelが消えちまった。っていうか、ラベルの上にボタンが載っちまったんだな。まあ、見た目の話はまた今度にしよう。
このボタンにクリックイベントを加える。

<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick">Hello, WorldHello, WorldHello, World</Label>
		<Button id="button" onClick="toApple">Go to Apple</Button>
	</Window>
</Alloy>

ラベルにボタンが乗っかっちゃってるのを確認するために、ラベルのテキストを長くしたみた。

でindex.jsにクリックしたときに呼び出されるtoAppleメソッドを書く。

function doClick(e) {
    alert($.label.text);
}

function toApple(e) {
	var apple = Alloy.createController('apple').getView();
	apple.open();
}
$.index.open();

外部Controllerの呼び出しはAlloy.createController()でやる。

やっぱり乗っかってたんだね。