MXML での開発は、HTML、JSP（JavaServer Pages）、ASP（Active Server Pages）、CFML（ColdFusion Markup Language）といった他の Web アプリケーションファイルと同様、反復的なプロセスに基づきます。Flex アプリケーションの開発は、任意のテキストエディタを開いて、XML タグを入力し、ファイルを保存して、そのファイルの URL を Web ブラウザで開くという作業の繰り返しです。

Flex には、コードのデバッグを行うツールも用意されています。詳細については、『Adobe Flex 3 アプリケーションの構築とデプロイ』の1299ページの"コマンドラインデバッガの使用"

コンテナを使用したユーザーインターフェイスのレイアウト

Flex のモデルビューデザインパターンでは、ユーザーインターフェイスコンポーネントがビューを表します。MXML 言語は、コントロールとコンテナの 2 種類のユーザインタフェースコンポーネントをサポートしています。コントロールとは、ボタンやテキストフィールド、リストボックスなどのフォームエレメントです。コンテナとは、コントロールや他のコンテナを収めるための、画面上の矩形の領域です。

コンテナコンポーネントは、ユーザーインターフェイスのレイアウトと、アプリケーションを通じたユーザーナビゲーションの制御に使用します。レイアウトコンテナの例には、子コンポーネントを水平にレイアウトするための HBox コンテナ、子コンポーネントを垂直にレイアウトするための VBox コンテナ、子コンポーネントを行と列にレイアウトするための Grid コンテナなどがあります。ナビゲータコンテナの例には、タブ付きパネルを作成するための TabNavigator コンテナ、折りたたみ可能なパネルを作成するための Accordion ナビゲータコンテナ、パネルを重ねてレイアウトするための ViewStack ナビゲータコンテナなどがあります。

Container クラスは、すべての Flex コンテナクラスの基本クラスです。Container クラスを拡張したコンテナには、子コンポーネントをレイアウトするための独自の機能が追加されています。コンテナタグの一般的なプロパティには、id、width、height などがあります。標準の Flex コンテナの詳細については、「コンテナについて」（422 ページ）を参照してください。

次の図は、ユーザーインターフェイスの左側に List コントロール、右側に TabNavigator コンテナを含む Flex アプリケーションを示します。どちらのコントロールも Panel コンテナの中にあります。

このアプリケーションを実装するコードを次に示します。

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

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">

        <mx:HBox>
            <!-- List with three items -->
            <mx:List>
                <mx:dataProvider>
                    <mx:Array>
                        <mx:String>Item 1</mx:String>
                        <mx:String>Item 2</mx:String>
                        <mx:String>Item 3</mx:String>
                    </mx:Array>
                </mx:dataProvider>
            </mx:List>

            <!-- First pane of TabNavigator -->
            <mx:TabNavigator borderStyle="solid">
                <mx:VBox label="Pane1" width="300" height="150">
                    <mx:TextArea text="Hello World"/>
                    <mx:Button label="Submit"/>
                </mx:VBox>

                <!-- Second pane of TabNavigator -->
                <mx:VBox label="Pane2" width="300" height="150">
                    <!-- Stock view goes here -->
                </mx:VBox>

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

List コントロールと TabNavigator コンテナは HBox コンテナ内に含まれているので、水平方向にレイアウトされます。TabNavigator コンテナ内のコントロールは VBox コンテナ内に含まれているので、垂直方向にレイアウトされます。

ユーザーインターフェイスコンポーネントのレイアウトの詳細については、「Flex ビジュアルコンポーネントの使用」（181 ページ）を参照してください。

ユーザーインターフェイスコントロールの追加

Flex には、Button コントロール、TextInput コントロール、ComboBox コントロールなど、さまざまなユーザーインターフェイスコンポーネントが用意されています。コンテナを使用してアプリケーションのレイアウトとナビゲーションを定義したら、次にユーザーインターフェイスコントロールを追加します。

次の例では HBox（Horizontal Box）コンテナを使用し、その中に子コントロールとして TextInput コントロールと Button コントロールを配置しています。HBox コンテナの子は水平方向にレイアウトされます。

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

    <mx:Script>
        <![CDATA[
            private function storeZipInDatabase(s:String):void {
                // event handler code here
            }
        ]]>
    </mx:Script>

    <mx:HBox>
        <mx:TextInput id="myText"/>
        <mx:Button click="storeZipInDatabase(myText.text)"/>
    </mx:HBox>

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

コントロールタグの一般的なプロパティには、id、width、height、fontSize、color などのプロパティ、click や change などのイベントのイベントリスナー、 showEffect や rollOverEffect などのエフェクトトリガがあります。標準の Flex のコントロールの詳細については、「コントロール」（266 ページ）を参照してください。

