FrontPage

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

はじめに

はじめて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

部品.png

です。

Xib2JSの使い方

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

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

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

Xib2JS.png

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

Xib2JSで生成する画面は、

test.xib.png

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

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

inspector.png

使用例

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

IB_record.png

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で生成されたコードと他の部分の関係が疎になるように、プログラムを以下のような構成にします。 *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シミュレーターの画面をお見せして終わります。

iPhone_xib2JS.png

コメント

選択肢 投票
おもしろかった 7  
そうでもない 0  
わかりずらい 0  

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


(Input image string)


*1 Xib2JSで生成されたコードを直接修正しないのがポイントです

添付ファイル: fileiPhone_xib2JS.png 395件 [詳細] fileXib2JS.png 395件 [詳細] fileIB_record.png 386件 [詳細] filexib2js_record.js 304件 [詳細] filetest.xib.png 375件 [詳細] fileinspector.png 402件 [詳細] file部品.png 432件 [詳細]

トップ   編集 凍結解除 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2013-02-11 (月) 08:22:05 (1596d)
SmartDoc