Titanium Mobile/プロジェクト新規作成 のバックアップ(No.4)
- バックアップ一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- Titanium Mobile/プロジェクト新規作成 へ行く。
Titanium Mobileのプロジェクトは[File] - [New] - [Mobile Project]から行いますが、雛形の種類が多いのでメモです。
Classic
Default Project
雛形が空のプロジェクト。完全に空でなく、app.js内でTabGroupやWindowを作るサンプルが入っています。
| jsファイル名 | 内容 |
| app.js | TabGroupを生成して、ラベル入りのWindow２つを追加してopen |
Single Window Application
シンプルなウィンドウアプリケーション。ナビゲーションバーは付いておらず、１画面でいいので画面を広く使いたい場合にオススメ
| 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。サンプルとしてクリック可能なラベルを配置 |
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.js | NavigationGroupをaddしたiPhone用のWindow。階層の上から順に次のように設定。Window->NavigationGroup->MasiterContainerWindow->MasterView。マスターの行が選択されるとnavGroup.open(detailContainerWindow);としてNavigationGroupから下の部分を切り替える。注意事項：NavigationGroupはTi.UI.iPhone.createNavigationGroupで生成し、iPhone依存のコードとなります。 |
| ui/handheld/android/ApplicationWindow.js | MasterViewをaddしたAndroid用のWindow。階層の上から順に次のように設定。Window->MasterView。マスターの行が選択されると新たに生成したDetailContainerWindow->DetailViewをopenしてWindowごと切り替え。 |
| ui/handheld/mobileweb/ApplicationWindow.js | MobileWeb用 |
| ui/tablet/ApplicationWindow.js | タブレット用 |
| ui/common/MasterView.js | TableViewを生成し、行をclickすると自身のViewのカスタムイベントを発生させる。 |
| ui/common/DetailView.js | 自身のViewに対するカスタムイベントを監視し、発生したらラベル内容を更新。 |
Tabbed Application
タブ付きのアプリケーション雛形。タブそれぞれで独立して、ナビゲーションバーによる画面遷移が行えます。
ナビゲーションバーによる画面遷移だけを利用するため、タブを非表示とする方法
- ApplicationTabGroup.jsでwin2, tab2関連のコードを削除
- win1生成直後にタブを消すコードを追加。win1.hideTabBar();
- タブアイコン画像設定をコメントアウト。// icon: '/images/KS_nav_ui.png',
- タブ画像ファイルをプロジェクトから削除
| 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しています。 |
HTML-based
htmlでアプリを作る際の雛形です。HTMLフォルダにhtmlファイルなどを入れておくと、アプリ起動後にそれらをWebViewに読み込んで表示します。
| jsファイル名 | 内容 |
| app.js | new ApplicationWindow().open() |
| ui/ApplicationWindow.js | WebViewを生成。次のどれかのApplicationWindowPlatform(window, webView, titleBarOn, drawerOn)を呼び出す。 |
| ui/iphone/ui/ApplicationWindowPlatform.js | iOS固有のアプリ処理。htmlロード後にナビゲーションバータイトル設定、戻る処理など |
| ui/android/ui/ApplicationWindowPlatform.js | Android固有のアプリ処理 |
| ui/mobileweb/ui/ApplicationWindowPlatform.js | mobileweb固有のアプリ処理 |
| ui/Drawer.js | iOS用の下から引き出せる部分のプログラム |