シンプルなビジュアルコンポーネントは、既存の Flex コンポーネントのサブクラスで、スキンやスタイルを使用してコンポーネントの外観を変更したり、コンポーネントに新しい機能を追加したりします。例えば、新しいイベントタイプを Button コントロールに追加したり、DataGrid コントロールのデフォルトのスタイルやスキンを変更したりできます。詳しくは、ActionScript のシンプルなビジュアルコンポーネントを参照してください。

高度なコンポーネントでは、一般的に次の処理を行います。

• 既存のコンポーネントの視覚的外観や視覚的特徴を変更する。
• 複数のコンポーネントをカプセル化した複合コンポーネントを作成する。
• UIComponent クラスのサブクラスを作成することでコンポーネントを作成する。

通常は、コンポーネントを、既存のクラスのサブクラスとして作成します。例えば、Button コントロールに基づくコンポーネントを作成する場合は mx.controls.Button クラスのサブクラスを作成します。ユーザー独自のコンポーネントを作成するには、mx.core.UIComponent クラスのサブクラスを作成します。

保護された UIComponent メソッドのオーバーライドについて

すべての Flex ビジュアルコンポーネントは、UIComponent クラスのサブクラスです。したがって、ビジュアルコンポーネントは、UIComponent クラスで定義されたメソッド、プロパティ、イベント、スタイル、エフェクトを継承します。

高度なビジュアルコンポーネントを作成するには、クラスコンストラクタを実装する必要があります。また、UIComponent クラスについて、次の保護されたメソッドをオーバーライドすることもできます。

これらのメソッドは、コンポーネントのユーザーが直接呼び出すのではなく、コンポーネント作成の初期化プロセスの一部として、または、他のメソッドの呼び出しがあった場合に、Flex によって呼び出されます。詳しくは、コンポーネントのインスタンス化ライフサイクルについてを参照してください。

無効化メソッドについて

コンポーネントのライフタイムの期間、アプリケーションは、例えば、サイズと位置の変更、表示をコントロールするプロパティの変更、コンポーネントのスタイルやスキンのプロパティの変更などを行ってコンポーネントを変更します。例えば、コンポーネント内で表示されるテキストのフォントサイズを変更します。フォントサイズの変更の一部として、コンポーネントのサイズも変化するので、Flex でアプリケーションのレイアウトを更新する必要があります。レイアウト操作では、Flex が、コンポーネントの commitProperties()、measure()、layoutChrome() および updateDisplayList() メソッドを呼び出す必要があります。

アプリケーションは、プログラムによって、コンポーネントのフォントサイズを変更できます。この変更は、Flex がアプリケーションのレイアウトを更新するのに比べて非常に高速です。したがって、フォントサイズの値を最終的に決定してからレイアウトを更新する必要があります。

別の例を考えてみましょう。Button コントロールの label と icon プロパティなど、コンポーネントの複数のプロパティを設定する場合、すべてのプロパティを設定してから、commitProperties()、measure()、updateDisplayList() のメソッドを一度だけ実行するとします。これらのメソッドについては、label プロパティを設定するときに実行して、icon プロパティを設定するときに再度実行する必要はありません。

また、いくつかのコンポーネントは、同時にフォントサイズを変更する場合があります。各コンポーネントがフォントサイズを変更した後にアプリケーションのレイアウトを更新するのでなく、Flex にレイアウト操作を調整させて、不要な処理を省くことができます。

Flex は、無効化メカニズムを使用して、コンポーネントの変更の同期をとります。Flex は、無効化メカニズムを、一連のメソッドとして実装しています。ユーザーはこれを呼び出すことで、Flex に対して、コンポーネントが変更されて、コンポーネントの commitProperties()、measure()、layoutChrome()、updateDisplayList() のメソッドを呼び出す必要があることを通知します。

無効化メソッドについて、次の表で説明します。

コンポーネントは、無効化メソッドを呼び出すときに、コンポーネントを更新する必要があることを Flex に通知します。複数のコンポーネントが無効化メソッドを呼び出した場合は、Flex が調整を行い、次回の画面更新時に、まとめて更新が行われるようにします。

