【18日目】Alloyを使った「Hello World」の次の世界
この記事は、@astronaughts さんが始められた「Titanium mobile Advent Calendar 2012」向けに書いています。
自己紹介
自分はTitanium Mobileを真面目にはじめて1ヶ月程度のルーキーです。生暖かく見守って下さい。
会社ではプロジェクト管理＋Java・Ruby・PHP・JavaScriptあたりでコーディング、アプリは少し・・・って感じの人です。
タイトルについて
「Titanium Alloy」とかで検索すると、インストールからHello Worldを出す所までの情報は結構見つけ易いのですが
その後にどうやって開発してくんだろう？って情報が、まだ少なめな気がします。
その先の進め方を雰囲気だけでも伝えられたらと思っています。
Alloyってなんか、しっくりくる
最初、Alloyを使わずに各種オブジェクトを作って配置してっていう、通常のアプローチでやっていたんですが
Alloyを少し知るとこっちのアプローチの方が自分にあってる事に気づきました。
自分にAlloyがあってると思う理由は
昔経験したAjaxメインなWebアプリを開発した時のアプローチに、似ているためです。
当時、Webのページは単純なhtml(か、殆どロジックの入っていないJSPとかPHPとか)で作っておいて
非同期通信でXML(まだJSONもメジャーじゃなかった・・・)で取得して、それをネタ元にhtml的な文字列を作ってinnerHtmlで流し込むというアプリを結構やってたんですが
その時と基本一緒なんです。
基本となる「がわ」だけ作っておいて、ビジネスロジックはJavaScriptで記述して、データを整形して流し込む
というアプローチですね。個人的にスッキリします。
AlloyはMVCモデルで設計されているのですが
自分はviewとコントローラー(にがっつりロジック書く)しかやっておらず、モデルを使ってことがありません。
個人的には軽いものを作る場合は、これでいいんじゃないかと思っていますが
本来は、コントローラーとモデルの役割分担を明確にすべきなのは言うまでもありません。
Hello Worldの次の進み方
※インストールからHello Worldまでは、「Titanium Alloy」あたりで検索すると、 詳しく書いたブログにあたるはずですので、そちら参照下さい。
主なディレクトリとしては、
- app：ディレクトリの下に以下のディレクトリができます。
- controllers：コントローラーが入ります。ここのindex.jsがスタートになります。
- models：モデルが入ります。自分は使った事がありません。
- styles：拡張子がtssというファイルが入ります。cssに類似してますが、スタイルだけではなくてタブのタイトルとかも指定できます。
- views：画面を構成する要素を指定するXMLです。属性としてIDを指定し、コントローラーやtssからIDで指定します。
順番としては、
views/index.xmlに必要な要素を記述します。
例えばテーブルを使うなら以下の感じです。
<Window id="hoge_window"> <TableView id="hoge_tbl"> <TableViewRow /> </TableView> </Window>
その後
styles/index.tssで静的に指定できる事を書きます。タイトルとか、色味とかそういうのです。
実際のコードは以下の感じです。
"#hoge_window": { backgroundColor:"#FFF0F0", barColor:"#F0A0A0", title:'タイトルでっせ' }
その後、
contollors/index.jsにロジックを書きます。
例えば、httpでJSONデータを取得して、テーブルにセットするだけなら以下の感じです。
// オブジェクトを生成します。 var xhr = Titanium.Network.createHTTPClient(); xhr.open('GET', 'JSONが取得できるURL'); // データダウンロード時のイベント処理 xhr.onload = function() { // JSONパース var json = JSON.parse(this.responseText); var rows = []; for (var i = 0; i < json.length; i++) { var entry = json[i]; var labelName = Ti.UI.createLabel({ text : entry.title }); var row = Ti.UI.createTableViewRow({ className : "NomalCell" }); // RowにLabelオブジェクトの追加 row.add(labelName); rows.push(row); } $.hoge_tbl.setData(rows); }; // HTTPリクエストの送信 xhr.send();
ここでは、単純にテーブルを表示しただけですが、
それでも、かなり簡単に実装できる事は実感できるのではないでしょうか。
アプローチがWebのそれに似ているので、取っ付きやすいですね。
あと、iosとandroidの両対応をしている時は、「ここはこのプラットフォームでだけ表示したい！」なんてよくありますよね。
NavBarとかiAdとか。
そんな時は、platform="〜"で指定します。例えばiosでだけiAdを出したい時は以下のようにすれば良いです。
<AdView ns="Ti.UI.iOS" id="ad" platform="ios" />
大きな流れとしては以上です。
簡単さが伝わりましたでしょうか。
