問題点
iOSにおいて開いたWindowから戻りたい時は、一般的にタイトルバー左端のナビゲーションで戻ります。Androidにおいて開いたWindowから戻りたい時は、バックキーで戻ります。
これらの遷移を利用したい場合、タブの有無によって次のようなトップレベルビューを使い分けなければいけません。
各種アプリケーションのトップレベルビュー
| - | iOS | Android |
|---|---|---|
| no tabbed application | NavigationWindow(*1) | Window |
| tabbed application | TabGroup | TabGroup |
*1: iOSではtabBarHiddenプロパティをtrueとすると、代わりにTabGroupが使用できます。
補足：TabGroupに揃えられればいいのですが、残念ながらAndroidではTagGroupを使用してtabBarHiddenプロパティをtrueに設定しても不自然なスペースが表示されてしまいます。
例えばWindow AからWindow Xを開く場合を考えてみます。単にWindow Xを開きたいだけなのに、単純に呼び出すと次のようにコードを書き分けないといけなくなります。
Windowを開くのに、このような断片化したコードは書きたくありません。
| - | iOS | Android |
|---|---|---|
| no tabbed application | navWin.openWindow(winX) | winX.open() |
| tabbed application | activeTab.open(winX) | activeTab.open(winX) |
解決方法
裏技でTabGroupで統一する方法も有るのですが、SDKのバージョンが変わると動かなくなるなど安定しておらず、コードも複雑となりメンテナンス性が落ちます。そこで上記テーブルのトップレベルビューを素直に使用したままで、同じコードでWindowを開く方法を考えました。
index.jsファイルにAlloy.Globals.UI.openWindowというメソッドを用意し、Alloy.Globals.UI.openWindow('winX');といったコードでウィンドウを開けるようにしました。これによって次の４パターンにおいてWindowを開くコードが同じとなり、ソースがメンテナンスしやすくなり、iOS/Android両対応もスムーズとなります。
- iOS タブ無しアプリ
- iOS タブ有りアプリ
- Android タブ無しアプリ
- Android タブ有りアプリ
補足１：Alloy.Globals.UI.openWindowの中身は４パターンで違うのですが、ここはアプリが変わっても内容は変わりません。別Windowを開くコードはアプリ内で複数有ることが多く、今回のようにしてここが統一されるメリットは大きいです。
補足２：Alloy.Globals.openWindowでもいいのですが、他にもiOSとAndroidで同じように呼べるUIを増やして整理したいのでUIを付けています。
コード
具体的なサンプルコードについてはタブ無しとタブ有りに分けて、GitHubで公開しています。
- iOS/Android タブ無しアプリ
https://github.com/papuujp/TiSampleNoTabbed - iOS/Android タブ有りアプリ
https://github.com/papuujp/TiSampleTwoTabbed
(English)
#How to open a window in same code on a tabbed or no tabbed application(Titanium Alloy, iOS/Android)
Problem
Here are top level views on a tabbed or no tabbed application.
| - | iOS | Android |
|---|---|---|
| no tabbed application | NavigationWindow | Window |
| tabbed application | TabGroup | TabGroup |
If I open Window X from Window A, I have to write these code.
I don't want to write these fragmented code!!!
| - | iOS | Android |
|---|---|---|
| no tabbed application | navWin.openWindow(winX) | winX.open() |
| tabbed application | activeTab.open(winX) | activeTab.open(winX) |
Solution
So I made Alloy.Globals.UI.openWindow in index.js. And I can open a window in the same code on the four pattern.
Alloy.Globals.UI.openWindow('winX');
- no tabbed iOS application
- tabbed iOS application
- no tabbed Android application
- tabbed Android application
It's easy to maintenance and portable between iOS and Android.
Code
Codes are on GitHub.
- no tabbed iOS/Android application
https://github.com/papuujp/TiSampleNoTabbed - tabbed iOS/Android application
https://github.com/papuujp/TiSampleTwoTabbed