前回の記事でTwitterに投稿するところまで実装ができましたが、投稿したあとのwindowの遷移が起きないままになっていますので今回は画面遷移について解説していきます。また、今までのコードをgithubにて公開しましたので必要に応じて参照してみてください。各連載時のコミットにタグをつけてあるので連載にあわせてタグを選択すると便利です。
windowの遷移
windowを閉じる
Twitterに投稿したあとに、メッセージを書いていたwindowを閉じるようにしてみます。
以下のコードを追加します。
これで 投稿が完了すると、メッセージ作成画面が閉じられるようになります。
windowを開く
さて、閉じるのは簡単に書けましたが、windowを開くにはいくつかの方法があります。
windowを開くコードを少し書き換えてみましょう。
前回のコードからwindowを開く部分だけが変更されています。前回の記事ようにmessageWindow.open()と記述すると画面全体を覆うようにメッセージ入力画面が出現しますが、このようにTi.UI.currentTab.open()を利用すると画面上部のナビゲーションバーを残したまま次の画面を開くことができます。この時デフォルトの動作ではアニメーションが設定されており、次のページが右から覆いかぶさるような印象を与えます。
と指定することでこのアニメーションは無効にすることができます。
windowを閉じるときも同様で、
とすることでアニメーションを制御できます。
TabGroupに要注意
ここで説明した、
- ナビゲーションバーを表示しつつ
- 画面遷移をアニメーションする
という実装は、Ti.UI.TabGroupを利用してwindowを管理しないと利用することができません。そこで、この連載では第1回からタブによる画面の切り替えを利用しないにもかかわらずTi.UI.TabGroupを利用したコードになっています。
Titaniumでアプリを作成する際には、タブによる遷移がなくても必ずTi.UI.TabGroupを作成し、Ti.UI.Window.hideTabBar()を使ってタブバーを消しておく実装をおすすめします。
ツイートの詳細を表示する
ツイートの一覧がでるだけでは物足りないので、ここまで説明したウィンドウの遷移を使って、ツイートのパーマリンクを開いてみましょう。
table_view.jsのupdateTimeline関数の最後に上記のようなコードを追加します。tableViewのクリックイベントをListenすることでタップされた行を知ることができます(e.indexの行)。そしてその行のインデクスからツイートの情報を取得し、新しく作るwebWindowにその情報を渡しています。
createWindowで渡しているオブジェクトの任意のパラメータ(上記の例ではstatus_idやscreen_name)で新しく開くwindowにデータを渡せる点はTitaniumの大きな特徴です。新しく開いたwindowではスコープがまったく別になりますので、この方法を用いないとデータを渡すことが基本的にはできません。
urlパラメータで指定してるtweet_window.jsは以下のようになります。
少ないコードですが、これだけでWebページを表示するwindowが作成できます。permalink変数にはTwitterのscreen_nameとstatus_idから生成されるツイートのパーマリンクを指定しています。Ti.UI.createWebViewはurlに任意のURLを指定でき、指定されたWebページがviewとして表示されます。
上記の変更を加えるとツイートをクリックしたときに、下記のようにツイートのパーマリンクページが表示されるようになります。
まとめ
Titaniumにおけるwindowの遷移について解説しました。TabGroupを利用することでナビゲーションバーを使った遷移が簡単になることも説明しました。この方法はよく利用することになるので、繰り返しになりますがTabGroupを利用するように実装することを忘れないでください。また、後半では簡単にWebページが表示できるTi.UI.webViewの利用方法と、新しく開くwindowへどうやってデータを渡すかについて解説しました。