Titanium Alloyはじめました(2)-自動生成されたファイルを見てみる
さて、前回は、Alloyプロジェクトを作り、実行するところまでいきましたので、今回は自動生成されたコードを見ていくことにします。
MVCモデル
ただ、その前にMVCモデルについて少し復習をしておきます。AppceleratorのAlloy Conceptsを見るとMVCモデルのModels, Views, Controllersについて次のように書かれています。
Models provide the business logic, containing the rules, data and state of the application.
Views provide the GUI components to the user, either presenting data or allowing the user to interact with the model data.
Controllers provide the glue between the model and view components in the form of application logic.
「モデルはビジネスロジックやルール、アプリケーションのデータや状態を提供し、ビューはそれらのデータを利用者へGUIコンポーネントとして表示する。コントローラはモデルとビューを繋ぐもの。」という感じだと思います。もう少し踏み込むと細かい話が出てきそうですが、それはまた次の機会に調べることにします。
自動生成されたファイルを見てみる
では、いよいよ自動生成されたファイルを見ることにします。app/配下にalloy.js, config.json、controllers/配下にindex.js、styles/配下にindex.tss、views/配下にindex.xmlが見えます。models/配下にはファイルがないので、Hello Worldするだけならモデルはいらないということでしょう。
コントローラはJavaScript、ビューはxmlで書くようですが、styles/配下のtssファイルが良く分からないので、Alloy Quick Startを見ます。
The style file formats and styles the components in the view file.
CSSみたいな感じでしょうか。画面の構造をxmlで作って、TSSでそれを修飾するという感じですね。
自動生成されたコードを見てみる
次に自動生成されたコードを見ることにします。
- views/index.xml
<Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy>
まず、views/index.xmlを見ます。一番外側に<Alloy
>があり、<Window
>があります。その内側に<Label
>があります。Windowを作成してその上にLabelを置くというイメージでしょう。<Label
>にonClickがありdoClickが指定されています。これがコントローラのdoClick()に関連付けられているようです。
- styles/index.tss
".container": { backgroundColor:"white" }, "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" }
次にstyles/index.tssを見ます。ビューファイル内のclass属性や要素に対して位置や装飾等の見た目を定義します。ところで、このサンプルでは<Window
>はclass属性を使用してドット「.」で指定していますが、ラベルは<Label
>を指定して装飾をしています。Alloy Quick Startを見ると、id属性で指定したいときは「#」が付いているのでこちらの指定の方法でも良さそうです。同じように<Window
>にclass="container"がないときには、Windowと指定することもできるのですね。指定する値はAlloyを使わないTitaniumとほぼ同じですので、迷うことはないでしょう。
- controllers/index.js
function doClick(e) { alert($.label.text); } $.index.open();
最後にcontrollers/index.jsです。ビューで指定したonClick属性の値であるdoClick()を定義します。「$」が分からないので、Alloy Controllersを見ます。
All UI elements which have an id attribute in a view are automatically defined and available as a property prefixed by the special variable $ in the controller. The $ is a reference to the controller.
「$」を使うと、コントローラからビューのid属性にアクセスできるようです。2行目では、ラベルのテキストを取得し、最終行ではビューをオープンしています。
ということで、ビュー / スタイル / コントローラを見ることで、大まかな役割分担を確認することができました。ここにモデルがどのように絡んでくるのかに興味がありますが、とりあえずはここまでにしておきたいと思います。
次回はこのサンプルを少し手直ししていきたいと思っています。
この記事は、学びながら作成していますので、網羅的かつ正確な情報を提供するものではありません。