通常は、無効化メソッドは、コンポーネントのユーザーが直接呼び出すものではありません。代わりに、コンポーネントの setter メソッドや、必要に応じてコンポーネントクラスの他のメソッドが呼び出します。詳細および使用例については、commitProperties() メソッドの実装を参照してください。

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

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

次の例では、ActionScript で Button コントロールが作成され、コンテナに追加されます。

// Create a Box container.
var boxContainer:Box = new Box();
// Configure the Box container. 

// Create a Button control. 
var b:Button = new Button()
// Configure the button control.
b.label = "Submit";
...
// Add the Button control to the Box container.
boxContainer.addChild(b);

次の手順は、このコードを実行して Button コントロールを作成し、それを Box コンテナに追加したときに何が行われるかを示したものです。

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

   // Create a Button control. 
   var b:Button = new Button()
   
   

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

   // Configure the button control.
   b.label = "Submit";
   
   

   コンポーネントの setter メソッドは、invalidateProperties()、invalidateSize()、invalidateDisplayList() のいずれかのメソッドを呼び出す場合があります。

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

   // Add the Button control to the Box container.
   boxContainer.addChild(b);
   
   

   Flex によって次の処理が行われます。

4. コンポーネントの parent プロパティがその親コンテナを参照するように設定します。
5. コンポーネントのスタイル設定を計算します。
6. コンポーネントの preinitialize イベントを送出します。
7. コンポーネントの createChildren() メソッドを呼び出します。
8. invalidateProperties()、invalidateSize()、invalidateDisplayList() のメソッドを呼び出し、次回の render イベントの期間に実行する commitProperties()、measure()、updateDisplayList() のいずれかのメソッドの呼び出しをトリガします。

   唯一の例外は、ユーザーがコンポーネントの高さと幅を設定する場合で、Flex は measure() メソッドを呼び出しません。

9. コンポーネントの initialize イベントを送出します。この時点で、コンポーネントのすべての子は初期化されますが、コンポーネントのサイズ変更とレイアウト処理は実行されていません。このイベントを使用すると、コンポーネントの追加処理をレイアウト前に実行できます。
10. 親コンテナの childAdd イベントを送出します。
11. 親コンテナの initialize イベントを送出します。
12. 次回の render イベントの期間に、Flex は、次のアクションを実行します。
    1. コンポーネントの commitProperties() メソッドを呼び出します。
    2. コンポーネントの measure() メソッドを呼び出します。
    3. コンポーネントの layoutChrome() メソッドを呼び出します。
    4. コンポーネントの updateDisplayList() メソッドを呼び出します。
    5. コンポーネントの updateComplete イベントを送出します。
13. commitProperties()、measure()、updateDisplayList() のいずれかのメソッドが invalidateProperties()、invalidateSize()、invalidateDisplayList() のいずれかのメソッドを呼び出す場合、Flex は追加の render イベントを送出します。
14. 最後の render イベントの後に、Flex は、次のアクションを実行します。
    1. visible プロパティを true に設定することで、コンポーネントを可視化します。
    2. コンポーネントの creationComplete イベントを送出します。レイアウトに関するコンポーネントのサイズ変更と処理が行われます。このイベントは、コンポーネントが作成されるときにしか送出されません。
    3. コンポーネントの updateComplete イベントを送出します。Flex は、コンポーネントのレイアウト、位置、サイズなどの視覚的特徴が変更され、コンポーネントの表示が更新されるたびに、追加の updateComplete イベントを送出します。

コンポーネントの設定作業のほとんどは、addChild() メソッドを使用してコンポーネントをコンテナに追加するときに発生します。その理由は、コンポーネントをコンテナに追加するまで、Flex はサイズの決定、継承スタイルのプロパティの設定、画面上での描画ができないからです。

次の例に示すように、アプリケーションを MXML で定義することもできます。

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Box>
        <mx:Button label="Submit"/>
    </mx:Box>
</mx:Application>

