Flex 2 開発ガイド > Flex アプリケーションのユーザーインターフェイスの作成 > コントロールの使用 > Alert コントロール

Alert コントロール

Flex のあらゆるコンポーネントから Alert クラスの静的な show() メソッドを呼び出すことによって、モーダルなポップアップダイアログボックスを表示できます。このポップアップダイアログボックスには、メッセージの他、オプションでタイトル、ボタン、アイコンなどを実装できます。次の例は、Alert コントロールのポップアップダイアログボックスを示しています。

[Alert] ポップアップダイアログボックス

Alert コントロールは、ユーザーがこのコントロールのボタンを選択したとき、または Esc キーを押したときに閉じます。

Alert.show() メソッドのシンタックスは次のとおりです。

public static show(
text:String, 
title:String = null, 
flags:uint = mx.controls.Alert.OK,
parent:Sprite = null, 
clickListener:Function = null, 
    iconClass:Class = null, 
defaultButton:uint = mx.controls.Alert.OK) : Alert

このメソッドは、Alert コントロールオブジェクトを返します。

次の表に、show() メソッドのパラメータを示します。

パラメータ	説明
`text`	(必須) ダイアログボックスに表示されるテキストメッセージを指定します。
`title`	ダイアログボックスのタイトルを指定します。省略した場合は、空白のタイトルバーが表示されます。
`flags`	ダイアログボックスに表示するボタンを指定します。オプションは次のとおりです。 `mx.controls.Alert.OK` [OK] ボタン `mx.controls.Alert.YES` [Yes] ボタン `mx.controls.Alert.NO` [No] ボタン `mx.controls.Alert.CANCEL` [Cancel] ボタン各オプションはビット値であり、パイプ (\|) 演算子を使用して、他のオプションと組み合わせることができます。ボタンの表示順序は、コードで指定した順序とは無関係にここに記載した順となります。デフォルト値は `mx.controls.Alert.OK` です。
`parent`	Alert コントロールの親オブジェクトです。
`clickListener`	ボタンの click イベントに対するリスナーを指定します。このハンドラに渡されるイベントオブジェクトは、CloseEvent クラスのインスタンスです。イベントオブジェクトには、`detail` というフィールドがあります。このフィールドは、クリックされたボタンの flag 値 (`mx.controls.Alert.OK`、`mx.controls.Alert.CANCEL`、`mx.controls.Alert.YES`、`mx.controls.Alert.NO` のいずれか) になります。
`iconClass`	ダイアログボックスでメッセージテキストの左側に表示されるアイコンを指定します。
`defaultButton`	`flags` パラメータの有効な値のいずれかを使用して、デフォルトのボタンを指定します。ユーザーが Enter キーを押したときに選択されるボタンになります。デフォルト値は `Alert.OK` です。 Escape キーを押すと、まるでそのボタンをクリックしたかのように、[キャンセル] または [いいえ] ボタンがトリガされます。

Alert コントロールを使用するには、まずアプリケーションに Alert クラスを読み込んでから、次の例のように show() メソッドを呼び出します。

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
        ]]>
    </mx:Script>

    <mx:TextInput id="myInput" 
        width="150" 
        text=""/>
    <mx:Button id="myButton" 
        label="Copy Text" 
        click="myText.text = myInput.text;
           Alert.show('Text Copied!', 'Alert Box', mx.controls.Alert.OK);"/>
    <mx:TextInput id="myText"/> 
</mx:Application>

この例では、Button コントロールが選択されると TextInput コントロールから TextArea コントロールにテキストがコピーされ、Alert コントロールが表示されます。

