FrontPage
2011/08/19からのアクセス回数
はじめてTitanium mobileを使った時に、画面の作成をすべてjavaScriptで記述するのに、 驚きました。 しかし、GUIの設定をすべてコーディングすることによって、簡単に画面を使い回すことが できることが分かりました。
ここでは、Interface BuilderとTitanium mobileの連携方法を紹介し、面倒な画面設計を 簡単にしてみましょう。
ここで使用するツールは、Interface BuilderのGUI設定ファイルであるXibファイルを javascriptに変換してくれるXib2JSです。
また、Xib2JSを使用するには、Adobeのhttp://get.adobe.com/jp/air/ も合わせてインストールが必要です。
Xib2JSのサポートしている部品は、
です。
Xib2JSの使い方は、とても簡単です。
Interface Builderで作成したxibファイルをXib2JSにドラックするだけです。
以下は、今回テストに使ったtest.xibをドラッグしたときの画面です。
Xib2JSで生成する画面は、
のようにViewとして作成します。
また、作成した部品の名前を定義すると、その名前がjavascriptの部品の変数名になります。 部品の名前は、Inspectorウィンドウでセットします。
それでは、Demoプログラムの記録の入力画面を例にXib2JSの使い方を説明します。
Xib2JSで変換されたプログラムは、以下のようになります(一部)。
var view0 = Titanium.UI.createView({
});
var weightField = Titanium.UI.createTextField({
}); view0.add(weightField); }}
Xib2JSで生成されたコードと他の部分の関係が疎になるように、プログラムを以下のような構成にします。
< Xib2JSで生成されたコード>をここにペーストまたはインクルード
var win = Ti.UI.currentWindow; win.add(view0); // ← 生成されたコードのルートビューがview0だからこれをウィンドウに追加 <日付や体重の初期値をセット> <保存やキャンセルボタンのコールバック関数を定義し、セットする> }}
最終的なrecord_window.jsは、次のようになりました。
Ti.include('xib2js_record.js');
var win = Ti.UI.currentWindow; win.add(view0); // ← 生成されたコードのルートビューがview0だからこれをウィンドウに追加
datePicker.value = new Date(win.record.at); weightField.value = ""+win.record.weight; datePicker.type = Titanium.UI.PICKER_TYPE_DATE; datePicker.locale = Titanium.Locale.currentLocale;
var selectedDate = datePicker.value; datePicker.addEventListener( 'change', function (e) {
});
saveButton.addEventListener( 'click', function () {
});
cancelButton.addEventListener('click', function() {
});
var deleteCallback = function(e) {
};
Ti.include('navigation.js'); var navi = new Navigation(); navi.setup({
}); }}
このようにGUIのコードとそれを制御するコードを切り分けることで、 プログラムがすっきりすることが分かって頂けると思います。
最後に作成した画面のiPhoneシミュレーターの画面をお見せして終わります。
皆様のご意見、ご希望をお待ちしております。