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

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

Last-modified: 2014-09-15 (月) 15:47:37 (1160d)
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でminifyがかかるように設定

次の行を追加します。

    <property name="ti.android.compilejs" type="bool">true</property>

理由:JSONデータに変なminifyがかかり、不具合の原因となる場合があるそうです。 参考ページ:TitaniumでAndroidアプリをリリースビルドしたときだけ上手く動かなくて泣いた話 | リア充爆発日記

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用の下から引き出せる部分のプログラム

リンク

  • thapps ... ターゲットをwebとした時のデモ