標準的なモバイルアプリケーションの構造
モバイルデバイスで正常に動作させるために、コアコンポーネントのスキンを作成したり、コアコンポーネントを拡張したりしただけではありません。Flex 4.5では新しいアプリケーションコンポーネントのセットも提供されます。特にこれらのコンポーネントは、タッチスクリーン式スマートフォン用の標準デザインパターンを導入したアプリケーションを簡単に構築できるように設計されています。
画面領域が限られているので、一般的にこうしたデバイスのアプリケーションは連続したビューの組み合わせで構成されています。それぞれのビューは1つのデータリストまたは1つのデータアイテムの詳細情報を表示します。ユーザーは、データアイテムやその他のコントロールをタップしてビュー間の切り替えを行い、戻る場合は画面のUIまたはハードウェアの「戻る」ボタンを使用します。また、画面のUIやメニューからその他のアクションを実行できます。図2は、このアプリケーションデザインパターンを示しています。
Flexではこうしたパターンをサポートするため、次のコンポーネントが追加されました。
View
Viewコンポーネントは、単一のUI画面を表示します。一般的には、ViewをベースにしてカスタムのMXMLコンポーネントまたはActionScriptコンポーネントを作成し、コンテンツ内に表示させたいコンポーネントを追加します。例えば、ショッピングカートのアプリケーションの場合には、対象となるアイテムとカテゴリのリストを表示するホームビューを提供することが考えられます。そこから、あるカテゴリをタップして、そのカテゴリ内のアイテムを表示する製品リストビューに移動します。次に、ある製品をタップして、その製品の情報を表示する製品詳細ビューに移動します。
この場合、それぞれのViewには、該当するビューで表示されるデータを指定したdata
プロパティが使用されています。ユーザーがアプリケーションを操作している間、Viewは相互にデータを受け渡します。さらに、data
プロパティを使用することによって、ViewNavigatorおよびViewNavigatorApplicationが、メモリにデータを保存したり、アプリケーションの実行後にデータを維持したりできるようになります(これについては後で説明します)。
縦横方向に画面を回転させた場合、デフォルト設定によってViewは適切な縦横比に自動的に調整されます。このため、標準的なFlexレイアウトマネージャーを使用する場合は、デベロッパーサイドで細かく設定しなくても、アプリケーションの縦横比が自動的に変化します。詳細に制御したい場合は、Flexのステートメカニズムを利用して、縦方向ステートと横方向ステートの設定を行い、それぞれのステートでViewがどのように表示されるかを正確に指定できます。
ActionBar
ActionBarは、アプリケーションの各Viewの上部に表示される標準的なヘッダーコンポーネントです。通常、タイトル部分と、現在のビューの更新や新しいアイテムの作成といったアクションを実行する1つ以上のボタンがあります。アプリケーション全体で維持されるコントロールをActionBarに追加したり、ビューごとにActionBarをカスタマイズしたりできます。例えば、アプリケーションのホーム画面のActionBarに検索ボックスを配置したりすることが可能です。
ViewMenu
ViewMenuは、ユーザーがデバイス上のメニューボタンを押すと画面の下部に表示される標準コントロールです。任意のビューで、メニューアイテムのセットを含むviewMenuItems
プロパティを追加できます。それぞれのメニューアイテムでは、アイコン、ラベル、およびクリックハンドラーを指定します。ViewMenuは、それ自体の表示と非表示を管理し、メニューアイテムを適切にレイアウトします。
ViewNavigator
ViewNavigatorは、スタックベースの履歴メカニズムを使用して、アプリケーションのActionBarおよびViewのセットを管理します。アプリケーションが起動すると、ViewNavigatorはfirstView
プロパティで指定したビューを表示します。次に、リストアイテムをタップするなどユーザーの操作に反応して新しいビューに切り替える場合にはpushView()
を呼び出し、前のビューに戻る場合にはpopView()
を呼び出します。Flexでは、ユーザーがアプリケーションを操作している間にコンテキストを維持できるように、最適化されたビュートランジションがそのまま使用できるようになっています。
ViewNavigatorのデフォルトでは、メモリを節約するために、一度に1つのビューしかメモリに保存されません。ただし、表示済みのビューのデータはスタックに保存されるので、ユーザーが前のビューに戻っても適切なデータが再表示されます。
標準的なViewNavigatorに加えて、TabbedViewNavigatorも提供されています。TabbedViewNavigatorを使用すると、下部のタブをタップして異なるビューのスタック間を切り替えることができます。
ViewNavigatorApplication
ViewNavigatorApplicationは、こうした機能をすべて1つにまとめた便利なアプリケーションクラスです。ViewNavigatorApplicationをベースにアプリケーションを構築すると、自動的にViewNavigatorがビューの管理を行います。タブ付きアプリケーションには、類似のアプリケーションクラスであるTabbedViewNavigatorApplicationを使用できます。また、ViewNavigatorApplicationはハードウェアの「戻る」ボタンのデフォルトビヘイビアーを提供し、ViewNavigatorのpopView()
メソッドにそれをマッピングします。デバイスの縦横比が変わった場合には、ViewNavigatorと現在のビューにその情報を受け渡して処理します。
さらに、ViewNavigatorApplicationには、アプリケーションの終了時にそのビューステートとデータを保存する機能が搭載されています。このため、次にアプリケーションが起動したときに、前回と同じビューと閲覧履歴を復元できます。これによって、ユーザーにアプリケーションの中断をまったく意識させることがありません。OSがいつでもアプリケーションを中断または終了させる可能性があるので、モバイルデバイスでは特にこの点は重要になります。
もちろん、標準的なSpark Applicationクラスを使用して一からアプリケーションを開発したり、Viewナビゲーションパターンを使わずに主なモバイルコンポーネントとスキンを活用したりしてもかまいません。例えば、タブレットアプリケーションを開発している場合は、小さなビューでアプリケーション全体を構築する必要はありません。タブレットは利用できる画面領域が広く、タブレットアプリケーションでは画面切り替えをそれほど必要としないからです。こうしたケースでは、ViewNavigatorApplicationを使用せずに、標準的なSpark Applicationで開発したいと考える人もいるでしょう。ただしその場合でも、モバイル用に最適化されたコンポーネントとスキンの利点を活かすために、モバイルテーマを使用してください。