必要条件

この記事に必要な予備知識

Adobe Flex 4.5 SDK

ユーザーレベル

すべて

このマスターシリーズでは、Flash Builder 4.5、Flex 4.5 SDKおよびAdobe AIRを使用したFlexモバイルアプリケーションの開発について解説します。

Flex 4.5 SDKでは多くのモバイル機能が新たに追加され、その1つがモバイルアプリケーションを作成するための新しいアプリケーションとコンポーネントです。本記事では、モバイル機能の中でも画面遷移に特化した新しいコンポーネントについて解説します。

なお第1回で解説した、Flash Builder 4.5のFlexモバイルプロジェクトに用意されているテンプレート「ビューベースアプリケーション」や「タブ付きアプリケーション」は、ここで紹介しているアプリケーションやコンポーネントを用いて構築されています。

サンプル : Flex45mobile002_samples

新機能について

Flex SDK 4.5のモバイル機能では、画面を作成するためのコンポーネントとそれを使うためのアプリケーションが追加されました。これらコンポーネントを使うと一覧画面から詳細画面に遷移するような動的な画面生成/表示をするようなアプリケーションを容易に作成することができます。

画面遷移用の新しいコンポーネントは次の通りです。

  • spark.components.View:画面用コンポーネント
  • spark.components.ViewNavigator:画面遷移コンポーネント

上記の2つのコンポーネントを利用したアプリケーションを定義するためのコンポーネントは次の通りです。

  • spark.components.ViewNavigatorApplication:ViewNavigatorコンポーネントを1つ保持
  • spark.components.TabbedViewNavigatorApplication:ViewNavigatorコンポーネントを複数保持

まずは、画面遷移の基礎となるViewNavigatorコンポーネントとViewコンポーネントについて説明します。ViewNavigatorコンポーネントとViewコンポーネントを使うと、動的に画面を生成して表示するようなアプリケーションを容易に構築することができます。画面をViewコンポーネントで作成して、ViewNavigatorコンポーネントで画面遷移を管理します。

ViewNavigatorコンポーネント

ViewNavigatorコンポーネントは、画面遷移の履歴を保持して容易に遷移できるようにしたコンポーネントです。コンポーネントは次のような部品で構成されます。

部品名 用途
actionBar 画面の情報を表示するActionBarコンポーネント。
contentGroup 画面を配置するGroupコンポーネント。

ViewNavigatorコンポーネントの機能

ViewNavigatorコンポーネントには、2つの機能があります。

1)画面表示機能

Viewコンポーネントで作成した画面を表示する機能です。ViewNavigatorコンポーネントは、画面をcontentGroupに配置します。そして画面のプロパティ値を取得してActionBarに設定します。よってActionBarは、画面ごとに見た目が変わります(ActionBar関連のプロパティについては、Viewコンポーネントのところで説明します)。また、ViewNavigatorコンポーネントで表示する最初の画面は、firstViewプロパティで設定します。

2)画面遷移機能

動的な画面遷移とその遷移を管理する機能です。次の画面に進めると履歴を保持します。そして、その履歴をもとに前の画面に戻すことができます。次の表は、画面を遷移させるためのメソッドです。

メソッド名 処理
pushView 指定した画面へ進めて、履歴を1つ追加します。
popView 画面を1つ戻して、履歴を1つ削除します。
popToFirstView 初期画面まで戻して、それまでの履歴を削除します。
popAll 全ての履歴を削除します。
replaceView 現状の画面と新しい画面を入れ替えます。

サンプル02_ViewNavigatorApplicationSampleでは、一覧画面にリスト表示されているユーザ名を押下すると詳細画面に遷移します。そのために遷移先の詳細画面(DetailView)を指定してpushViewメソッドを呼び出します。この時、画面間のデータの受け渡しには、以下のようにpushViewメソッドの第二引数を使います。これによって画面の初期データを指定することができます。このようなViewコンポーネントやViewNavigatorコンポーネントのデータについては第3回で詳しく説明します。

ソースコード:
02_ViewNavigatorApplicationSample/src/views/ListView.mxml

protected function list_clickHandler(event:MouseEvent):void{ navigator.pushView(DetailView,list.selectedItem); }

次に詳細画面の左上にある戻るボタンを押下すると、一覧画面に戻ります。そのために遷移履歴を一つ戻すためにpopVewメソッドを呼び出します。