MXML タグの id プロパティの使用

いくつかの例外を除き（「MXML タグの規則」（124 ページ）を参照)、MXML タグはオプションの id プロパティを持っています。このプロパティは、MXML ファイル内で一意にする必要があります。タグが id プロパティを持つ場合は、ActionScript で対応するオブジェクトを参照できます。

次の例では、Web サービス要求の結果が writeToLog 関数によりトレースされます。

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

    <mx:VBox>
        <mx:TextInput id="myText" text="Hello World!" />
        <mx:Button id="mybutton" label="Get Weather" click="writeToLog();"/>
    </mx:VBox>
    <mx:Script>
        <![CDATA[
            private function writeToLog():void             {
                trace(myText.text);
            }
        ]]>
    </mx:Script>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このコードをコンパイルすると、myText という名前のパブリック変数が自動生成され、その中に TextInput インスタンスへの参照が格納されます。この自動生成された変数を ActionScript で使用することにより、コンポーネントのインスタンスにアクセスできます。つまり、任意の ActionScript クラスまたはスクリプトブロックの中で TextInput コントロールの id インスタンス参照を使用して、TextInput コントロールのインスタンスを明示的に参照することが可能です。コンポーネントのインスタンスを参照することで、プロパティを変更したり、メソッドを呼び出したりすることができます。

MXML ファイル内のそれぞれの id 値は一意なので、ファイル内のすべてのオブジェクトは同じフラットな名前空間に属します。myVBox.myText.text. のようなドット表記で親を参照してオブジェクトを修飾する必要はありません。

詳細については、「Flex コンポーネントの参照」（129 ページ）を参照してください。

XML 名前空間の使用

XML ドキュメント内では、タグは名前空間に関連付けられます。XML 名前空間を使用すると、同じ XML ドキュメント内の XML タグの複数のセットを参照できます。MXML タグの xmlns プロパティは、XML 名前空間を指定します。デフォルトの名前空間を使用するには、接頭辞を省略します。追加のタグを使用するには、タグ接頭辞と名前空間を指定します。

例えば、次の <mx:Application> タグ内の xmlns プロパティは、MXML 名前空間内のタグに対して接頭辞「mx:」を使用することを指定します。この MXML 名前空間の URI（Universal Resource Identifier）は http://www.adobe.com/2006/mxml です。

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

XML 名前空間では、MXML 名前空間に含まれていないカスタムタグを使用することができます。次に、CustomBox という名前のカスタムタグを含むアプリケーションの例を示します。名前空間値 containers.boxes.* は、CustomBox という名前の MXML コンポーネントが containers/boxes ディレクトリ内にあることを示します。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">

        <MyComps:CustomBox/>

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

containers/boxes ディレクトリは、アプリケーションファイルを格納するディレクトリのサブディレクトリであっても、flex-config.xml ファイル内で定義される ActionScript ソースパスディレクトリのサブディレクトリであってもかまいません。同じファイルのコピーが両方の場所に存在する場合、アプリケーションファイルディレクトリ内のファイルが使用されます。接頭辞名は任意ですが、宣言どおりに使用する必要があります。

SWC ファイルに含まれているコンポーネントを使用する場合は、SWC ファイルがそれを使用する MXML ファイルと同じディレクトリ内にある場合でも、パッケージ名と名前空間が一致する必要があります。SWC ファイルは、Flex コンポーネントのアーカイブファイルです。SWC ファイルを使用することで、Flex 開発者は互いに効率よくコンポーネントをやり取りできます。交換するのは 1 つのファイルだけで、MXML ファイルや ActionScript ファイルおよびイメージをその他のリソースファイルとともに送信する必要はありません。また、SWF ファイルが SWC ファイル内にコンパイルされているため、コードを不用意に露出するのを避けることができます。SWC ファイルの詳細については、『Adobe Flex 3 アプリケーションの構築とデプロイ』の1215ページの"Flex コンパイラの使用"

MXML を使用したランタイムコードのトリガ

Flex アプリケーションは、ユーザーが Button コントロールをクリックしたときなどのランタイムイベントによって駆動されます。ランタイムイベントを処理するためのコードから構成されるイベントリスナーを、MXML タグのイベントプロパティに指定できます。例えば、<mx:Button> タグには click イベントプロパティがあり、実行時に Button コントロールがクリックされたときに実行される ActionScript コードをここに指定できます。イベントリスナーのコードが単純であれば、イベントプロパティに直接指定できます。複雑なコードを使用するには、<mx:Script> タグ内に定義した ActionScript 関数の名前を指定します。

