トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

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


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

Classic

Default Project

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

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

Single Window Application

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

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

Master/Detail Application

テーブルを表示し、選択すると別ウィンドウを開くサンプルです。iOSではナビゲーションバーも表示され、別ウィンドウの左上を選択すると元のテーブルに戻ります。
ナビゲーションバーを利用する方法はこの雛形のようにNavigationGroupを使用する方法と、次の項目で説明するTabGroupを使用する方法があります。NavigationGroupはAndroidに存在せず、これを使用するとWindowの生成や切り替えをAndroidとiOSでコードを書き換えないといけません。 TabGroupですとiOSとAndroidで共通に記述できるので、タブを使わない場合でも「Tabbed Application」を雛形としてタブを非表示で使用するほうがオススメです。

jsファイル名内容
app.jsタブレット・iPhone・Androidの判定をして、それぞれのWindowを開く
ui/handheld/ios/ApplicationWindow.jsNavigationGroupをaddしたiPhone用のWindow。階層の上から順に次のように設定。Window->NavigationGroup->MasiterContainerWindow->MasterView。マスターの行が選択されるとnavGroup.open(detailContainerWindow);としてNavigationGroupから下の部分を切り替える。注意事項:NavigationGroupはTi.UI.iPhone.createNavigationGroupで生成し、iPhone依存のコードとなります。
ui/handheld/android/ApplicationWindow.jsMasterViewをaddしたAndroid用のWindow。階層の上から順に次のように設定。Window->MasterView。マスターの行が選択されると新たに生成したDetailContainerWindow->DetailViewをopenしてWindowごと切り替え。
ui/handheld/mobileweb/ApplicationWindow.jsMobileWeb用
ui/tablet/ApplicationWindow.jsタブレット用
ui/common/MasterView.jsTableViewを生成し、行をclickすると自身のViewのカスタムイベントを発生させる。
ui/common/DetailView.js自身のViewに対するカスタムイベントを監視し、発生したらラベル内容を更新。

Tabbed Application

タブ付きのアプリケーション雛形。タブそれぞれで独立して、ナビゲーションバーによる画面遷移が行えます。

ナビゲーションバーによる画面遷移だけを利用するため、タブを非表示とする方法

  1. ApplicationTabGroup.jsでwin2, tab2関連のコードを削除
  2. win1生成直後にタブを消すコードを追加。win1.hideTabBar();
  3. タブのタイトルおよびアイコン画像設定をコメントアウト。// title: L('home'), // icon: '/images/KS_nav_ui.png',
  4. タブ画像ファイルをプロジェクトから削除
jsファイル名内容
app.jsApplicationTabGroupを生成して開きます。タブレット・タブレット以外(iPhone・Android)の判定をして、ApplicationTabGroup生成時に適切なWindowを渡しています。
ui/handheld/ApplicationWindow.jsiPhoneおよびAndroid用のWindow。ボタンで別Windowを開きます。別ウィンドウからはナビゲーションバーの戻るボタンで戻ります。self.containingTab.open(Ti.UI.createWindow(...));
ui/tablet/ApplicationWindow.jsタブレット用
ui/common/ApplicationTabGroup.js与えられたWindowクラスを元にWindow2つを生成し、Tabに入れて、TabをTabGroupにaddしています。

HTML-based

htmlでアプリを作る際の雛形です。HTMLフォルダにhtmlファイルなどを入れておくと、アプリ起動後にそれらをWebViewに読み込んで表示します。

jsファイル名内容
app.jsnew ApplicationWindow().open()
ui/ApplicationWindow.jsWebViewを生成。次のどれかのApplicationWindowPlatform(window, webView, titleBarOn, drawerOn)を呼び出す。
ui/iphone/ui/ApplicationWindowPlatform.jsiOS固有のアプリ処理。htmlロード後にナビゲーションバータイトル設定、戻る処理など
ui/android/ui/ApplicationWindowPlatform.jsAndroid固有のアプリ処理
ui/mobileweb/ui/ApplicationWindowPlatform.jsmobileweb固有のアプリ処理
ui/Drawer.jsiOS用の下から引き出せる部分のプログラム