こんにちは山形です。
さて今回は前回につづいてTitaniumのAPIを使って具体的にUIの配置等を行っていきたいと思います。

前回はツールのインストールなどを行いました。

alloy generateコマンド

Alloyをインストールするとalloyコマンドが使えるようになります。これがrailsを意識しているようなのでrailsに慣れている人ならわかりやすいかと思います。

まず画面を追加してみたいのでgenerate controllerコマンドをつかって画面を追加してみます。

alloy generate controller my_modal

こうすると
app/controllers/my_modal.js
app/styles/my_modal.tss
app/views/my_modal.xml
の３つのファイルが作成されます。

この段階でtitanium buildしてみても前回同様Hello Worldという白い画面が表示されるだけです。これはTitaniumのデフォルト画面であるindex.jsというコントローラが表示されているだけなのでindexからmy_modalを呼び出す形になります。

それでは順をおって説明していきます。

controller

まずはコントローラー。app/controllers/my_modal.js等ですね。やろうと思えばここに全てのコードを書くこともできます。

しかしAlloyをつかってわざわざMVCスタイルになっているので、コントローラーには画面の遷移や、ボタンのタップに反応してモデルを呼び出すなどにとどめておいたほうがよいでしょう。

最初に呼び出されるコントローラであるindex.jsに以下のコードを追加してmy_modalを開く処理を追加してみます。

var myModal = Alloy.createController(‘my_modal’).getView();
myModal.open({ modal: true });

ここでとりあえずtitanium buildしみると以下の様な画面になりました。

 

「myModalにはopenという関数は無いよ」と書いてありますね。
この原因を探るためにviewファイルを見てみましょう。

view

app/views/my_modal.xml というファイルがmy_modalのviewファイルです。XMLで書かれていますがhtmlの様な感覚でマークアップしていけます。

中身はこんなコードになっています。

<Alloy>
<View class=”container”>
</View>
</Alloy>

これではエラーしてしまいますね。ViewというのはTitanium.UI.Viewクラスのインスタンスなのですが、Viewにはopenという関数はありません。

なのでViewの部分をWindowに置き換えてもう一度ビルドしてみます。

<Alloy>
<Window class=”container”>
</Window>
</Alloy>

 

なんか黒いっすね…

これはWindowのデフォルト背景色が黒だからです。このままじゃよくわかんないのでstyleを変更してウィンドウの存在感を出してみたいと思います。

style

スタイルファイルはapp/styles/my_modal.tssです。tssというのはcssとjsonを掛けあわせたような雰囲気のする形式です。

tssでビューに対置したオブジェクトのプロパティを操作してスタイルを変えていくという感じです。
なのでWindowに対してbackgroundColorの値を変更してみます。

“Window”: {
backgroundColor: “green”
}

なんか普通じゃつまらないので緑色にしてみました。
ついでにビューLabelを追加してこれにも色をつけてみます。

<Alloy>
<Window class=”container”>
<Label>My Modal</Label>
</Window>
</Alloy>

“Window”: {
backgroundColor: “green”
}
“Label”: {
color: “red”
}

そして出来上がった画面がこちらです。

 

まぶしい！ださいですね。

まとめ

軽い感じで起動と同時にモーダル画面を表示させてみましたが、Titaniumの手軽さが伝わったでしょうか？？JavaScriptでかけるというのはこんなにもさくさく進めていけるのですね。
次回はもっと複雑な画面遷移をご紹介したいと思います。