次の例は、Button コントロールと TextArea コントロールを 1 つずつ含むアプリケーションです。Button コントロールの click プロパティには、TextArea コントロールの text プロパティの値を Hello World というテキストに設定する単純なイベントリスナーが指定されています。

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

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10">

        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="textarea1.text='Hello World';"/>

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

次の図は、Web ブラウザウィンドウに表示されたアプリケーションです。

[

次の例は、<mx:Script> タグ内の ActionScript 関数でイベントリスナーを指定したアプリケーションのコードです。

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

    <mx:Script>
        <![CDATA[
            private function hello():void {
                textarea1.text="Hello World";
            }
        ]]>
    </mx:Script>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <mx:TextArea id="textarea1"/>
        <mx:Button label="Submit" click="hello();"/>

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

MXML による ActionScript の使用の詳細については、「ActionScript の使用」（125 ページ）を参照してください。

コンポーネント間でのデータのバインディング

Flex で異なるコンポーネントのプロパティを互いにバインディングするためのシンタックスは単純です。次の例のように、中かっこ（{ }）内に値を指定すると、TextArea コントロールの text プロパティを TextInput コントロールの text プロパティにバインドできます。アプリケーションが初期化されると、両方のコントロールに Hello というテキストが表示されます。ユーザーが Button コントロールをクリックすると、両方のコントロールに Goodbye というテキストが表示されます。

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

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <mx:TextInput id="textinput1" text="Hello"/>
        <mx:TextArea id="textarea1" text="{textinput1.text}"/>
        <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>

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

次の図は、ユーザーが「Submit」ボタンをクリックした後に Web ブラウザウィンドウに表示されたアプリケーションです。

中かっこ（{ }）を使用したシンタックスの代わりに、<mx:Binding> タグを使用することもできます。この場合は、タグ内にバインド元とバインド先を指定します。データバインディングの詳細については、「データの格納」（1080 ページ）を参照してください。

RPC サービスの使用

リモートプロシージャコール（RPC）サービスを使用すると、アプリケーションがリモートサーバーとやり取りしてデータの提供を受けたり、アプリケーションからサーバーにデータを送信できます。

Flex は、ローカルおよびリモートのサーバーサイドロジックへのアクセスを提供する各種 RPC サービスとやり取りするように設計されています。例えば、Flex アプリケーションは、SOAP（Simple Object Access Protocol）を使用する Web サービス、Flex と同じアプリケーションサーバー上にある Java オブジェクト（AMF を使用）、または XML を返す HTTP URL に接続できます。

データアクセスを提供する MXML コンポーネントを RPC コンポーネントと呼びます。MXML には、次の種類の RPC コンポーネントがあります。

• WebService は、SOAP ベースの Web サービスへのアクセスを提供します。
• HTTPService は、データを返す HTTP URL へのアクセスを提供します。
• RemoteObject は、AMF プロトコルを使用して Java オブジェクトへのアクセスを提供します（Adobe LiveCycle Data Services ESのみ）。

次の図は、気象情報を提供する Web サービスを呼び出して、特定の ZIP コードに対応する地域の現在の気温を表示するアプリケーションです。このアプリケーションは、ユーザーが TextInput コントロールに入力した ZIP コードを Web サービスの入力パラメータにバインドします。さらに、Web サービスの結果に含まれる現在の温度値を TextArea コントロールにバインドします。

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

    <!-- Define the web service connection
        (the specified WSDL URL is not functional). -->
    <mx:WebService id="WeatherService"         
        wsdl="http:/example.com/ws/WeatherService?wsdl" 
        useProxy="false">

        <!-- Bind the value of the ZIP code entered in the TextInput control
            to the ZipCode parameter of the GetWeather operation. -->
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zip.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    
    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Provide a ZIP code in a TextInput control. -->
        <mx:TextInput id="zip" width="200" text="Zipcode please?"/>

        <!-- Call the web service operation with a Button click. -->
        <mx:Button width="60" label="Get Weather"
            click="WeatherService.GetWeather.send();"/>

        <!-- Display the location for the specified ZIP code. -->
        <mx:Label text="Location:"/>
        <mx:TextArea text="{WeatherService.GetWeather.lastResult.Location}"/>

        <!-- Display the current temperature for the specified ZIP code. -->
        <mx:Label text="Temperature:"/>
        <mx:TextArea
            text="{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
    </mx:Panel>
</mx:Application>

次の図は、Web ブラウザウィンドウに表示されたアプリケーションです。

RPC サービスの使用の詳細については、「Flex によるサーバーサイドデータへのアクセス」（1009 ページ）を参照してください。

データモデルへのデータの格納

データモデルを使用すると、アプリケーション固有のデータを格納できます。「データモデル」はデータを格納するためのプロパティを提供する ActionScript オブジェクトで、必要に応じて追加機能を実行するメソッドを含めることもできます。データモデルを使用して、Flex アプリケーションからサーバーへ送信される前のデータを格納したり、サーバーから送られてきたデータをアプリケーションで使用されるまで格納したりします。

メソッドを必要としない単純なデータモデルは、<mx:Model> タグ、<mx:XML> タグ、または <mx:XMLList> タグ内に宣言できます。次の例は、連絡先情報を入力するための TextInput コントロールと、<mx:Model> タグで表される、連絡先情報を格納するためのデータモデルを含むアプリケーションです。

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

    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

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

データの検証

バリデータコンポーネントを使用すると、データモデルまたは Flex ユーザーインターフェイスコンポーネントに格納されているデータを検証できます。Flex には標準バリデータコンポーネントのセットが用意されています。また、自分で作成することもできます。

次の例では、バリデータコンポーネントを使用して、TextInput フィールドに目的のデータ型が入力されたかどうかを検証しています。検証は、ユーザーが TextInput コントロールを編集すると自動的にトリガされます。検証が失敗した場合、ユーザーは即座に視覚的なフィードバックを受け取ります。

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

    <!-- A data model called "contact" stores contact information.
        The text property of each TextInput control shown above
        is passed to a field of the data model. -->
    <mx:Model id="contact">
        <info>
            <homePhone>{homePhoneInput.text}</homePhone>
            <cellPhone>{cellPhoneInput.text}</cellPhone>
            <email>{emailInput.text}</email>
        </info>
    </mx:Model>

    <!-- Validator components validate data entered into the TextInput controls. -->
    <mx:PhoneNumberValidator id="pnV" 
        source="{homePhoneInput}" property="text"/>
    <mx:PhoneNumberValidator id="pnV2" 
        source="{cellPhoneInput}" property="text"/>
    <mx:EmailValidator id="emV" source="{emailInput}" property="text" />

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >
        <!-- The user enters contact information in TextInput controls. -->
        <mx:TextInput id="homePhoneInput"
            text="This isn't a valid phone number."/>
        <mx:TextInput id="cellPhoneInput" text="(999)999-999"/>
        <mx:TextInput id="emailInput" text="me@somewhere.net"/>
    </mx:Panel>

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

次の図は、Web ブラウザウィンドウに表示されたアプリケーションです。

データモデルの使用の詳細については、「データの格納」（1080 ページ）を参照してください。バリデータの詳細については、「データ検証」（1087 ページ）を参照してください。

データのフォーマット

フォーマッタコンポーネントは、生のデータを一方向に変換してフォーマットされたストリングを生成する ActionScript コンポーネントです。フォーマッタコンポーネントは、データがテキストフィールドに表示される直前にトリガされます。Flex には標準フォーマッタのセットが用意されています。さらに、自分でフォーマッタを作成することもできます。次の例は、標準の ZipCodeFormatter コンポーネントを使用して変数の値をフォーマットするアプリケーションを示しています。

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

    <!-- Declare a ZipCodeFormatter and define parameters. -->
    <mx:ZipCodeFormatter id="ZipCodeDisplay" formatString="#####-####" />

    <mx:Script>
        <![CDATA[
            [Bindable]
            private var storedZipCode:Number=123456789;
        ]]>
    </mx:Script>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Trigger the formatter while populating a string with data. -->
        <mx:TextInput text="{ZipCodeDisplay.format(storedZipCode)}" /> 

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

次の図は、Web ブラウザウィンドウに表示されたアプリケーションを示しています。

フォーマッタコンポーネントの詳細については、「データのフォーマット」（1117 ページ）を参照してください。

CSS（カスケーディングスタイルシート）の使用

CSS 標準に基づくスタイルシートを使用して、Flex コンポーネントにスタイルを宣言できます。MXML の <mx:Style> タグに、インラインスタイル定義か、またはスタイル定義が格納されている外部ファイルへの参照を記述します。

<mx:Style> タグは、MXML ファイルのルートタグの直接の子でなければなりません。スタイルは、クラスセレクタを使用して個々のコンポーネントに適用したり、タイプセレクタを使用して特定のタイプのすべてのコンポーネントに適用することができます。

次の例では、<mx:Style> タグ内でクラスセレクタとタイプセレクタを定義しています。クラスセレクタとタイプセレクタの両方が Button コントロールに適用されます。

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

    <mx:Style>
        .myClass { color: Red } /* class selector */
        Button { font-size: 18pt} /* type selector */
    </mx:Style>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <mx:Button styleName="myClass" label="This is red 18 point text."/>

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

スタイル定義の中でピリオドに続けて指定された部分は「クラスセレクタ」 と呼ばれ、新たに指定するスタイルを定義します。上の例では myClass がこれに相当します。定義したスタイルは、styleName プロパティを使ってあらゆるコンポーネントに適用できます。上の例では、このスタイルを Button コントロールに適用してフォントの色を赤に設定しています。

タイプセレクタは、特定のコンポーネントタイプのすべてのインスタンスにスタイルを適用します。上の例では、すべての Button コントロールのフォントサイズを 18 ポイントに設定します。

次の図は、Web ブラウザウィンドウに表示されたアプリケーションです。

カスケーディングスタイルシートの使用の詳細については、「スタイルとテーマの使用」（557 ページ）を参照してください。

スキンの使用

「スキニング」とは、コンポーネントのビジュアルエレメントを修正または置換することで外観を変更する処理です。これらのエレメントを構成するのは、ビットマップイメージ、SWF ファイルまたは描画メソッドを含むベクターイメージを定義するクラスファイルなどです。スキンでは、様々な状態のコンポーネント全体またはその一部を定義できます。スキンの使用の詳細については、「スキンの作成」（637 ページ）を参照してください。

エフェクトの使用

「エフェクト」とは、短い時間内にコンポーネントに変化を与えることを指します。エフェクトの例としては、コンポーネントのフェーディング、サイズ変更、移動などがあります。コンポーネント上でマウスがクリックされる、コンポーネントがフォーカスを受け取る、コンポーネントが可視状態になる、などの「トリガ」とエフェクトを組み合わせることで、「ビヘイビア」が発生します。MXML では、コントロールまたはコンテナのプロパティとしてエフェクトを適用します。Flex には、デフォルトのプロパティを持つビルトインエフェクトのセットが用意されています。

次のサンプルアプリケーションに含まれる Button コントロールでは、rollOverEffect プロパティに WipeLeft エフェクトが設定されており、ユーザーが Button コントロール上にマウスを移動すると WipeLeft エフェクトが発生します。

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

    <!-- Define the effect. -->
    <mx:WipeLeft id="myWL" duration="1000"/>

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <!-- Assign effect to targets. -->
        <mx:Button id="myButton" rollOverEffect="{myWL}"/>
    </mx:Panel>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

エフェクトの詳細については、「ビヘイビアの使用」（522 ページ）を参照してください。

カスタム MXML コンポーネントの定義

カスタム MXML コンポーネントは、他の MXML ファイルの中でカスタム MXML タグとして使用するためにユーザーが作成する MXML ファイルです。MXML コンポーネントは、既存の Flex コンポーネントの機能をカプセル化および拡張します。MXML アプリケーションファイルと同様に、MXML コンポーネントファイルには、MXML タグと ActionScript コードの組み合わせを記述できます。MXML ファイルの名前がクラス名となり、この名前を他の MXML ファイル内で使用してコンポーネントを参照します。

次の例は、リストアイテムが事前設定されたカスタム ComboBox コントロールです。

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

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:ComboBox >
        <mx:dataProvider>
            <mx:String>Dogs</mx:String>
              <mx:String>Cats</mx:String>
            <mx:String>Mice</mx:String>
        </mx:dataProvider>
    </mx:ComboBox>
   
</mx:VBox>

次の例は、MyComboBox コンポーネントをカスタムタグとして使用するアプリケーションです。containers.boxes.* 値は、MyComps 名前空間を containers/boxes サブディレクトリに割り当てます。この例を実行するには、MyComboBox.mxml ファイルをそのサブディレクトリ内に保存してください。

<?xml version="1.0"?>
<!-- MyApplication.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComps="containers.boxes.*">

    <mx:Panel title="My Application" paddingTop="10" paddingBottom="10"
        paddingLeft="10" paddingRight="10" >

        <MyComps:MyComboBox/>

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

次の図は、Web ブラウザウィンドウに表示されたアプリケーションを示しています。

MXML コンポーネントの詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』の1412ページの"シンプルな XML コンポーネント"

カスタム Flex コンポーネントを ActionScript で定義することもできます。詳細については、『Adobe Flex 3 コンポーネントの作成と拡張』の1441ページの"ActionScript のシンプルなビジュアルコンポーネント"