[Flex][AS3]画面遷移の実践テクニック

viewStackとカスタムイベントを使用した画面遷移テクニックを紹介します。

viewStackの画面遷移というと、selectedIndex++する方法が一般的ですが、

今回のサンプルは画面名を指定して画面遷移を行う事が可能となります。

以下は、コンボボックスで選択した画面名の画面に遷移を行うサンプルアプリケーションです。


画面構成は以下の通り。

[メインアプリケーション]
メインアプリケーションにはViewStackが配置してあり、

画面はViewStackに格納されます。
メインアプリケーションは、画面起動時(creationComplete)
画面遷移用に作成したカスタムイベントをリスニングし、
子画面が画面遷移イベントをディスパッチすると、子画面から送信された画面名を検索し
画面遷移を行います。

コードは以下の通り。

<?xml version="1.0" encoding="utf-8"?>



	


	
		
				
		
		
		
		  
          

[子画面]
子画面はコンボボックスで遷移先の画面を指定し、 ボタンクリックで画面遷移イベントをディスパッチします。
 この時、コンボボックスの選択された値（value）を画面遷移イベントにセットをして
メインアプリケーションに送信します。
コードは以下の通りです。

<?xml version="1.0" encoding="utf-8"?>

	
	
		
	
	
	
		
		
        

[カスタムイベント]
画面遷移専用のカスタムイベントです。
画面名格納用にアクセサを用意しています。

コードは以下の通り。

package events
{
	import flash.events.Event;

	public class FrameworkEvent extends Event
	{
		/**
		 *	イベントタイプ
		 */
		public static const CHANGE_VIEW:String = 'change_View';

		/**
		 *	アクセサ
		 */
		private var _viewName:String = '';
		
		public function set viewName(name:String):void
		{
			_viewName = name;
		}
		public function get viewName():String
		{
			return _viewName;
		}

				
		public function FrameworkEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		
	}
}

親画面では画面遷移イベントをリスニングしているので、
 子画面でdispatchEventを行う事で子画面でセットした遷移先の画面名を 親画面に送信する事ができます。
 親画面は、子画面から送信された画面名を元に ViewStack内から画面を検索します。
 

mainVs.getChildByName(子画面から送信された画面名);

ViewStackのgetChildByName()を使用して画面オブジェクトを指定する訳ですが、
 mxmlで定義する際にnameプロパティを設定しておく必要があります。

 続いて、取得した画面オブジェクトがViewStackの何番目に位置するかインデックスを取得します。
 

var viewIndex:int = mainVs.getChildIndex(画面オブジェクト);

ViewStackのgetChildIndexを使用する事で、
インデックスを取得する事が可能となります。

ここまでの情報があれば、あとはselectedIndexを指定するだけです。

親画面でイベントをリスニングし、
子画面は画面遷移の時に毎回イベントをディスパッチするだけなので
標準化の観点でもおすすめできる方法です。