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

第2回では、画面遷移フレームワークのコンポーネントについて解説しました。本記事は、それらコンポーネントを使ってアプリケーションを作成する際に必要となる「データ操作」について解説します。

画面遷移のデータについて

モバイルアプリケーションでは、デスクトップアプリケーションに比べて画面領域が狭いため、画面を進めたり戻したりと画面遷移が多用されます。例えば、一覧画面から詳細画面に遷移、データ入力画面から入力補助画面に遷移など。このようなデータ連携のある画面遷移で重要になってくるのが、データの引き渡しと受け取りです。本記事では、次のような画面遷移におけるデータの扱い方について説明します。

  • 画面に対するデータの引き渡し
  • 画面に対するデータの受け取り
  • 画面のコンテキスト
  • 画面の戻りデータ

なお、第2回で説明したようにViewNavigatorコンポーネントは、下記のメソッドを使うことで動的に画面を遷移させることができます。

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

サンプルアプリケーションの紹介

今回のサンプルアプリケーションは、前回のサンプルアプリケーションを拡張したものです。

画面遷移におけるデータの扱い方

画面に対するデータの引き渡し

ViewNavigatorコンポーネントでは、1つ先に画面へ遷移させるpushViewメソッドの第二引数を使って画面データの引き渡しを行うことができます。引き渡す画面データは、遷移先の画面に表示するためのデータです。

今回のサンプル03_ViewNavigatorApplicationSampleでは、一覧画面にリスト表示されているユーザ名を押下すると詳細画面に遷移します。そのために遷移先の詳細画面(DetailView)を指定してpushViewメソッドを呼び出します。詳細画面に引き渡すデータとして、第二引数にリストで選択したユーザ情報を指定しています。

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

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

※詳細画面でデータ編集するために、ObjectUtil.cloneを使って複製しています。

画面に対するデータの受け取り

ViewNavigatorコンポーネントでは、pushViewメソッドの第二引数で引き渡された画面データを、遷移先の画面(Viewコンポーネント)のdataプロパティに設定します。なお、Viewコンポーネントのdataプロパティに引き渡された画面データが確実に入っているタイミングは、addイベント以降になります。

今回のサンプル:03_ViewNavigatorApplicationSampleでは、詳細画面に引き渡された画面データをdataプロパティで参照しています。また、dataプロパティはバインディングに使用することができます。詳細画面のtitleプロパティは、データバインディングで処理しています。

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

<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:c="components.*" title="{data.fullName}"

画面コンテキスト

画面コンテキストとは、画面を構成するためのデータです。コンテキストにもとづいて、遷移先の画面のレイアウトやステート、そして表示データを変更することが可能です。ViewNavigatorコンポーネントでは、pushViewメソッドの第三引数を使ってコンテキストを指定できます。遷移先の画面でコンテキストを参照するためには、navigator.contextを使用します。

今回のサンプル:03_ViewNavigatorApplicationSampleでは、詳細画面から業種選択画面に遷移する際に、業種選択画面のコンテキストとして「性別」データを引き渡しています。

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

protected function jobType_clickHandler(event:MouseEvent):void{ data = createFormData(); navigator.pushView(JobTypeSelectView,null,{sex:sexGroup.selectedValue}); }

業種選択画面では、コンテキストの性別を判別して業種リストを表示しています。

ソースコード:03_ViewNavigatorApplicationSample/src/views/JobTypeSelectView.mxml

protected function view1_addHandler(event:FlexEvent):void{ jobTypeList.dataProvider = navigator.context.sex == 0 ? sex0:sex1; }

画面の戻りデータ

ViewNavigatorコンポーネントでは、popView/popToFirstView/popAll/replaceViewメソッドを使用して画面履歴を戻すことができます。その際、画面の戻りデータを作成して、履歴から画面を復元する際にそのデータを参照させることができます。

画面の戻りデータを作成するには、画面(Viewコンポーネント)のcreateReturenObjectメソッドをオーバーライドします。履歴から復元した画面から参照するには、画面の変数navigatorのpoppedViewReturnedObjectプロパティを使用します。このプロパティに戻りデータが確実に入っているタイミングは、addイベント発生後からviewActivateイベント発生する前までです。

