トップ   編集 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

Titanium Mobile/プロジェクト新規作成 の変更点

Top / Titanium Mobile / プロジェクト新規作成

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

*tiapp.xmlオススメ設定

**単位をsystemからdpに変更
     <property name="ti.ui.defaultunit" type="string">dp</property>
理由:こちらの方がAndroidにも対応させるときにボタンの大きさなどがiPhoneと近くなります。2014年辞典ではデフォルトでdpとなっているようです。
理由:こちらの方が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を生成して、ラベル入りのWindow2つを追加してopen|



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

|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とした時のデモ