[翻訳]Flex3 Cookbook 1.11 イベントバブリングの使用

Flex3 Cookbookが不親切な上に誤植があったため、ついでに翻訳してみる。 僕が英語読めてないだけだったりして。

とってもテキトー翻訳だと断っておきます。

注

3つのMXMLファイルのソースが出てきますが、BubblingComponent.xml, BubblingComponentHolder.mxmlはソースの配置場所に以下のフォルダを作成し、そこに配備してください。

oreilly/cookbook

上記２ソースの先頭にある

xmlns="oreilly.cookbook.*"

で察しろということなんだろうけど、僕はいまいちその辺の知識がないので少しハマりました。

1.11 Use Event Bubbling の翻訳

課題

あなたは子要素のコンポーネントから親要素のコンポーネントへと順次呼び出されるイベント処理を書きたい。 もちろんイベントリスナ内で呼び出し処理を書くというような手間のかかる方法ではなく。

解決法

子要素から順次通知されるイベントバブリングの仕組みを使いましょう。

検討

イベントのバブリングを理解するにはいくつかのクラスを作成してみる必要があります。 MOUSE_DOWNイベント、CLICKイベント、KEYBORDイベントなど、いくつかの種類のイベントを発生させることができます。 バブリングという言葉はイベントがディスプレイの階層をアプリケーションコンテナまで上っていく様子をあらわします。 泡が水中を上っていくかのように。

ユーザが何らかのコンポーネントをクリックしたとき、そのイベントはコンポーネントの階層を上っていきます。 つまり親コンポーネントは子コンポーネントのクリックイベントを監視し、子要素で発生したイベントを検知できるということです。 親コンポーネントに、子要素のある種類のイベントすべてを監視させるには、単に子コンポーネントの記述部にリスナを追加すればよい。

oreilly/cookbook/BubblingComponent.mxml

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="200">
    <mx:Script>
        <![CDATA[
            private function sendClick():void
            {
                trace(" BubblingComponent:: click ");
            }
        ]]>
    </mx:Script>
    <mx:Button click="sendClick()"/>
</mx:HBox>

上記のコンポーネントはボタンを保持しており、そのボタンはクリックイベントを発生させる。 そのイベントはBubblingComponentのインスタンスを保持するコンポーネントにイベントを伝えていく。 そのイベントを検知するにはBubblingComponentを含むコンポーネント内でクリックハンドラを用意すればよい。

<cookbook:BubblingComponent click="handleClick()" id="bubbler"/>

上記の要素を含むようにBubblingComponentHolderを以下のように作成する。

oreilly/cookbook/BubblingComponentHolder.mxml

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" 
xmlns:cookbook="oreilly.cookbook.*">
    <mx:Script>
        <![CDATA[
            private function handleClick():void
            {
                trace(" BubblingComponentHolder:: click ");
            }
        ]]>
    </mx:Script>
    <cookbook:BubblingComponent click="handleClick()" id="bubbler"/>
</mx:Canvas>

上記のコンポーネントは他にもイベントを監視するコンポーネントがあれば、アプリケーションレベルまでイベントを通知する。 メインアプリケーションBubblingHolderを作成すればBubblingComponent.mxmlで発生したクリックイベントは最終的にアプリケーションレベルにまで通知される。

BubblingHolder.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:cookbook="oreilly.cookbook.*">
    <mx:Script>
        <![CDATA[
            public function createName():void{
                name = "Flex Cookbook";
            }
        ]]>
    </mx:Script>
    <cookbook:BubblingComponentHolder/>
</mx:Application>

MouseEventの一連のイベントはクリック位置などの付属情報を、それを監視する子要素を持つコンポーネント階層を特定し、Stageにイベントを通知する。

StageはMouseEventを検知すると先ほどのコンポーネント階層を、ユーザがマウス操作した最後のコンポーネントにたどり着くまでイベントを通知していく。 これはキャプチャリングと呼ばれる。次にイベントを処理すべきイベントハンドラが実行される。これはターゲッティングと呼ばれ、イベントに実際のターゲットが与えられる段階である。最後にバブリングの段階に入り、コンポーネント階層をさかのぼってStageまで順にイベントを通知する。