次の例に示すように、Button コントロールにイベントリスナーを定義することもできます。

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

    <mx:Script>
        <![CDATA[        
            import mx.controls.Alert;

            private function alertListener():void {
                myText.text = myInput.text;
                Alert.show("Text Copied!", "Alert Box", Alert.OK);
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="myInput" 
        width="150" 
        text=""/>
    <mx:Button id="myButton" 
        label="Copy Text" 
        click="alertListener();"/>
    <mx:TextInput id="myText"/> 
</mx:Application>

メモ

show() メソッドでダイアログボックスが作成された後、ダイアログボックスが開いたままになっていてもアプリケーションの処理は続行されます。

サブトピック

Alert コントロールのサイズ設定 355

Alert コントロールでイベントリスナーを使用する方法 355

Alert コントロールアイコンの指定 356

Alert コントロールのサイズ設定

Alert コントロールのサイズは、表示するテキスト、ボタン、およびアイコンが収まるよう自動的に調整されます。次の例のように、show() メソッドで返される Alert オブジェクトを使用して、Alert コントロールのサイズを明示的に設定することもできます。

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            // Define variable to hold the Alert object. 
            public var myAlert:Alert;

            private function openAlert():void {
                myAlert = Alert.show("Copy Text?", "Alert", 
                    Alert.OK    | Alert.CANCEL);
                // Set the height and width of the Alert control.
                myAlert.height=150;
                myAlert.width=150;
            }
        ]]>
    </mx:Script>

        <mx:TextInput id="myInput" 
            width="150" 
            text=""/>
        <mx:Button id="myButton" 
            label="Copy Text" 
            click="openAlert();"/>
        <mx:TextInput id="myText"/>
</mx:Application>

この例では、Alert オブジェクトの height プロパティと width プロパティを指定して、コントロールのサイズを明示的に設定しています。

Alert コントロールでイベントリスナーを使用する方法

次の例では、Alert コントロールのポップアップダイアログボックスにイベントリスナーを追加します。イベントリスナーを使用すると、Alert コントロールのボタンが選択されたときに実行する処理を指定できます。イベントリスナーに渡されるイベントオブジェクトは、CloseEvent タイプです。

次の例では、ユーザーが Alert コントロールの [OK] ボタンを選択したときにテキストのみコピーします。

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;

            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </mx:Script>

    <mx:TextInput id="myInput" 
        width="150" 
        text="" />
    <mx:Button id="myButton" 
        label="Copy Text" 
        click='Alert.show("Copy Text?", "Alert",
            Alert.OK | Alert.CANCEL, this,
            alertListener, null, Alert.OK);'/>
    <mx:TextInput id="myText"/>
</mx:Application>

この例では、Alert コントロールのイベントリスナーを定義します。イベントリスナーの本体内で、イベントオブジェクトの detail プロパティを確認して押されたボタンを判別します。イベントオブジェクトは CloseEvent クラスのインスタンスです。ユーザーが [OK] ボタンを押した場合は、テキストをコピーします。ユーザーがそれ以外のボタンまたは Esc キーを押した場合は、テキストをコピーしません。

Alert コントロールアイコンの指定

Alert コントロールには、メッセージテキストの左側に表示されるアイコンを追加できます。次のコードは、前のセクションの例に Embed メタデータタグを追加してアイコンを読み込むように修正したものです。リソースを読み込む方法の詳細については、ActionScript の使用を参照してください。

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

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
            
            [Embed(source="assets/alertIcon.jpg")] 
            [Bindable]
            public var iconSymbol:Class; 

            private function alertListener(eventObj:CloseEvent):void {
                // Check to see if the OK button was pressed.
                if (eventObj.detail==Alert.OK) {
                    myText.text = myInput.text; 
                }
            }
        ]]>
    </mx:Script>

        <mx:TextInput id="myInput" 
            width="150" 
            text=""/>
        <mx:Button id="myButton" 
            label="Copy Text"
            click='Alert.show("Copy Text?", "Alert",
                Alert.OK | Alert.CANCEL, this,
                alertListener, iconSymbol,  Alert.OK );'/>
        <mx:TextInput id="myText"/>
</mx:Application>

Flex 2.01