一般的な Flex アプリケーションでは、単一のソースコードファイル内でアプリケーション全体をコーディングすることはありません。こうした実装では、複数の開発者がプロジェクトで同時に作業するのが困難であり、デバッグが簡単ではなくなります。このため、コードの再利用も難しくなります。

Flex アプリケーションを開発する場合はそのような方法は避け、複数の MXML ファイルと ActionScript ファイルを使用します。このアーキテクチャでは、モジュールデザインおよびコードの再利用が促進されるとともに、複数の開発者が実装に寄与できます。

MXML コンポーネントは、他の MXML ファイル内から MXML タグを使用して参照する MXML ファイルです。MXML コンポーネントの主な用途の 1 つに、既存の Flex コンポーネントの機能を拡張することがあります。

例えば、Flex が提供する ComboBox コントロールは、ユーザーから住所情報を収集するフォームの一部として使用できます。ComboBox を使用すると、ユーザーが住所の州の部分を米国 50 州のリストから選択できるようにすることができます。アプリケーションにユーザーが住所を入力する複数の場所がある場合、50 州すべてについて同じ情報を持つ複数の ComboBox コントロールを作成して初期化するのは大変な作業です。

代わりに、ComboBox コントロールを含む MXML コンポーネントを作成し、その中に全 50 州を定義します。作成後は、アプリケーションに州のセレクタを追加する必要があるたびに、そのカスタム MXML コンポーネントを使用できます。

MXML コンポーネントの作成

MXML コンポーネントを使用するアプリケーションは、<mx:Application> ルートタグを含む 1 つのメイン MXML アプリケーションファイルから構成され、別の MXML ファイルおよび ActionScript ファイルに定義されている 1 つまたは複数のコンポーネントを参照します。それぞれの MXML コンポーネントは、既存の Flex コンポーネントまたは他の MXML コンポーネントを拡張します。

MXML ファイル内で MXML コンポーネントを作成すると、コンポーネントのファイル名が対応する MXML タグの名前になります。例えば、StateComboBox.mxml という名前のファイルは、タグ名 <StateComboBox> を持つコンポーネントを定義します。

MXML コンポーネントのルートタグは、Flex コンポーネントまたは別の MXML コンポーネントのいずれかのコンポーネントタグになります。ルートタグは、http://www.adobe.com/2006/mxml 名前空間を指定します。例えば、次の MXML コンポーネントは、Flex の標準の ComboBox コントロールを拡張します。

<?xml version="1.0"?>
<!-- mxml/StateComboBox.mxml -->

<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:dataProvider>
        <mx:String>AK</mx:String>
        <mx:String>AL</mx:String>
        <!-- Add all other states. -->
        </mx:dataProvider>
</mx:ComboBox>

カスタム MXML コンポーネントは、その実装の一部として別のカスタム MXML コンポーネントを参照できます。

次の例に示すように、メインアプリケーションまたはその他の MXML コンポーネントファイルは StateComboBox コンポーネントを参照します。

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

    <MyComp:StateComboBox/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、<mx:Application> タグの一部として、新しい名前空間定義 xmlns:MyComp="*" がメインアプリケーションファイルに含まれています。この名前空間定義では、MXML コンポーネントの場所を指定します。この場合は、コンポーネントがメインアプリケーションファイルと同じディレクトリ内にあること、または Adobe® LiveCycle™ Data Services ES を使用している場合は WEB-INF/flex/user-classes ディレクトリ内にあることを指定しています。

ベストプラクティスとして、コンポーネントはサブディレクトリに格納します。例えば、メインアプリケーションディレクトリのサブディレクトリである myComponents ディレクトリにこのファイルを書き込みます。名前空間について詳しくは、MXML でのアプリケーション開発を参照してください。

StateComboBox.mxml ファイルは、ルートタグとして ComboBox コントロールを指定します。そのため、カスタムコンポーネントの MXML タグ内、または <mx:Script> タグ内に指定された ActionScript 内の ComboBox コントロールのすべてのプロパティを参照できます。例えば、次のコードでは、rowCount プロパティとカスタムコントロールの close イベントのリスナーを指定します。

<?xml version="1.0"?>
<!-- mxml/MyApplicationProps.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:local="*">

    <mx:Script>
        <![CDATA[

            import flash.events.Event;

            private function handleCloseEvent(eventObj:Event):void {
                myTA.text="foo";
                
            }   
        ]]>
    </mx:Script>

    <local:StateComboBox rowCount="5" close="handleCloseEvent(event);"/>
    
    <mx:TextArea id="myTA" />
    
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ルートタグのデフォルトプロパティに対する制限

多くの Flex コンポーネントでは、1 つのデフォルトプロパティを定義します。デフォルトプロパティとは、プロパティを明示的に指定しない場合の、MXML タグの内側のコンテンツに対して暗黙的な MXML タグプロパティです。例えば、次のような MXML タグ定義があるとします。

