#freeze
[[FrontPage]]
#contents
2011/08/19からのアクセス回数 &counter;
** はじめに [#h7e559a6]
はじめてTitanium mobileを使った時に、画面の作成をすべてjavaScriptで記述するのに、
驚きました。
しかし、GUIの設定をすべてコーディングすることによって、簡単に画面を使い回すことが
できることが分かりました。
ここでは、Interface BuilderとTitanium mobileの連携方法を紹介し、面倒な画面設計を
簡単にしてみましょう。
** Xib2JSのインストール [#n52095e0]
ここで使用するツールは、Interface BuilderのGUI設定ファイルであるXibファイルを
javascriptに変換してくれるXib2JSです。
- [[Frog on Mobile>http://blog.frogonmobile.com/apps/xib2js/]]
のサイトからxib2js130.zipをダウンロードします。
また、Xib2JSを使用するには、Adobeの[[AIR>http://get.adobe.com/jp/air/]]
も合わせてインストールが必要です。
Xib2JSのサポートしている部品は、
- UIViewController, UINavigationController, TableViewController
- IBUIActivityIndicatorView, IBUIImageView, IBMKMapView, IBUIProgressView
- IBUITextView, IBUIToolbar, IBUIView, IBUIWebView
- IBUIScrollView, IBUISearchBar, IBUISegmentedControl
- IBUIButton, IBUILabel, IBUITextField,
- IBUISlider, IBUISwitch, IBUITableView
- IBUIDatePicker, IBUIPickerView
&ref(部品.png);
です。
*** Xib2JSの使い方 [#p73322f5]
Xib2JSの使い方は、とても簡単です。
Interface Builderで作成したxibファイルをXib2JSにドラックするだけです。
以下は、今回テストに使ったtest.xibをドラッグしたときの画面です。
&ref(Xib2JS.png);
*** Interface Builderでの画面作成の注意点 [#b4a70168]
Xib2JSで生成する画面は、
&ref(test.xib.png);
のようにViewとして作成します。
また、作成した部品の名前を定義すると、その名前がjavascriptの部品の変数名になります。
部品の名前は、Inspectorウィンドウでセットします。
&ref(inspector.png);
** 使用例 [#he0d9ca3]
それでは、Demoプログラムの記録の入力画面を例にXib2JSの使い方を説明します。
&ref(IB_record.png);
Xib2JSで変換されたプログラムは、以下のようになります（一部）。
#pre{{
// Custom View
var view0 = Titanium.UI.createView({
width: 320,
height: 460,
backgroundColor: '#aaaaaa'
});
var weightField = Titanium.UI.createTextField({
borderStyle: Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
left: 80,
top: 236,
width: 160,
height: 31,
value: '',
color: '#000000'
});
view0.add(weightField);
}}
- &ref(xib2js_record.js);
*** 生成されたコードの使い方 [#n84525b0]
Xib2JSで生成されたコードと他の部分の関係が疎になるように、プログラムを以下のような構成にします。
((Xib2JSで生成されたコードを直接修正しないのがポイントです))
#pre{{
// Xib2JSで生成されたコード
＜ Xib2JSで生成されたコード＞をここにペーストまたはインクルード
// Xib2JSのビューとカレントウィンドウの結合
var win = Ti.UI.currentWindow;
win.add(view0); // ← 生成されたコードのルートビューがview0だからこれをウィンドウに追加
// 部品の初期値をセット
＜日付や体重の初期値をセット＞
// コールバック関数をセット
＜保存やキャンセルボタンのコールバック関数を定義し、セットする＞
}}
最終的なrecord_window.jsは、次のようになりました。
#pre{{
// Xib2JSで生成されたコード
Ti.include('xib2js_record.js');
// Xib2JSのビューとカレントウィンドウの結合
var win = Ti.UI.currentWindow;
win.add(view0); // ← 生成されたコードのルートビューがview0だからこれをウィンドウに追加
// 部品の初期値をセット
datePicker.value = new Date(win.record.at);
weightField.value = ""+win.record.weight;
// Xibの定義が正しく反映されない部分
datePicker.type = Titanium.UI.PICKER_TYPE_DATE;
datePicker.locale = Titanium.Locale.currentLocale;
// コールバック関数をセット
var selectedDate = datePicker.value;
datePicker.addEventListener(
'change', function (e) {
selectedDate = e.value;
});
saveButton.addEventListener(
'click', function () {
var record = {};
record.id = win.record.id;
record.weight = weightField.value;
var at = selectedDate;
record.at = at.toDateString();
Ti.App.fireEvent(win.func, record);
win.close();
});
cancelButton.addEventListener('click', function()
{
win.close();
});
var deleteCallback = function(e) {
Ti.App.fireEvent('delete_row', win.record);
win.close();
};
Ti.include('navigation.js');
var navi = new Navigation();
navi.setup({
android: {
rightButton: {title: 'Delete', icon: 'dark_x.png', callback : deleteCallback}
}
});
}}
このようにGUIのコードとそれを制御するコードを切り分けることで、
プログラムがすっきりすることが分かって頂けると思います。
最後に作成した画面のiPhoneシミュレーターの画面をお見せして終わります。
&ref(iPhone_xib2JS.png);
** コメント [#wa8d8612]
#vote(おもしろかった[6],そうでもない[0],わかりずらい[0])
皆様のご意見、ご希望をお待ちしております。
#comment_kcaptcha
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