ソースコード:
02_ViewNavigatorApplicationSample /src/views/DetailView.mxml

protected function button1_clickHandler(event:MouseEvent):void{ navigator.popView(); }

画面遷移時のトランジション

また、画面遷移時のトランジションは、デフォルトだと右からスライドするエフェクトが設定されています。この画面遷移のトランジションは、あらかじめ4種類が用意されており、変更することができます。

メソッド名 処理
spark.transitions.SlideViewTransition 上下左右からスライドするエフェクト。
spark.transitions.FlipViewTransition 回転するエフェクト。
spark.transitions.CrossFadeViewTransition 前の画面の透明度を下げ、次の画面の透明度を上げるエフェクト。
spark.transitions.ZoomViewTransition ズームするエフェクト。

トランジションを指定する方法は、2つあります。1つ目は、ViewNavigatorのプロパティでデフォルトのトランジションを指定する方法です。次の表は、トランジションを指定するプロパティです。

メソッド名 処理
defaultPushTransition 次の画面に進む際のトランジションを指定します。
defaultPopTransition 前の画面へ戻る際のトランジションを指定します。

2つ目は、画面遷移する度にメソッドで指定する方法で。pushViewやpopViewなどの画面遷移用メソッドの引数にトランジションクラスを指定して呼び出します。サンプル02_ViewTransitionsSampleは、4種類のトランジションとそれらのプロパティを変更してトランジションを確認できるようにしたものです。最初の画面でトランジションを選び、次の画面でトランジションのプロパティを設定して[戻る]ボタンか[移動]ボタンを押下することでトランジションが実行されます。[移動]ボタンを押下すると自身に画面遷移するので、繰り返しトランジションを確認することができます。

ソースコード:
02_ViewTransitionsSample/src/views/SlideViewTrantionView.mxml

protected function button2_clickHandler(event:MouseEvent):void { var v:SlideViewTransition = null; v = new SlideViewTransition(); v.mode = modeGroup.selectedValue as String; v.direction = directionGroup.selectedValue as String; v.duration = parseInt(durationInput.text); navigator.pushView(SlideViewTrantionView,null,null,v); }

Viewコンポーネント

Viewコンポーネントは、画面を作成するための基礎となるコンポーネントです。Viewコンポーネントをルートタグにして、ボタンやラベルなどのコンポーネントを配置して画面を作成します。

ViewNavigatorコンポーネントの項目でも説明しましたが、ViewコンポーネントにはViewNavigatorコンポーネントと連携するためのプロパティがあります。これはViewNavigatorコンポーネントで画面が表示される際に利用されるActionBarやViewNavigatorの動作を設定します。次の表は、Viewコンポーネントが持つ、ActionBarの表示に関するプロパティとその詳細です。

Viewのプロパティ 詳細
title titleContentプロパティが指定されていない場合にActionBarのタイトルラベルに表示する文字列。
actionContent ActionBarの右端のグループに配置するコントロールの配列。
actionLayout ActionBarの右端のグループのレイアウト。
navigationContent ActionBarの左端のグループに配置するコントロールの配列。
navigationLayout ActionBarの左端のグループのレイアウト。
titleContent ActionBarの真ん中のグループに配置するコントロールの配列。
titleLayout ActionBarの真ん中のグループのレイアウト。

次は、ViewNavigatorと連携するためのプロパティとその詳細です。

Viewのプロパティ名 詳細
navigator View自身を管理しているViewNavigatorの参照。
actionBarVisible ActionBarを表示するかどうか。
true ActionBarを表示
false ActionBarを非表示
tabBarVisible TabBarを表示するかどうか。
true TabBarを表示
false TabBarを非表示
overlayControls contentGroupの上からActionBarをオーバレイ表示するかどうか。
true ActionBarがContentGroupにオーバレイされます。
false ActionBarの下にcontentGroupが表示されます。
destructionPolicy 画面遷移する際に現在の画面を破棄するかどうか。
auto 画面が自動的に破棄されます。画面は表示する度に生成されます。
never 画面が破棄されません。画面は一度だけ生成され再利用されます。

サンプル02_ViewNavigatorApplicationSampleでは、画面ごとにActionBarを設定しています。一覧画面では図4のようにActionBarを変更しています。ユーザ名を入力するためのテキストインプットをtitleContentに配置し、検索実行するために[検索]ボタンをnavigationContentに配置しています。

