今回は前回に引き続いて，“ちょっと実用的な”サンプル・サイト（図1）のFlex2アプリケーションの中身を解説していきます。今回の内容は
  • アプリケーション・フロー
  • Main.mxmlの概要
  • ApplicationControlBarの機能
の三つです。

図1：サンプル・サイト（クリックすると別ウィンドウで表示します。ソースコードはこちら）

　前回作成したサンプル・サイトのデザインを修正してくれる方をブログで募集しましたところ，teppei-studioさんからご連絡をいただきました。修正されたデザインのサンプル・サイトがこちらです（ソースコードをダウンロードできます）。結果的に「Main.mxml」（後述）にも若干手が入りました。このように，デザインとプログラミングの"完全な分離"というのは現状できないと思って良いと思います。Flexプロジェクトを進める場合はこの辺りにも注意が必要です。蛇足になりますが，著者が当初作成したサンプル・サイトのソースの「Style source="xxx.css"」の行をコメントアウトしたものがこちらになります。

　アプリケーション・フロー

　Flex2におけるアプリケーション・フローというのはイベント・フローだと思ってください。実装されている様々なコンポーネントのイベントの連鎖によってActionScriptが実行されていきます。もちろん，それは実装者によって書かれたコードだけでなく，FlexFramework2のコンポーネント内でも様々なイベントが発生し，内々に処理されています。Flex2における開発とは，これらのイベントの流れをコントロールすることと言って良いと思います。では，今回のサンプル・サイトはどうでしょうか。

　サンプル・サイトのイベント・フローの起点はメニューです。メニューの内容がハードコーディングであればもっとシンプルなコードになるのですが，あえて動的に変化するようにしました。ただし，画面の表示方法を工夫することでなるべく簡単にすることもできます。また，メニューが動的に変化するのでコンテンツも動的に変化します。したがって，コンテンツを外部リソースにする必要があります。

　もっとも，コンテンツを外部リソース化することは，Flex/Flashの欠点でもあるSWFファイルサイズの肥大化を軽減してくれる効果があります。日本ではブロードバンド回線のインフラが普及しているとはいえ，地域によっては帯域が狭い回線を使用している場合もありますので，SWFファイルサイズは小さいにこしたことはありません。世界的に見てもブロードバンドに耐え得るインフラが整備されている国は少なく，特に先進国であるアメリカでも実はインフラが普及しておらず課題になっています。

　少し話がずれたので，本筋に戻します。メニューが起点になっていますが，サブコンテンツが有る場合と無い場合で若干違いますが大筋は同じです（図2）。

図2：アプリケーション・フローの大筋

　ただ，図2にはアプリケーションの初期化について書かれていません。「メニュー・データ/ロード完了」がそれに相当します。実はこれ，良いコーディングではありません。なぜでしょうか。まずは図3をご覧ください。

図3：アプリケーションの初期化

　問題の部分は「SideMenuクラス」の初期化からイベント・フローが発生していることです。なぜなら，このフローの末端にある「コンテンツのロード・シーケンス」で必ずしもコンテンツ・エリアが初期化されているとは限らないからです。

　このサンプルではコンテンツ・エリアの初期化がメニュー・データのロードよりも早く終了するのでたまたまうまくいっていますが，必ずメニュー・データのロードよりもコンテンツ・エリアの初期化が完了しているという保証はありません。場合によっては「コンテンツのロード・シーケンス」でエラーが発生する可能性もあります。今回の場合では，mx:Application の「creationComplete」イベントからSideMenuクラスの初期化をするほうが良いでしょう。

　また，ここではイベントを擬似的に発行しています。この方法はFlexFramework2 内部でも使用されている方法です。あるオブジェクトの「child」にあたるオブジェクトを参照することはよくあると思いますが，「parent」すなわち「親」を直接参照することはなるべく避けたいものです。例えば「hoge.parent.parent["init"]()」などと親の親の「init」関数を呼び出すというのはクラス間に「不明確な依存関係」を生じさせてしまいます。もちろん，フレームワークなどで明確に決められた規約によるコーディングであれば良いと思います。