カスタムコンポーネントを定義することには、いくつかのメリットがあります。メリットの 1 つは、コンポーネントを使用することでアプリケーションをモジュールに分割し、モジュール単位で開発および保守できることです。よく使用するロジックをカスタムコンポーネントに実装することで、複数の Flex アプリケーションで共有できる、再利用可能なコンポーネントのセットも構築できます。

また、Flex クラス階層を拡張することで、定義済みの Flex コンポーネントのセットに基づくカスタムコンポーネントを作成できます。Flex ビジュアルコントロールのカスタムバージョンや、バリデータ、フォーマッタ、およびエフェクトなどの非ビジュアルコンポーネントのカスタムバージョンを作成できます。

MXML コードとサポートする ActionScript コードを含む単一の MXML ファイルで、Flex アプリケーション全体を構築できます。単一のファイルの場合、アプリケーションが拡大するにつれファイルのサイズも大きくなり、複雑さも増します。このタイプのアプリケーションは、理解してデバッグするのがすぐに困難になります。また、複数の開発者が同時に作業するのもかなり困難です。

アプリケーション開発でのモジュールの使用

一般的なコーディング方法として、アプリケーションを機能単位、つまりモジュールに分割し、各モジュールが個別のタスクを実行するようにします。アプリケーションをモジュールに分割することには、次に示すように多くのメリットがあります。

開発の容易さ 

複数の異なる開発者または開発グループが個別にモジュールを開発およびデバッグできます。

再利用性 

異なるアプリケーションでモジュールを再利用できるので、作業を重複して行わずに済みます。

保守性 

個別のモジュールから成るアプリケーションを開発することで、アプリケーションを単一のファイルで開発した場合よりも迅速にエラーを隔離しデバッグできます。

Flex では、モジュールは、MXML または ActionScript のどちらかに実装されるカスタムコンポーネントに相当します。次のイメージは、コンポーネントに分割された Flex アプリケーションの例を示しています。

この例は、コンポーネント間の次の関係を示しています。

• <mx:Application> タグを含むメインの MXML ファイルを定義します。
• メインの MXML ファイル内で、<mx:Script> タグを使用する ActionScript ブロックを定義します。ActionScript ブロック内には、ActionScript コードを記述するか、ActionScript ファイルによって定義された外部ロジックをインクルードします。通常は、この領域には少量の ActionScript コードしか記述しません。大量の ActionScript コードを記述する場合は、外部ファイルをインクルードする必要があります。
• メインの MXML ファイルでは、MXML および ActionScript を使用して、Flex が提供するコンポーネントやカスタムコンポーネントを参照します。
• カスタムコンポーネントは、他のカスタムコンポーネントを参照できます。

Flex のクラス階層

Flex は ActionScript クラス階層として実装されています。クラス階層には、コンポーネントクラス、マネージャクラス、データサービスクラス、およびその他の Flex 機能に関するクラスが含まれます。次の例は、コントロールやコンテナなどの Flex ビジュアルコンポーネントのクラス階層の一部を示しています。

すべてのビジュアルコンポーネントは、ActionScript クラスの UIComponent から派生したものです。Flex 非ビジュアルコンポーネントも、ActionScript 内にクラス階層として実装されます。最も頻繁に使用される非ビジュアルクラスは、Validator、Formatter、および Effect 基本クラスです。

カスタムコンポーネントは、MXML および ActionScript 言語を使用して Flex クラス階層を拡張することで作成します。コンポーネントは、それらのスーパークラスのプロパティ、メソッド、イベント、スタイルおよびエフェクトを継承します。

既存の Flex コンポーネントのカスタマイズ

コンポーネントを作成する理由の 1 つは、アプリケーションの要件に応じて既存の Flex コンポーネントをカスタマイズするためです。このカスタマイズは非常に簡単で、例えば、Button コントロールの label プロパティを Submit に設定するだけですべてのフォームに対応するカスタムボタンを作成することができます。

また、Flex コンポーネントのビヘイビアを変更することもできます。例えば、VBox コンテナでは、コンテナ内で子が定義された順序で、コンテナの上から下へ順番に子をレイアウトします。代わりに、VBox コンテナが下から上へ子をレイアウトするようにカスタマイズすることもできます。

Flex コンポーネントをカスタマイズするもう 1 つの理由は、ロジックまたはビヘイビアを追加するためです。例えば、TextInput コントロールを変更して、コントロールに入力されたテキストをすべて削除するキーの組み合わせをサポートすることができます。また、ユーザーの操作に応じて新しいイベントタイプを送出するようにコンポーネントを変更することもできます。

