[Flex]カスタムコンポーネントのカスタムイベントをMXML内でリスナー登録する方法

こんにちは。

コンポーネントが発行するイベントをリスナーに登録する場合、addEventListenerを使う他にMXMLでは

<mx:Canvas creationComplete = "creationCompleteHandler(event)"/>

このようにも記述することもできます。

これをカスタムコンポーネントでもできるようにしてみます。

まず適当なカスタムコンポーネント「CustomComponent.mxml」を作ります。

<?xml version = "1.0" encoding = "utf-8"?>
<mx:Canvas xmlns:mx = "http://www.adobe.com/2006/mxml"
	width = "400"
	height = "300"
	creationComplete = "init();">

	<mx:Script>
		<![CDATA[
			//イベント用定数
			public static const EVENT_10SEC:String = "sec10Event"
			
			private function init():void
			{
				//生成から10秒後にカスタムイベントを発行してみます。
				var t:Timer = new Timer(10000,1);
				t.addEventListener(TimerEvent.TIMER, onTimer);
				t.start();
			}
			
			private function onTimer(evt:TimerEvent):void
			{
				//カスタムイベントを発行します
				dispatchEvent(new Event(CustomComponent.EVENT_10SEC));
			}
		]]>
	</mx:Script>

</mx:Canvas>

このコンポーネントは生成されてから10秒後にカスタムイベントを発行します。とりあえずこれだけならASで

var customComp:CustomComponent = new CustomComponent();
customComp.addEventListener(CustomComponent.EVENT_10SEC, on10Sec);

と書けばイベントを監視できます。

このイベント登録をMXMLから行うには、Metadataタグ内にカスタムイベントを登録します。CustomComponent.mxmlに以下のように<Metadata>を追加します。

<?xml version = "1.0" encoding = "utf-8"?>
<mx:Canvas xmlns:mx = "http://www.adobe.com/2006/mxml"
	width = "400"
	height = "300"
	creationComplete = "init();">

	<mx:Script>
		<![CDATA[
			//イベント用定数
			public static const EVENT_10SEC:String = "sec10Event"
			
			private function init():void
			{
				//生成から10秒後にカスタムイベントを発行してみます。
				var t:Timer = new Timer(10000,1);
				t.addEventListener(TimerEvent.TIMER, onTimer);
				t.start();
			}
			
			private function onTimer(evt:TimerEvent):void
			{
				//カスタムイベントを発行します
				dispatchEvent(new Event(CustomComponent.EVENT_10SEC));
			}
		]]>
	</mx:Script>
	
	<!-- Metadataタグ内にカスタムイベントを記述することで、MXMLコンパイラに認識してもらえます。 -->
	<mx:Metadata>
		[Event(name="sec10Event",type="flash.events.Event")]
	</mx:Metadata>

</mx:Canvas>

こうすることでMXMLコンパイラは「このコンポーネントは"sec10Event"というパラメータを持っている」と認識してくれるので、MXML内でのイベント登録が可能になります。FlexBuilderではコード補完もされるようになります。ちゃんとイベントとして認識されていますね。↓

このカスタムコンポーネントを生成し、10秒後のイベントをキャッチしたらアラート表示をするようにしてみました。実行結果はこんな感じです。

ソースはこちらからDLできます。