■新機能について
・画面遷移用の新しいコンポーネントは次の通り
spark.components.View:画面用コンポーネント
spark.components.ViewNavigator:画面遷移コンポーネント
・上記アプリケーションを定義するためのコンポーネントは次の通り
spark.components.ViewNavigatorApplication:ViewNavigatorコンポーネントを1つ保持
spark.components.TabbedViewNavigatorApplication:ViewNavigatorコンポーネントを複数保持
■VIEWNAVIGATORコンポーネント
ViewNavigatorコンポーネントとは:
画面遷移の履歴を保持して遷移できるようにしたコンポーネント
[構成]
部品名 用途
actionBar 画面の情報を表示するActionBarコンポーネント
contentGroup 画面を配置するGroupコンポーネント
■VIEWNAVIGATORコンポーネントの機能
1)画面表示機能
Viewコンポーネントで作成した画面を表示する機能
2)画面遷移機能
動的な画面遷移とその遷移を管理する機能
次の画面に進めると履歴し、履歴をもとに前の画面に戻せる
メソッド名 処理
pushView 指定した画面へ進めて、履歴を1つ追加します。
popView 画面を1つ戻して、履歴を1つ削除します。
popToFirstView 初期画面まで戻して、それまでの履歴を削除します。
popAll 全ての履歴を削除します。
replaceView 現状の画面と新しい画面を入れ替えます。
・画面遷移時のトランジション
また、画面遷移時のトランジション(動作)は、4種類が用意されている
メソッド名 処理
spark.transitions.SlideViewTransition 上下左右からスライドするエフェクト
(この内右からのスライドがデフォルト)
spark.transitions.FlipViewTransition 回転するエフェクト。
spark.transitions.CrossFadeViewTransition 透明度でフェードアウト・イン
spark.transitions.ZoomViewTransition ズームするエフェクト
[設定方法]
① ViewNavigatorのプロパティでデフォルトのトランジションを指定
メソッド名 処理
defaultPushTransition 次の画面に進む際のトランジションを指定します。
defaultPopTransition 前の画面へ戻る際のトランジションを指定します。
② 画面遷移する度にメソッドで指定する方法
pushViewやpopViewの引数にトランジションクラスを指定
■VIEWコンポーネント
Viewコンポーネントとは:
画面を作成するための基礎となるコンポーネント
Viewコンポーネントをルートタグにして、ボタンやラベルなどのコンポーネントを配置して画面を作成
ViewコンポーネントにはViewNavigatorコンポーネントと連携するためのプロパティがある。
そのプロパティでは表示・非表示の他、titleの文字を指定したり、右側のグループのレイアウトなどを指定できる。
-------------------
ViewNavigatorコンポーネントとViewコンポーネントを用いたアプリケーション
-------------------
■VIEWNAVIGATORAPPLICATIONコンポーネント
ViewコンポーネントとViewNavigatorコンポーネントを利用して画面遷移を行うようなアプリケーションを構築するための
アプリケーションコンポーネント。
ViewNavigatorApplicationコンポーネントには、ViewNavigatorコンポーネントを内部的に1つ保持。
よって、ViewNavigatorApplicationコンポーネントも画面履歴を管理可能。
また、保持しているViewNavigatorコンポーネントのfirstViewプロパティを設定するために、
ViewNavigatorApplicationコンポーネントにもfirstViewプロパティが用意す。
ソースコード:
<s:ViewNavigatorApplication firstView="views.ListView">
</s:ViewNavigatorApplication>
・ ハードウェアキーとの連携
ViewNavigatorApplicationコンポーネントでは、デバイスのハードウェアキーと連携。
キー 動作
Menu アプリケーションメニュー表示(Viewコンポーネントごと)。
Back ViewNavigatorコンポーネントのpopViewメソッドと同等。
ソースコード:
<s:viewMenuItems>
<s:ViewMenuItem label="再読み込み"/>
<s:ViewMenuItem label="初期化"/>
</s:viewMenuItems>
■TABBEDVIEWNAVIGATORAPPLICATIONコンポーネント
TabbedViewNavigatorApplicationコンポーネントは、ViewNavigatorコンポーネントを複数保持可。
複数のViewNavigatorコンポーネントを切り替えるために、下方にTabBarを表示。
TabBarは、ViewコンポーネントのtabVisibleプロパティで操作することも可。
また、ハードウェアキーに対しては、ViewNavigatorApplicationコンポーネントと同様に対応。
ただし、現在表示しているViewNavigatorコンポーネントに対してのみ処理。
ソースコード:
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<s:ViewNavigator label="Tab1" width="100%" height="100%" firstView="views.Tab1View"/>
<s:ViewNavigator label="Tab2" width="100%" height="100%" firstView="views.Tab2View"/>
</s:TabbedViewNavigatorApplication>