Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > Flex ビジュアルコンポーネントの使用 > イベントの処理

イベントの処理

Flex アプリケーションはイベント駆動型です。"イベント" は、ユーザーがインターフェイスコンポーネントを操作したことをプログラマに通知します。また、コンポーネントの作成や廃棄、サイズの変更など、コンポーネントの外観やライフサイクルで重要な変更が発生したことも通知します。

コンポーネントのインスタンスがイベントを送出すると、そのイベントの "リスナー" として登録されているオブジェクトが通知を受けます。イベントリスナー ("イベントハンドラ" と呼ぶこともあります) は、イベントを処理する ActionScript の形で定義します。イベントリスナーは、コンポーネントの MXML 宣言または ActionScript の中で登録します。イベント処理の詳細な例については、
実行時のコンポーネントの初期化を参照してください。

次の例は、Accordion コンテナでビューを変更したときに処理されるイベントリスナーを MXML で登録しています。

<?xml version="1.0"?>
<!-- components\CompIntroEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300"
    height="280">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            private function handleAccChange():void {
                Alert.show("You just changed views");
            }
        ]]>
    </mx:Script>

    <!-- The Accordion control dispatches a change event when the 
            selected child container changes. -->
    <mx:Accordion id="myAcc" 
        height="60" 
        width="200" 
        change="handleAccChange();">
        <mx:HBox label="Box 1">
            <mx:Label text="Put Some Stuff Here"/>
        </mx:HBox>

        <mx:HBox label="Box 2">
            <mx:Label text="Put Different Stuff Here"/>
        </mx:HBox>
    </mx:Accordion>
</mx:Application>

この例では、次のイメージが作成されます。

コンポーネントからイベントリスナーに対して、イベントに関する情報を含むイベントオブジェクトを渡すことができます。

Accordion コンテナの場合、change イベントのイベントリスナーに渡されるイベントオブジェクトは IndexChangedEvent クラスです。次の例のように、イベントオブジェクトにアクセスするイベントリスナーを記述できます。

<?xml version="1.0"?>
<!-- components\CompIntroEventAcc.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300"
    height="280">

    <mx:Script>
        <![CDATA[
            // Import the class that defines the event object.
            import mx.events.IndexChangedEvent;
            import mx.controls.Alert;
            
            private function handleChange(event:IndexChangedEvent):void {
                var currentIndex:int=event.newIndex;
                Alert.show("You just changed views \nThe new index is "
                    + event.newIndex);
            }
        ]]>
    </mx:Script>

    <!-- The Accordion control dispatches a change event when the 
            selected child container changes. -->
    <mx:Accordion id="myAcc" 
        height="60" 
        width="200" 
        change="handleChange(event);">
        <mx:HBox label="Box 1">
            <mx:Label text="Put Some Stuff Here"/>
        </mx:HBox>

        <mx:HBox label="Box 2">
            <mx:Label text="Put Different Stuff Here"/>
        </mx:HBox>
    </mx:Accordion>
</mx:Application>

この例では、Accordion コンテナの新しい子のインデックスを特定するために、IndexChangedEvent オブジェクトの newIndex プロパティにアクセスしています。イベントの詳細については、イベントの使用を参照してください。

サブトピック

コンポーネントのインスタンス化ライフサイクルについて

コンポーネントインスタンス化ライフサイクルは、コンポーネントクラスからコンポーネントオブジェクトを作成するときに生じる一連の手順を記述したものです。Flex は、このライフサイクルの一環として、コンポーネントメソッドの呼び出し、イベントの送出、およびコンポーネントの可視化を自動的に行います。

次の例では、Button コントロールを作成してコンテナに追加しています。

<?xml version="1.0"?>
<!-- components\AddButtonToContainer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Box id="box1" width="200">
        <mx:Button id="button1" label="Submit"/>
    </mx:Box>
</mx:Application>

次の ActionScript は、MXML コードの一部に対応します。Flex はどちらの例でも同じ一連の手順を実行します。

// Box コンテナを作成します。
var box1:Box = new Box();
// Box コンテナを設定します。 
box1.width=200;

