再利用可能なコンポーネントを ActionScript を使用して作成し、Flex アプリケーション内でこれらのコンポーネントを、MXML タグとして参照します。ActionScript を使用して作成されたコンポーネントは、グラフィカルエレメントの格納、カスタムビジネスロジックの定義、または既存の Flex コンポーネントの拡張を行うことができます。

Flex コンポーネントは ActionScript のクラス階層として実装されています。アプリケーションの各コンポーネントは、ActionScript クラスのインスタンスです。次の例は、この階層の一部を示したものです。

すべての Flex ビジュアルコンポーネントは、ActionScript UIComponent クラスから派生します。独自のコンポーネントを作成するには、UIComponent クラスまたはそのサブクラスから、サブクラスを作成します。

カスタムコンポーネントのスーパークラスとして使用するように選択するクラスは、目的に応じて異なります。例えば、カスタム Button コントロールが必要だとします。この場合、UIComponent クラスのサブクラスを作成して、Flex Button クラスに全機能を再現できます。カスタム Button コンポーネントをより簡単に作成できる方法として、Flex Button クラスのサブクラスを作成して、カスタムクラスに変更することもできます。

シンプルコンポーネントは、コンポーネントのビヘイビアの変更や、新しい機能の追加を行う既存の Flex コンポーネントのサブクラスです。例えば、新しいイベントタイプを Button コントロールに追加したり、DataGrid コントロールのデフォルトのスタイルやスキンを変更したりできます。

また、高度な ActionScript コンポーネントも作成できます。高度な ActionScript コンポーネントは、次の要件のいずれかに該当する場合に使用します。

• コントロールの外観や、コンテナのレイアウト機能を変更する。
• コンポーネントを複合コンポーネントにカプセル化する。
• UIComponent のサブクラスを作成し、コンポーネントを作成する。

高度な ActionScript コンポーネントの作成について詳しくは、ActionScript を使用した高度なビジュアルコンポーネントを参照してください。

例：シンプルコンポーネントの作成

シンプルコンポーネントを定義する場合、自分でコンポーネントを作成するのではなく、既存のコンポーネントのビヘイビアを変更します。ここでは、mx.controls.TextArea コンポーネントを拡張して、カスタマイズされた TextArea コントロールを作成します。このコンポーネントは、keyDown イベントのイベントリスナーを TextArea コントロールに追加します。KeyDown イベントは、ユーザーが Ctrl+Z キーを押したときに、コントロール内のすべてのテキストを削除します。

package myComponents
{
    // as/myComponents/DeleteTextArea.as
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
        
    public class DeleteTextArea extends TextArea {
        
        // Constructor
        public function DeleteTextArea() {
            // Call super().
            super();

            // Add event listener for keyDown event.
            addEventListener("keyDown", myKeyDown);     
        }       

        // Define private keyDown event handler.
        private function myKeyDown(eventObj:KeyboardEvent):void {   
            // Check to see if Ctrl-Z pressed. Keycode for Z is 90.         
            if (eventObj.ctrlKey && eventObj.keyCode == 90) 
                text = ""; 
        }
    }
}

このコンポーネントのファイル名は DeleteTextArea.as で、package ステートメントで指定されたアプリケーションの myComponents サブディレクトリにあります。package ステートメントの使用方法、およびコンポーネントのディレクトリの場所の指定方法について詳しくは、カスタム ActionScript コンポーネントを参照してください。

次の例に示すように、新しい TextArea コントロールを、アプリケーションで使用します。

<?xml version="1.0"?> 
<!-- as/MainDeleteTextArea.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
  
    <MyComp:DeleteTextArea/>
  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、まず、カスタムコンポーネントの場所を指定する MyComp 名前空間を定義します。次に、名前空間の接頭辞を使用して、コンポーネントを MXML タグとして参照します。

次の例のように、スーパークラスの継承されたプロパティを MXML で指定できます。

<?xml version="1.0"?> 
<!-- as/MainDeleteTextAreaProps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">
  
    <MyComp:DeleteTextArea wordWrap="true" text="My Message"/>
  
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Flex クラスのサブクラスを作成するときには、カスタムコンポーネントの名前を変更する必要はありません。前の例で、カスタムコンポーネントの名前を TextArea として、myComponents ディレクトリの TextArea.as ファイルに書き込めます。次の例を参考にしてください。

package myComponents
{
    import mx.controls.TextArea;
    import flash.events.KeyboardEvent;
        
    public class TextArea extends mx.controls.TextArea {
        ...
    }
}

これで、カスタム TextArea コントロールと標準の TextArea コントロールをアプリケーションで使用できます。2 つのコントロールを区別するには、次の例のように、名前空間の接頭辞を使用します。

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="myComponents.*" >
    <MyComp:TextArea/>
    <mx:TextArea/>
</mx:Application>