titanium/Interface Builderとの連携

FrontPage

はじめに
Xib2JSのインストール
- Xib2JSの使い方
- Interface Builderでの画面作成の注意点
使用例
- 生成されたコードの使い方
コメント

2011/08/19からのアクセス回数 7405

はじめに †

はじめてTitanium mobileを使った時に、画面の作成をすべてjavaScriptで記述するのに、驚きました。しかし、GUIの設定をすべてコーディングすることによって、簡単に画面を使い回すことができることが分かりました。

ここでは、Interface BuilderとTitanium mobileの連携方法を紹介し、面倒な画面設計を簡単にしてみましょう。

↑

Xib2JSのインストール †

ここで使用するツールは、Interface BuilderのGUI設定ファイルであるXibファイルを javascriptに変換してくれるXib2JSです。

Frog on Mobile のサイトからxib2js130.zipをダウンロードします。

また、Xib2JSを使用するには、AdobeのAIR も合わせてインストールが必要です。

Xib2JSのサポートしている部品は、

UIViewController, UINavigationController, TableViewController
IBUIActivityIndicatorView, IBUIImageView, IBMKMapView, IBUIProgressView
IBUITextView, IBUIToolbar, IBUIView, IBUIWebView
IBUIScrollView, IBUISearchBar, IBUISegmentedControl
IBUIButton, IBUILabel, IBUITextField,
IBUISlider, IBUISwitch, IBUITableView
IBUIDatePicker, IBUIPickerView

です。

↑

Xib2JSの使い方 †

Xib2JSの使い方は、とても簡単です。

Interface Builderで作成したxibファイルをXib2JSにドラックするだけです。

以下は、今回テストに使ったtest.xibをドラッグしたときの画面です。

↑

Interface Builderでの画面作成の注意点 †

Xib2JSで生成する画面は、

のようにViewとして作成します。

また、作成した部品の名前を定義すると、その名前がjavascriptの部品の変数名になります。部品の名前は、Inspectorウィンドウでセットします。

↑

使用例 †

それでは、Demoプログラムの記録の入力画面を例にXib2JSの使い方を説明します。

Xib2JSで変換されたプログラムは、以下のようになります（一部）。

// 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);

xib2js_record.js

↑

生成されたコードの使い方 †

Xib2JSで生成されたコードと他の部分の関係が疎になるように、プログラムを以下のような構成にします。 *1

// Xib2JSで生成されたコード
＜ Xib2JSで生成されたコード＞をここにペーストまたはインクルード

// Xib2JSのビューとカレントウィンドウの結合
var win = Ti.UI.currentWindow;
win.add(view0); // ← 生成されたコードのルートビューがview0だからこれをウィンドウに追加
// 部品の初期値をセット
＜日付や体重の初期値をセット＞
// コールバック関数をセット
＜保存やキャンセルボタンのコールバック関数を定義し、セットする＞

最終的なrecord_window.jsは、次のようになりました。

// 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シミュレーターの画面をお見せして終わります。

↑

コメント †

皆様のご意見、ご希望をお待ちしております。