コンポーネントを MXML で作成するときに Flex が実行する一連の手順は、ActionScript で説明した手順と同様です。

コンポーネントをコンテナから削除するには、removeChild() メソッドを使用します。コンポーネントに対する参照がない場合は、最終的に、Adobe® Flash® Player または Adobe® Flash® Player または Adobe® AIR™ のガベージコレクションメカニズムによってメモリから削除されます。

コンポーネント作成の手順について

コンポーネントを実装する場合、コンポーネントのメソッドのオーバーライド、新しいプロパティの定義、新しいイベントの送出、アプリケーションに必要な様々なカスタマイズなどを行います。

コンポーネントを実装する一般的な手順は、次のとおりです。

1. 必要に応じて、コンポーネントのスキンを作成します。
2. ActionScript クラスファイルを作成します。
   1. UIComponent などの基本クラスや、別のコンポーネントクラスを拡張します。
   2. MXML タグプロパティでユーザーが設定できるプロパティを指定します。
   3. グラフィックやスキンのファイルを埋め込みます。
   4. コンストラクタを実装します。
   5. UIComponent.createChildren() メソッドを実装します。
   6. UIComponent.commitProperties() メソッドを実装します。
   7. UIComponent.measure() メソッドを実装します。
   8. UIComponent.layoutChrome() メソッドを実装します。
   9. UIComponent.updateDisplayList() メソッドを実装します。
   10. プロパティ、メソッド、スタイル、イベント、メタデータを追加します。
3. コンポーネントを ActionScript ファイルか SWC ファイルとしてデプロイします。

MXML タグプロパティおよびグラフィックファイルとスキンファイルの埋め込みについて詳しくは、ActionScript のシンプルなビジュアルコンポーネントを参照してください。

新しいコンポーネントを定義するのに、すべてのコンポーネントメソッドをオーバーライドする必要はありません。コンポーネントの機能を実装するのに必要なメソッドをオーバーライドするだけでかまいません。Button コントロールや VBox コンテナなど、既存のコンポーネントのサブクラスを作成する場合は、新しい機能をコンポーネントに追加するのに必要なメソッドを実装する必要があります。

例えば、デフォルトのサイズを定義する新しいメカニズムを使用したカスタム Button コントロールを実装するとします。この場合、measure() メソッドをオーバーライドするだけでかまいません。例については、measure() メソッドの実装を参照してください。

別の例として、VBox コンテナの新しいサブクラスを実装する場合を考えてみます。新しいサブクラスは、VBox クラスの既存のサイズ変更ロジックのすべてを使用する一方、クラスのレイアウトロジックを変更して、コンテナの（上から下へではなく）下から上へ、コンテナの子をレイアウトするとします。この場合、updateDisplayList() メソッドをオーバーライドするだけでかまいません。例については、updateDisplayList() メソッドの実装を参照してください。

インターフェイスについて

Flex は、様々なインターフェイスを使用して、コンポーネントの基本機能を個々のエレメントに分割して、1 つずつ実装できるようにしています。例えば、コンポーネントをフォーカス可能にするには、IFocusable インターフェイスを実装する必要があります。また、レイアウトプロセスに利用できるようにするには、ILayoutClient インターフェイスを実装する必要があります。

インターフェイスを簡単に使用できるように、UIComponent クラスは、次の表で定義されたすべてのインターフェイスを実装しています。ただし、IFocusManagerComponent インターフェイスと IToolTipManagerClient インターフェイスは除きます。ただし、UIComponent のサブクラスの多くは、IFocusManagerComponent インターフェイスと IToolTipManagerClient インターフェイスを実装しています。

したがって、UIComponent のクラスやサブクラスについて、サブクラスを作成する場合は、これらのインターフェイスを実装する必要はありません。しかし、UIComponent のサブクラス以外のコンポーネントを作成して、そのコンポーネントを Flex で使用する場合は、これらのインターフェイスを実装することが必要になる場合があります。

Flex コンポーネントが実装する主なインターフェイスを、次の表にまとめます。