TitaniumのAlloy事始め。画面から別の画面に遷移する
TitaniumのAlloyについて調べたメモ2 までで、だいたいなんとなく、たぶん、わかってきたので、実際にアプリをいじくってみる。
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()でやる。
やっぱり乗っかってたんだね。
で、これでボタンをクリックするとりんご画面に遷移した。
よしよし。
JavaScriptとTitaniumではじめる iPhone/Androidアプリプログラミング 【Titanium Mobile SDK 2.1 & Titanium Studio 2.1 対応】
- 作者: 森真吾
- 出版社/メーカー: マイナビ
- 発売日: 2012/09/14
- メディア: 単行本(ソフトカバー)
- 購入: 2人 クリック: 319回
- この商品を含むブログ (7件) を見る