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するだけならモデルはいらないということでしょう。

alt HelloWorld

コントローラは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行目では、ラベルのテキストを取得し、最終行ではビューをオープンしています。

ということで、ビュー / スタイル / コントローラを見ることで、大まかな役割分担を確認することができました。ここにモデルがどのように絡んでくるのかに興味がありますが、とりあえずはここまでにしておきたいと思います。

次回はこのサンプルを少し手直ししていきたいと思っています。

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