Titanium Mobile/プロジェクト新規作成のバックアップ(No.2)

Titanium Mobileのプロジェクトは[File] - [New] - [Mobile Project]から行いますが、雛形の種類が多いのでメモです。

Classic

雛形が空のプロジェクト。完全に空でなく、app.js内でTabGroupやWindowを作るサンプルが入っています。

jsファイル名	内容
app.js	TabGroupを生成して、ラベル入りのWindow２つを追加してopen

シンプルなウィンドウアプリケーション。ナビゲーションバーは付いておらず、１画面でいいので画面を広く使いたい場合にオススメ

jsファイル名	内容
app.js	タブレット・iPhone・Androidの判定をして、それぞれのWindowを開く
ui/handheld/ApplicationWindow.js	iPhone用のWindow。シンプルにFirstViewをaddする。var firstView = new FirstView(); self.add(firstView);
ui/handheld/android/ApplicationWindow.js	Android用
ui/tablet/ApplicationWindow.js	タブレット用
ui/common/FirstView.js	タブレット・iPhone・Android共通のView。サンプルとしてクリック可能なラベルを配置

テーブルを表示し、選択すると別ウィンドウを開くサンプルです。iOSではナビゲーションバーも表示され、別ウィンドウの左上を選択すると元のテーブルに戻ります。

jsファイル名	内容
app.js	タブレット・iPhone・Androidの判定をして、それぞれのWindowを開く
ui/handheld/ApplicationWindow.js	iPhone用のWindow。NavigationGroupをaddする。MasterViewを生成し、それを内包するWindowをNavigationGroupの初期値に設定。DetailViewとそれを内包するWindowも予め生成しておき、MasterViewをここでaddEventListnerしていて、カスタムイベントを監視して発生時にDetailViewのカスタムイベントを呼んでパラメータを渡し、openで切り替える。
ui/handheld/android/ApplicationWindow.js	Android用
ui/tablet/ApplicationWindow.js	タブレット用
ui/common/MasterView.js	TableViewを生成し、行をclickすると自身のViewのカスタムイベントを発生させる。
ui/common/DetailView.js	自身のViewに対するカスタムイベントを監視し、発生したらラベル内容を更新。

タブ付きのアプリケーション雛形。

jsファイル名	内容
app.js	ApplicationTabGroupを生成して開きます。タブレット・タブレット以外（iPhone・Android）の判定をして、ApplicationTabGroup生成時に適切なWindowを渡しています。
ui/handheld/ApplicationWindow.js	iPhoneおよびAndroid用のWindow。ボタンで別Windowを開きます。別ウィンドウからはナビゲーションバーの戻るボタンで戻ります。self.containingTab.open(Ti.UI.createWindow(...));
ui/tablet/ApplicationWindow.js	タブレット用
ui/common/ApplicationTabGroup.js	与えられたWindowクラスを元にWindow2つを生成し、Tabに入れて、TabをTabGroupにaddしています。