Flexでの画面遷移について

Flexでの画面遷移は、”私の知る限りでは”以下を使用して実施します
１．ナビゲータコンテナを使用した画面遷移
-ViewStack ナビゲータコンテナ
-TabNavigator コンテナ
-Accordion ナビゲータコンテナ

【ナビゲータコンテナについて】
ナビゲータコンテナは、子コンテナのグループ内でのユーザーの移動を制御します。たとえば、TabNavigator コンテナでは、一連のタブを使用して、表示する子コンテナを選択できます。

２．ViewStateを使用した画面遷移

【ビューステートについて】
多くの高度なインターネットアプリケーションでは、ユーザーの実行するタスクに応じてインターフェイスが変化します。簡単な例としては、ユーザーがマウスポインタをイメージの上に置くと別のイメージに変わるなどの変化が挙げられます。より複雑な例としては、ユーザーによるタスクの進捗状況に応じてブラウズビューから詳細ビューに変更するなどの、ユーザーインターフェイスの内容の変化が挙げられます。このようなインターフェイスでは、スムーズな開く - 閉じるエフェクトを使用して、ビューが切り替えられます。ビューステートを使用すると、複数の Macromedia Flash アプリケーションをロードすることなく、そのようなビヘイビアを簡単に実装できます。これにより、複雑なイベント処理コードを簡素化できます。

３．SWFLoaderを使用した画面遷移

【SWFLoader コントロールについて】
SWFLoader コントロールを使用すると、ある Flex 2 アプリケーションを別の Flex アプリケーションにロードできます。Loader コントロールには、そのコンテンツを拡大 / 縮小するためのプロパティが実装されています。また、表示するコンテンツに合わせて、Loader コントロールのサイズが自動的に変わるようにすることも可能です。デフォルトでは、SWFLoader コントロールのサイズに合うようにコンテンツが拡大 / 縮小されます。また、プログラムを使用して要求時にコンテンツをロードし、ロード操作の進行状況を監視できます。

各画面遷移方法は、一長一短がありますが、私は以下概要にて使用を分ける様にしています。
[１．ナビゲータコンテナを使用した画面遷移]
　メニュー（ユースケース）単位での画面遷移を実施。
　・「ユーザー管理機能」等

[２．ViewStateを使用した画面遷移]
　メニュー内の機能内の各画面遷移を実施。
　・「ユーザー一覧→ユーザー入力→ユーザー確認→完了」等

[３．SWFLoaderを使用した画面遷移]
　メニュー（ユースケース）単位での画面量が多くかつデータの引渡しが
　ない画面に関しては、SWFファイルとして読込み、画面遷移を実施。

詳細は、別途サンプルで記載する予定です。

多階層コンポーネントによるパフォーマンス最適化

カスタムコンポーネント等を階層化して使用し場合、データ量によっては、
表示されるまでのパフォーマンスが低下する事があります。

アプリケーションのコーディングで出来ることは、以下3つと成るそうです。

■パフォーマンスチューニングプラン
１．生成順序機能の使用
２．遅延生成機能の使用
３．使用していないオブジェクトの破棄

それで、今回は一番効果的な「生成順序機能の使用」の検証を実施しました。

【生成順序機能の使用】
初期ビューでコンテナを作成する順序を設定すると、Flex アプリケーションの体感的な起動時間を短
縮できます。Flex のデフォルトの動作では、初期ビューでコンテナとその子オブジェクトすべてを作
成してから、すべてが同時に表示されます。すべてのコンテナとその子オブジェクトが作成されるま
では、ユーザーはアプリケーションを操作したり、重要なデータを表示したりできません。
場合によっては、1 つのコンテナのコンポーネントを表示してから次のコンテナのコンポーネントの
作成に移るようにすると、ユーザーの最初の操作感を向上させることができます。このプロセスは、
生成順序と呼ばれます。
生成順序機能を使用するには、次の例のように、コンテナの creationPolicy プロパティを queued
に設定します。

今回は、アプリケーションMXML(sample.mxml)から、カスタムコンポーネント（sampleList.mxml）を呼び出し、その中でActionScriptにて動的に、Vbox(sampleListItem.mxml)にデータを入れて作成しています。
呼び出しのデータは、HTTPServiceを使用し、sample1.xmlを読み込んでみます。

表示結果は、こんな感じです。





現在のままのソースだと、sample1.xmlのデータを500件程度にした場合、画面が表示されるまでに
10秒近く要してしまいます。

次に、sampleList.mxmlの以下のコメントアウトを外してみて下さい。

// aSlistItem.creationPolicy="queued";

全てのコンポーネントが生成された後に表示されるのではなく、インスタンス化されたコンポーネントから順次表示されているのが分かります。
初めのコンポーネントが表示されるまでに1秒程度でした。

ソースは、以下の感じです。

※sample.mxml

※sampleList.mxml

※sampleListItem.mxml

.articleListItem {
backgroundColor: #000000;
backgroundAlpha: 0.3;
verticalAlign: middle;
horizontalAlign: center;
dropShadowColor: #000000;
borderStyle: solid;
borderThickness: 0;
}

※vo.sampleVO.as

package vo
{
import mx.collections.ArrayCollection;

[Bindable]
public class sampleVO
{
public var sample_id:String;
public var title:String;

public function sampleVO(){

}


}
}

※sample1.xml

0001



0002



0003



0004



0005



0006

ご意見、ご感想等ありましたら、頂ければと思います。