Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > Flex ビジュアルコンポーネントの使用 > UIComponent クラスの使用 > MXML および ActionScript でのコンポーネントの使用

MXML および ActionScript でのコンポーネントの使用

すべての Flex コンポーネントには、MXML API および ActionScript API が実装されています。コンポーネントの MXML タグの属性は、ActionScript のプロパティ、スタイル、ビヘイビア、およびイベントに相当します。コンポーネントに対する操作は、MXML と ActionScript のどちらを使用しても可能です。

コンポーネントを設定するには :

コンポーネントのプロパティ、イベント、スタイル、ビヘイビアなどの値を MXML タグを使って宣言形式で設定するか、ActionScript コードから実行時に設定します。
コンポーネントのメソッドは ActionScript コードから実行時に呼び出します。MXML API では ActionScript クラスのメソッドは公開されていません。

次のコードは、MXML で Button コントロールを作成する例です。Button コントロールをクリックすると、ActionScript の関数により TextArea コントロールのテキストが更新されます。

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

    <mx:Script>
        <![CDATA[
            public function handleClick():void {
                text1.text="Thanks for the click!";
            }
        ]]>
    </mx:Script>

    <mx:Button id="button1" 
        label="Click here!" 
        width="100" 
        fontSize="12"
        click="handleClick();"/>
    <mx:TextArea id="text1"/>
</mx:Application>

この例には次のエレメントがあります。

id プロパティは、Button コントロールによって UIComponent クラスから継承されます。これはコンポーネントの識別子を指定するために使用します。このプロパティは省略可能ですが、ActionScript でコンポーネントにアクセスする場合は指定する必要があります。
label プロパティは、Button コントロールによって定義されています。ボタンに表示するテキストを指定します。
width プロパティは、UIComponent クラスから継承されます。省略可能で、ボタンの幅をピクセル単位で指定します。
Button コントロールは、ユーザーがマウスのメインボタンを押して離したときに click イベントを送出します。MXML の click 属性は、click イベントに応答して ActionScript コードを実行することを指定します。
fontSize スタイルは、UIComponent クラスから継承されます。ラベルテキストのフォントサイズをピクセル単位で指定します。

click イベント属性では、パラメータに関数を渡す代わりに、ActionScript のコードを直接指定することもできます。したがって、前述のコードは次のように書き換えることができます。

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

    <mx:Button id="button1" 
        label="Click here!" 
        width="100"
        fontSize="12"
        click="text1.text='Thanks for the click!';"/>

    <mx:TextArea id="text1"/>
</mx:Application>

これらの例はどちらも、ボタンをクリックすると次のイメージが表示されます。

コンポーネントのクラス階層

メモ

click イベント属性の値には、複数行の ActionScript コードをセミコロンで区切って指定できますが、読みやすくするために click イベントを 1 ～ 2 行以内に収めることをお勧めします。

サブトピック

実行時のコンポーネントの初期化

コンポーネントは MXML プロパティ属性を使用して初期化されます。ただし、実行時に初期値が決まるようなロジックが必要になる場合もあります。たとえば、現在の日時に基づいてコンポーネントを初期化するような場合がこれに該当します。このような情報は、アプリケーションが実行された時点で計算する必要があります。

コンポーネントは、ライフサイクルの間にいくつかのイベントを送出します。特に、コンポーネントは次のイベントを必ず送出します。そのため、これらのイベントを使用して、コンポーネントを初期化する ActionScript を指定できます。

preInitialize コンポーネントが未加工の状態で作成されたときに送出されます。このとき、子はまだ作成されていません。

initialize コンポーネントとそのすべての子が作成された後、コンポーネントのサイズが決定される前に送出されます。

creationComplete コンポーネントのレイアウトが完了し、必要に応じてコンポーネントが表示されたときに送出されます。

メモ

コンポーネントの作成方法の詳細については、コンポーネントのインスタンス化ライフサイクルについてを参照してください。

initialize イベントではほとんどのコンポーネント属性を設定できますが、その中でも特にコンポーネントのサイズに影響を与える値を設定します。creationComplete イベントは、初期化コードでコンポーネントのレイアウトに関する情報が必要となる場合に使用します。

次の例では、Label コントロールの初期化時に initDate() 関数を呼び出すように設定しています。Label コントロールのインスタンス化が完了した後、アプリケーションが表示される前に、initDate() 関数が呼び出されます。

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

    <mx:Script>
        <![CDATA[
            private function initDate():void {
                label1.text += new Date();
            }
        ]]> 
    </mx:Script>

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date: "
            initialize="initDate();"/>
    </mx:Box>
</mx:Application>

この例では、次のイメージが作成されます。

実行時のコンポーネントの初期化

また、コンポーネントの定義に直接 ActionScript コードを記述することで、関数呼び出しを使わずに上のコード例を表現することもできます。明示的な関数呼び出しを使わずに記述すると、次のようになります。

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

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date:" 
            initialize="label1.text += new Date();"/>
    </mx:Box>
</mx:Application>

コンポーネント定義に埋め込まれた他の呼び出しと同様に、それぞれの関数またはメソッド呼び出しをセミコロンで区切ることにより、複数の ActionScript ステートメントを initialize MXML 属性に追加できます。次の例は、label1 コンポーネントがインスタンス化されるときに initDate() 関数を呼び出し、メッセージを "flexlog.txt" ファイルに書き込みます。

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

    <mx:Script>
        <![CDATA[
            private function initDate():void {
                label1.text += new Date();
            }
        ]]> 
    </mx:Script>

    <mx:Box borderStyle="solid">
        <mx:Label id="label1" 
            text="Today's Date:"
            initialize="initDate(); trace('The label is initialized!');"/>
    </mx:Box>
</mx:Application>

Flex 2.01