<mx:SomeTag>
    anything here
</mx:SomeTag>

このタグで、default_propertyという名前のデフォルトプロパティを定義する場合、前に示したタグ定義は次のコードと同等です。

<mx:SomeTag>
    <default_property>
        anything here
    </default_property>
</mx:SomeTag>

しかし、デフォルトプロパティのメカニズムは、MXML コンポーネントのルートタグに対して機能しません。この場合は、次の例のように、子タグを使用してデフォルトプロパティを定義する必要があります。

<?xml version="1.0"?>
<mx:SomeTag xmlns:mx="http://www.adobe.com/2006/mxml">
    <default_property>
        anything here
    </default_property>
</<mx:SomeTag>

MXML コンポーネントおよび ActionScript クラス

カスタム MXML コンポーネントを作成する場合は、新しい ActionScript クラスを定義します。このクラス名は、MXML コンポーネントのファイル名に対応します。新しいクラスは、コンポーネントのルートタグのサブクラスです。したがって、ルートタグのすべてのプロパティとメソッドを継承します。ただし、コンポーネントは MXML 内で定義しているので、ActionScript クラスを作成する場合の多くの複雑な作業を行わずに済みます。

例えば、MXML コンポーネントの作成では、StateComboBox.mxml コンポーネントを定義し、そのルートタグとして <mx:ComboBox> タグを使用しました。したがって、StateComboBox.mxml では、ComboBox クラスのサブクラスを定義します。

複合 MXML コンポーネントの作成

複合 MXML コンポーネントは、複数のコンポーネントの定義を含むコンポーネントです。複合コンポーネントを作成するには、ルートタグとしてコンテナを指定した後、コンテナの子としてさらに Flex コンポーネントを追加します。

例えば次のコンポーネントには、コンポーネントのルートタグとして Form コンテナを指定した後、Form コンテナの子をいくつか定義することにより作成したアドレスフォームが含まれています。この <mx:FormItem> タグの 1 つには、MXML コンポーネントの作成で作成した <MyComp:StateComboBox> タグへの参照が含まれています。

<?xml version="1.0"?>
<!-- mxml/AddressForm.mxml -->

<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="*">

    <mx:FormItem label="NameField">
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="Street">
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="City" > 
        <mx:TextInput/>
    </mx:FormItem>

    <mx:FormItem label="State" > 
        <MyComp:StateComboBox/>
    </mx:FormItem>

</mx:Form>

次のアプリケーションファイルでは、<AddressForm> タグを使用して AddressForm コンポーネントを参照します。

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

    <MyComp:AddressForm/> 

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

MXML コンポーネントファイル内にルートコンテナタグの子タグが含まれる場合は、他の MXML ファイル内でカスタムタグとしてそのコンポーネントを使用するときに、子タグを追加することはできません。MXML ファイル内で空のコンテナを定義する場合は、カスタムタグとしてそのコンポーネントを使用するときに子タグを追加できます。

次の例では、MXML コンポーネントに空の Form コンテナを定義しています。

<?xml version="1.0"?>
<!-- mxml/EmptyForm.mxml -->

<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml"/>

このコンポーネントでは Form コンテナの子を定義していません。そのため、次の例に示すように別の MXML ファイル内でこのコンポーネントを使用する場合に子を追加できます。

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

    <MyComp:EmptyForm>    
        <mx:FormItem label="Name">
            <mx:TextInput/>
        </mx:FormItem>
    </MyComp:EmptyForm>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

AddressForm.mxml ファイルでは、自身のルートタグとして Form コンテナを指定しています。コンテナを MXML コンポーネントのルートタグとして定義するので、そのコンテナのサブクラスを作成していることになります。また、MXML コンポーネントの使用時には、ルートタグのすべてのプロパティとメソッドを参照できます。したがってメインアプリケーションでは、カスタムコンポーネントに対応する MXML タグ内、またはメインアプリケーション内の任意の ActionScript コード内で、Form コンテナのすべてのプロパティを参照できます。ただし、Form コンテナの子のプロパティを参照することはできません。

例えば、次の例では、カスタムコントロールの scroll イベントについて horizontalPageScrollSize プロパティとリスナーを設定しています。ただし、Form コンテナの子 CheckBox コントロールまたは TextInput コントロールのプロパティを指定することはできません。

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

    <mx:Script>
        <![CDATA[
            import mx.events.ScrollEvent;

            private function handleScrollEvent(event:ScrollEvent):void {
                // Handle scroll event.
            }   
        ]]>
    </mx:Script>

    <MyComp:AddressForm horizontalPageScrollSize="25" scroll="handleScrollEvent(event);"/>

</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

カスタム MXML コンポーネントの子を設定するには、MXML コンポーネント内で新しいプロパティを定義した後、その新しいプロパティを使用して構成情報をコンポーネントの子に渡します。詳しくは、高度な MXML コンポーネントを参照してください。