[[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だからこれをウィンドウに追加 // 部品の初期値をセット <日付や体重の初期値をセット> // コールバック関数をセット <保存やキャンセルボタンのコールバック関数を定義し、セットする> }} ** コメント [#wa8d8612] #vote(おもしろかった,そうでもない,わかりずらい) 皆様のご意見、ご希望をお待ちしております。 #comment_kcaptcha