アクセシビリティ

Flex クイックスタート: はじめに

目次


イベントの処理

Adobe® Flex™ アプリケーションはイベント駆動です。 ユーザがインタフェースコンポーネントと対話すると、イベントがそれをプログラマーに知らせます。また、コンポーネントの作成、破棄、サイズ変更など、コンポーネントの外観やライフサイクルに重要な変化が起こったことも知らせます。

コンポーネントのインスタンスによってイベントが送信されると、そのイベントのリスナとして登録したオブジェクトに通知されます。 ActionScript でイベントリスナ(イベントハンドラ)を定義して、イベントを処理することができます。 イベントのイベントリスナは、コンポーネントの MXML 宣言として、または ActionScript で登録することができます。

イベント通知は次の 3 つの方法で受け取ることができます。

MXML を使用したイベントハンドラの定義

イベント通知を受け取るためにもっともよく使用されるのは、イベントが発生したときに呼び出されるイベントハンドラを MXML で定義する方法です。

次の例では、Button コントロールの click イベントのイベントハンドラを定義します。 ユーザが Button コントロールをクリックすると、イベントハンドラによって Label コントロールの text プロパティが "Hello, World!" に設定されます。.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="300" height="200"
    horizontalAlign="center" verticalAlign="middle" 
    viewSourceURL="src/HandlingEventsEventHandler/index.html"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
        
            private function clickHandler ( event:MouseEvent ):void
            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

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

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="clickHandler(event);" />

    </mx:Panel>
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード!

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

MXML 定義内でのインラインイベントハンドラの作成

場合によっては、イベントハンドラをコンポーネントの MXML 定義内で定義すると、簡単にイベントに応答できることがあります。 つまり、インラインイベントハンドラを使用します。

次の例では、 click ■訳文を後の文節にまとめました■ <mx:Button> タグの click プロパティを設定して、Label コントロールの text プロパティを直接設定します。イベントハンドラメソッドを呼び出す必要はありません。

ヒント:インラインイベントハンドラを使用するのは簡単でコードも短くなりますが、コードの読み取り、保守および拡張や短縮が難しくなることがあります。 インラインイベントハンドラには ActionScript の複数の文を含めないことをお勧めします。 複雑なロジックを含める必要がある場合は、ActionScript ヘルパメソッドまたはActionScript イベントハンドラに含めるほうが適切です。.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    viewSourceURL="src/HandlingEventsInlineMethod/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"

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

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" click="myLabel.text = 'Hello, World!'" />

    </mx:Panel>
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード!

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。

ActionScript を使用したイベントリスナの登録

ActionScript を使用してイベントハンドラを登録して、イベントに応答することもできます。

次の例では、ActionScript で addEventHandler() メソッドを使用してイベントハンドラを登録します。 ■訳を後の文節にまとめました■ addEventHandler() ■訳文を後の文節にまとめました■ creationComplete Application コンテナの creationComplete イベントのイベントハンドラに addEventHandler() メソッドを記述します。

ヒント:Application フォームの creationComplete イベントは、アプリケーションの開始時に Application フォームとその子が初期化された後で発生します。 ■訳を後の文節にまとめました■ creationComplete イベントのイベントハンドラは、イベントリスナを登録するために ActionScript コードを実行する便利な場所です。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
     viewSourceURL="src/HandlingEventsActionScript/index.html"
    horizontalAlign="center" verticalAlign="middle" 
    width="300" height="200"
    creationComplete="creationCompleteHandler(event);"

>
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.events.FlexEvent;

            private function creationCompleteHandler(event:FlexEvent):void

            {
                // Listen for the click event on the Button control
                myButton.addEventListener (MouseEvent.CLICK, clickHandler);
            }
        
            private function clickHandler ( event:Event ):void

            {
                myLabel.text = "Hello, World!";
            }
        ]]>
    </mx:Script>

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

        <mx:Label id="myLabel" width="180" fontWeight="bold" fontSize="24"/>
        <mx:Button id="myButton" label="Click Me!" />

    </mx:Panel>
</mx:Application>

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード!

Flash Player を入手

ソースを表示するには、Flex アプリケーションを右クリックして、コンテキストメニューから「ソースの表示」を選択します。


詳細情報

イベント処理について詳しくは、『Flex 2 Developer's Guide』の「Using Events」を参照してください。

著者について

Aral Balkan 氏は開発チームの指揮、ユーザインタフェースの設計、リッチインターネットアプリケーションの構築、ロンドンの Macromedia ユーザグループ OSFlash.org* の運営、自らの会社 Ariaware* の経営に加えて、演技と歌も得意とする。 設計について積極的に語り、著書や記事も多数。 Flash プラットフォーム用オープンソース RIA フレームワーク Arp* の作者でもある。 常に強固な意見を持ち、活気にあふれ情熱的。 いつも笑顔を絶やさず、ガムをかみながら歩くこともある。