- 追加された行はこの色です。
- 削除された行はこの色です。
Titanium Mobileのプロジェクトは[File] - [New] - [Mobile Project]から行いますが、雛形の種類が多いのでメモです。
*tiapp.xmlオススメ設定
**単位をsystemからdpに変更
<property name="ti.ui.defaultunit" type="string">dp</property>
理由：こちらの方がAndroidにも対応させるときにボタンの大きさなどがiPhoneと近くなります。2014年辞典ではデフォルトでdpとなっているようです。
**開発ビルドの時もAndroidでminifyがかかるように設定
次の行を追加します。
<property name="ti.android.compilejs" type="bool">true</property>
理由：JSONデータに変なminifyがかかり、不具合の原因となる場合があるそうです。
参考ページ：[[TitaniumでAndroidアプリをリリースビルドしたときだけ上手く動かなくて泣いた話 | リア充爆発日記>http://d.hatena.ne.jp/ria10/20131115/1384518551]]
*Classic
**Default Project
雛形が空のプロジェクト。完全に空でなく、app.js内でTabGroupやWindowを作るサンプルが入っています。
|jsファイル名|内容|h
|app.js|TabGroupを生成して、ラベル入りのWindow２つを追加してopen|
**Single Window Application
シンプルなウィンドウアプリケーション。ナビゲーションバーは付いておらず、１画面でいいので画面を広く使いたい場合にオススメ
|jsファイル名|内容|h
|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ファイル名|内容|h
|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();
+タブのタイトルおよびアイコン画像設定をコメントアウト。// title: L('home'), // icon: '/images/KS_nav_ui.png',
+タブ画像ファイルをプロジェクトから削除
|jsファイル名|内容|h
|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ファイル名|内容|h
|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用の下から引き出せる部分のプログラム|
*リンク
-[[thapps>http://coe.webcrow.jp/]] ... ターゲットをwebとした時のデモ
