[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できます。