// Button コントロールを作成します。 
var button1:Button = new Button()
// Button コントロールを設定します。
button1.label = "Submit";

// Button コントロールを Box コンテナに追加します。
box1.addChild(button1);

次の手順は、ActionScript コードを実行して Button コントロールを作成し、それを Box コンテナに追加したときに何が行われるかを示したものです。MXML でコンポーネントを作成すると、Flex 2 SDK によってそれに対応するコードが生成されます。

1. 次のコードに示すように、コンポーネントのコンストラクタを呼び出します。

   // Button コントロールを作成します。 
   var button1:Button = new Button()
   

2. 次のコードに示すように、コンポーネントのプロパティを設定します。

   // Button コントロールを設定します。
   button1.label = "Submit";
   

3. 次のコードに示すように、addChild() メソッドを呼び出してコンポーネントをその親に追加します。

   // Button コントロールを Box コンテナに追加する。
   box1.addChild(button1);
   

   Flex はこの行を処理するため、次のアクションを実行します。

   1. コンポーネントの parent プロパティがその親コンテナを参照するように設定します。
   2. コンポーネントのスタイル設定を計算します。
   3. Button コントロールから add イベントを送出します。
   4. 親コンテナから childAdd イベントを送出します。
   5. コンポーネントの preinitialize イベントを送出します。このイベントが送出されるとき、コンポーネントは未加工の状態にあります。Button コントロールなどの多くのコンポーネントは、内部子コンポーネントを作成して機能を実装します。たとえば、Button コントロールは内部 UITextField コンポーネントを作成してラベルテキストを表現します。Flex が preinitialize イベントを送出したとき、コンポーネントの子 (内部の子を含む) はまだ作成されていません。
   6. コンポーネントの子 (内部の子を含む) を作成して初期化します。
   7. コンポーネントの initialize イベントを送出します。この時点で、コンポーネントの子はすべて初期化されていますが、コンポーネントの処理は完全には終わっていません。特に、レイアウトのためのサイズ設定がまだ行われていません。
4. その後、アプリケーションを表示するために render イベントがトリガされます。このとき Flex は次のことを行います。
   1. コンポーネントのレイアウトなど、コンポーネントの表示に必要な処理をすべて完了します。
   2. visible プロパティを true に設定して、コンポーネントを可視化します。
   3. コンポーネントの creationComplete イベントを送出します。コンポーネントのサイズ設定とレイアウトに関する処理が完了し、すべてのプロパティが設定されます。このイベントはコンポーネントが作成されたときに 1 回だけ送出されます。
   4. コンポーネントの updateComplete イベントを送出します。コンポーネントの位置やサイズなどの視覚的特徴が変更され、表示が更新されるたびに、追加の updateComplete イベントが送出されます。

後で removeChild() メソッドを使用して、コンテナからコンポーネントを削除できます。削除した子の parent プロパティは null に設定されます。削除した子を別のコンテナに追加した場合、その子は最後の既知の状態を保持します。コンポーネントへの参照がなくなると、Adobe Flash Player のガベージコレクションメカニズムによって最終的にメモリから削除されます。

この一連のアクションから考えて、イベントは次のように使用するのが適切です。

• preinitialize イベントはコンポーネントライフサイクルの早い段階で発生し、ほとんどの初期化アクティビティに対応します。ただしこのイベントが役立つのは、子が作成される前に親のプロパティを設定しなければならないというまれな状況に限られます。
• 視覚的外観が Flex によって決定される前にコンポーネントを設定するには、initialize イベントを使用します。たとえば、このイベントを使用して、外観、高さ、または幅に影響を与えるプロパティを設定します。
• creationComplete イベントは、コンポーネント作成時のサイズや位置の正確な値を必要とする処理に対して使用します。このイベントを使用してコンポーネントの視覚的外観を変更する処理を行うと、レイアウトの再計算が必要となり、アプリケーションに不要な処理オーバーヘッドが追加されます。
• updateComplete イベントは、コンポーネントの作成時ではなく、コンポーネントの属性が変更されるたびに実行する処理に対して使用します。

Flex 2.01