FrontPage

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

はじめに †

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

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

↑

Xib2JSのインストール †

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

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

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

部品.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だからこれをウィンドウに追加
// 部品の初期値をセット
＜日付や体重の初期値をセット＞
// コールバック関数をセット
＜保存やキャンセルボタンのコールバック関数を定義し、セットする＞
↑

コメント †

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

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


(Input image string)
*1 Xib2JSで生成されたコードを直接修正しないのがポイントです
トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
SmartDoc