今回のサンプル:03_ViewNavigatorApplicationSampleでは、業種選択画面で選択した業種データを戻りデータとしています。

ソースコード:03_ViewNavigatorApplicationSample/src/views/JobTypeSelectView.mxml

public override function createReturnObject():Object{ if( jobTypeList.selectedIndex > -1 ){ return jobTypeList.selectedItem; } else { return null; } }

詳細画面で戻りデータを処理するには、画面が追加された時のAddイベントをハンドリングして行います。navigator.poppedViewReturnedObjectプロパティを使って戻りデータを参照しています。

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

protected function view1_addHandler(event:FlexEvent):void{ setupForm(data as User); //returenObject var returnedObject:ViewReturnObject = navigator.poppedViewReturnedObject; if( returnedObject != null && returnedObject.object is JobType){ jobTypeSelect.jobType = returnedObject.object as JobType; } }

永続化について

モバイルアプリケーションでは、電話の呼び出しやホームボタンを押した場合など、アプリケーションが中断されることが頻繁にあります。Flex 4.5の画面遷移フレームワークには、中断された画面を復元できるようにするために、画面を永続化する仕組みがあります。

永続化の有効化

画面遷移フレームワークの画面の永続化を有効にするには、ViewNavigatorApplicationコンポーネント、またはTabbedViewNavigatorApplicationコンポーネントのpersistNavigatorStateプロパティをtrueに設定します。初期設定はfalseになっています。

今回のサンプル:03_ViewNavigatorApplicationSampleでは、下記のように永続化を有効にしています。

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

<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" persistNavigatorState="true"

また、永続化が有効になると、ローカルSharedObjectを使用してアプリケーションの状態が保存できるようになります。今回のサンプルンでは使用していませんが、spark.managers.PersistenceManagerのメソッドを用いてこのローカルSharedObjectにアクセスすることができます。

永続と復元するタイミング

永続化が有効になっているアプリケーションが一時中断または終了した場合、永続化の処理が実行されます。また、そのアプリケーションが再起動した場合に、復元の処理が実行されて、終了時の画面を表示します。

ViewNavigatorコンポーネントの永続化

ViewNavigatorコンポーネントの永続化の対象は、画面遷移履歴です。画面遷移履歴の永続化は、遷移させた画面の順に行います。また、画面の永続化については、Viewコンポーネントの永続化を参照してください。

復元の場合は、ViewNavigatorコンポーネントが画面遷移履歴を復元します。そして、ViewNavigatorコンポーネント自身の画面遷移履歴に設定します。よって、アプリケーション終了時に表示されていた画面を表示することができます。

TabbedViewNavigatorコンポーネントの永続化

TabbedViewNavigatorコンポーネントの永続化の対象は、タブを構成している複数のViewNavigatorコンポーネントとタブの選択状況です。

復元の場合は、TabbedViewNavigatorコンポーネントが複数のViewNavigatorコンポーネントと選択状態を復元します。そして、TabbedViewNavigatorコンポーネント自身のタブに設定します。よって、アプリケーション終了時に表示されていたタブと画面を表示することができます。

Viewコンポーネントの永続化

Viewコンポーネントの永続化は、ViewNavigatorコンポーネントの画面遷移履歴が永続化されるときに行われます。永続化の対象は、画面のクラス名とdataプロパティとcontextプロパティです。

復元の場合は、ViewNavigatorコンポーネントが画面のクラス名とプロパティを復元します。そして、ViewNavigatorコンポーネントが、画面を生成して画面のプロパティを設定します。よって、アプリケーション終了時に表示されていた画面を設定されたプロパティをもとに再現することができます。

おわりに

今回のチュートリアルでは、画面遷移フレームワークのデータの扱い方について説明しました。サンプルコードを実行することで、画面遷移とデータについて理解できると思います。次回は、画面を構成するモバイル用コンポーネントとそのスキンについて説明します。

関連記事