ソースコード:
02_ViewNavigatorApplicationSample/src/views/ListView.mxml

<s:View> <s:titleContent> <s:TextInput prompt="ユーザ名" width="100%"/> </s:titleContent> <s:actionContent> <s:Button label="検索"/> </s:actionContent>

詳細画面では図5のようにActionBarを変更しています。一覧画面から指定されたユーザ名をtitleに指定し、一覧に戻るための [戻る]ボタンをnavigationContentに配置し、変更内容を保存するための[保存]ボタンをactionContentに配置しています。

ソースコード:
02_ViewNavigatorApplicationSample/src/views/DetailView.mxml

<s:View title="{data.fullName}"> <s:navigationContent> <s:Button label="戻る"/> </s:navigationContent> <s:actionContent> <s:Button label="保存"/> </s:actionContent>

次に、ViewNavigatorコンポーネントとViewコンポーネントを用いたアプリケーションについて説明します。

ViewNavigatorApplicationコンポーネント

ViewコンポーネントとViewNavigatorコンポーネントを利用して画面遷移を行うようなアプリケーションを構築するためのアプリケーションコンポーネントです。FlexでいうところのApplicationコンポーネント、Adobe AIRだとWindowedApplicationコンポーネントにあたります。

ViewNavigatorApplicationコンポーネントには、ViewNavigatorコンポーネントを内部的に1つ保持しています。よって、ViewNavigatorApplicationコンポーネントも画面履歴を管理することができます。

また、保持しているViewNavigatorコンポーネントのfirstViewプロパティを設定するために、ViewNavigatorApplicationコンポーネントにもfirstViewプロパティが用意されています。今回のサンプル02_ViewNavigatorApplicationSampleでは、firstViewプロパティに一覧画面(ListView)を指定しています。これによってアプリケーションの初期画面は、一覧画面(ListView)が表示されます。

ソースコード:
02_ViewNavigatorApplicationSample/src/ViewNavigatorApplicationSample.mxml

<s:ViewNavigatorApplication firstView="views.ListView"> </s:ViewNavigatorApplication>

ハードウェアキーとの連携

ViewNavigatorApplicationコンポーネントでは、デバイスのハードウェアキーと連携できます。次の表は、ハードウェアキーを押下した場合の動作についてです。

キー 動作
Menu アプリケーションメニューを表示する。
Back ViewNavigatorコンポーネントのpopViewメソッドと同等の処理を行う。

ViewNavigatorApplicationコンポーネントは、デバイスのメニューキーを押下することで画面にオーバレイしてメニューを表示します。メニューの指定はViewコンポーネントごとに行います。

サンプル:02_ViewNavigatorApplicationSampleでは、一覧画面でメニューキーを押下すると、データに対する処理を行うメニューを表示します。

ソースコード:
02_ViewNavigatorApplicationSample/src/views/ListView.mxml

<s:viewMenuItems> <s:ViewMenuItem label="再読み込み"/> <s:ViewMenuItem label="初期化"/> </s:viewMenuItems>

TabbedViewNavigatorApplicationコンポーネント

TabbedViewNavigatorApplicationコンポーネントは、ViewNavigatorApplicationコンポーネントとは異なり、ViewNavigatorコンポーネントを複数保持することができるアプリケーションです。このコンポーネントは、複数のViewNavigatorコンポーネントを切り替えるために、下方にTabBarを表示します。TabBarは、ViewコンポーネントのtabVisibleプロパティで操作することも可能です。

また、ハードウェアキーに対しては、ViewNavigatorApplicationコンポーネントと同様に対応しています。ただし、現在表示しているViewNavigatorコンポーネントに対してのみ処理されます。

サンプル02_TabbedViewNavigatorApplicationSampleでは2つのViewNavigatorコンポーネントを保持しています。

ソースコード:
02_TabbedViewNavigatorApplicationSample/src/TabbedViewNavigatorApplicationSample.mxml

<?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>

おわりに

今回のチュートリアルでは、Flex SDK 4.5のモバイル機能で追加された画面遷移用の新しいコンポーネントについて説明しました。サンプルコードを実行することで、モバイル機能を使ったモバイルアプリケーションと画面遷移について理解できると思います。次回は、画面遷移における画面とそのデータについて説明します。

関連記事