カスタムコンポーネントに配置したUIのイベント処理

カスタムコンポーネントに配置してあるボタンなどのイベントはイベントハンドラでイベントをディスパッチする。

イベントを発するカスタムコンポーネント

//MyComponent.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" >
  <mx:Spacer width="100%"/>
  <mx:Button label="OK" click="dispatchEvent( new Event( 'ok' ) );" />
  <mx:Button label="Cancel" click="dispatchEvent( new Event( 'cancel' ) );" />
</mx:HBox>

ここまで書けばイベントの通知をやったことがある人なら、もうわかると思う。
もちろんdispatchEvent( new Event( 'ok' ) );のところがキモである。
とりあえず、このカスタムコンポーネントのイベントを受け取る部分を見てもらう。

カスタムコンポーネントのイベントを受け取るmxml

上で作ったカスタムコンポーネントのイベントを配置する。

//Main.mxml
<?xml version="1.0"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  xmlns:umezo="*"
  creationComplete="init()"
  width="100%"
  height="100%"
>
  <mx:Script>
    <![CDATA[
    import flash.events.Event;
    private function init():void {
      myComponent.addEventListener( 'ok' , this.onOK );
      myComponent.addEventListener( 'cancel' , this.onCancel );
    }
    
    private function onOK( event : Event ) : void {
      ta.text += 'ok\n';
    }
    
    private function onCancel( event : Event ) : void {
      ta.text += 'cancel\n';
    }
      
    ]]>
  </mx:Script>
  <umezo:MyComponent id="myComponent" width="100%"></umezo:MyComponent>
  <mx:TextArea width="100%" height="100%" id="ta"/>
</mx:Application>

ボタンを押すとテキストエリアに押したボタンのラベルが追加されるというSWFが出来上がる。
カスタムコンポーネントの配置のしかたは
http://d.hatena.ne.jp/umezo/20080519/1211149413
この辺を見てほしい。

解説

まずはこの部分に注目してもらうと

<umezo:MyComponent id="myComponent" width="100%"></umezo:MyComponent>

作成したカスタムコンポーネントをmyComponentというidで配置している。
コンポーネントのidはスクリプト上では変数名になるので、
カスタムコンポーネントには以下のような感じでアクセスできる。

      myComponent.addEventListener( 'ok' , this.onOK );

そしてこの部分ではmyComponentが発するokというイベントに対してonOKというメソッドをリスナーとして登録している。
なので、myComponentがokイベントを通知してくれば自動的にonOKが呼び出される。

イベントを通知している箇所はもちろん↓部分

<mx:Button label="OK" click="dispatchEvent( new Event( 'ok' ) );" />

ボタンがクリックされると新しくEventオブジェクトを生成する。
生成するときに指定する文字列がイベント名になり、addEventListenerの第一引数に対応する。

キャンセルボタンの方も同様の仕組みでイベントの通知、受け取りを行っている。

まとめ

カスタムコンポーネントのイベントはイベントが発生したところでdispatchEventする。