独自のコンポーネントを作成するには、UIComponent クラスからサブクラスを作成するか、Flex コンポーネント階層にその他のクラスを作成します。例えば、Button コンポーネントとほぼ同様に動作するコンポーネントを作成する場合、Button クラスを継承すれば、Button クラスに相当するすべての機能を基本クラスから再作成する必要はありません。

変更内容に応じて、MXML または ActionScript で Flex コンポーネントのサブクラスを作成できます。

MXML コンポーネントと ActionScript コンポーネントの関係

ActionScript でカスタムコンポーネントを作成するには、Flex クラス階層内のクラスからサブクラスを作成します。クラスの名前（例えば、MyASButton）は ActionScript ファイルの名前（この例では、MyASButton.as）に対応している必要があります。サブクラスは、スーパークラスのプロパティとメソッドをすべて継承します。この例では、<MyASButton> タグを使用して、MXML 内を参照します。

MXML でカスタムコンポーネントを作成すると、Flex コンパイラでは自動的に新しい ActionScript クラスが作成されます。MXML ファイルの名前（例えば、MyMXMLButton.mxml）は、ActionScript クラスの名前に対応しています。この例では、ActionScript クラスの名前は MyMXMLButton で、<MyMXMLButton> タグを使用して MXML 内でそのクラスを参照します。

次の例は、Flex Button コンポーネントに基づく 2 つのコンポーネントを示しています。1 つは ActionScript で定義され、もう 1 つは MXML で定義されます。

いずれの実装も、新しいコンポーネントを Button クラスのサブクラスとして作成するため、Button クラスのパブリックプロパティおよびプロテクトプロパティ、メソッド、その他のエレメントのすべてを継承します。各実装内で、継承したアイテムのオーバーライド、新しいアイテムの定義、カスタムロジックの追加を実行できます。

ただし、MXML を使用する場合、コンポーネントのサブクラスを作成するために必要なオーバーヘッドの大半が、Flex コンパイラにより実行されます。このため、MXML でコンポーネントを作成する方が、ActionScript で作成するより簡単です。

MXML または ActionScript のどちらでコンポーネントを作成するかの決定

カスタムコンポーネントを作成するときに最初に決定する必要がある事項の 1 つは、MXML または ActionScript のどちらで記述するかという点です。最終的にカスタムコンポーネントの開発方法を決定するのは、アプリケーションの要件です。

次に、基本的なガイドラインを示します。

• MXML コンポーネントと ActionScript コンポーネントは、どちらも新しい ActionScript クラスを定義します。
• カスタム ActionScript コンポーネントで実行できるほとんどのことは、カスタム MXML コンポーネントでも実行できます。ただし、既存のコンポーネントのビヘイビアを変更したり、基本機能を既存のコンポーネントに追加したりする単純なコンポーネントの場合は、MXML で作成した方が早くて簡単です。
• 新しいコンポーネントが他のコンポーネントを含む複合コンポーネントで、Flex レイアウトコンテナのいずれかを使用して他のコンポーネントの位置とサイズを表現できる場合は、MXML を使用してコンポーネントを定義します。
• コンテナが子をレイアウトする方法など、コンポーネントのビヘイビアを変更する場合は、ActionScript を使用します。
• UIComponent のサブクラスを作成して、ビジュアルコンポーネントを作成する場合は、ActionScript を使用します。
• フォーマッタ、バリデータ、エフェクトなどの非ビジュアルコンポーネントを作成する場合は、ActionScript を使用します。
• コントロールにログのサポートを追加する場合は、ActionScript を使用します。詳しくは、ログ機能を参照してください。

カスタム MXML コンポーネントについて詳しくは、シンプルな XML コンポーネントを参照してください。ActionScript コンポーネントについて詳しくは、ActionScript のシンプルなビジュアルコンポーネントを参照してください。

新しいコンポーネントの作成

アプリケーションによっては、既存のコンポーネントを変更する代わりに、コンポーネントを作成する必要があります。コンポーネントを作成するには、通常、UIComponent クラスのサブクラスを作成し、ActionScript でコンポーネントを作成します。このクラスには、すべての Flex コンポーネントの汎用的な機能が含まれます。その後、アプリケーション要件を満たすために必要な機能を新しいコンポーネントに追加します。

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