Flex Tips(4) - アラートを表示する

今回は、Flexのアプリケーションでアラートを表示する方法を紹介します。

アラートの表示

今回作成するアプリケーションは画面上のボタンがクリックされるとアラートを表示し、アラート上のボタンがクリックされると、元の画面にメッセージを表示します。以下が実際のアプリケーションです。

ではまず、アラートを表示する部分のソースを見ていきます。

「AlertSample.mxml」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
          width="388" height="138" backgroundGradientColors="[#ffffff, #ffffff]">

      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
            x="10" y="29" width="364" height="84" title="アラートサンプル"
            backgroundColor="#8080ff" borderColor="#c0c0c0">

            <mx:Button x="10" y="10" label="アラート表示"
                  width="78" id="showBtn" cornerRadius="10" click="onShowBtnClicked()"/>       ・・・(1)
            <mx:Label x="96" y="10" width="238" fontSize="15" id="msgLabel"/>

      </mx:Panel>

      <mx:Script>
            <![CDATA[

                  import mx.events.CloseEvent;
                  import mx.controls.Alert;

                  //「アラート表示」ボタンがクリックされた場合のイベントハンドラ
                  function onShowBtnClicked():void
                  {
                        //アラートを表示する
                        Alert.show("「はい」か「いいえ」を選んでください。","アラート",
                                                      Alert.YES | Alert.NO);       ・・・(2)
                  }

            ]]>
      </mx:Script>

</mx:Application>

「シンプルなアプリケーションを開発する」ではApplicationコンテナに直接コントロールを貼り付けていましたが、今回はタイトル付きのコンテナである「Panel」を使用します。通常はこのようにApplicationコンテナに別のコンテナを配置してその中にコントロールを置きます。

まず、(1)でボタンのクリックイベントにハンドラとして、「mx:Script」タグ内で定義している「onShowBtnClicked」を設定しています。そして、ハンドラ関数「onShowBtnClicked」の中でアラートを表示しています。

アラートの表示には、「mx.controls」パッケージのAlertクラスを使用します。(2)でAlertクラスの静的メソッド「show」をコールしています。show()の第1引数には「アラートに表示するメッセージ」、第2引数には「アラートのタイトル」、第3引数には「表示するボタンの種類」を指定します。

表示するボタンの種類は「はい」、「いいえ」、「OK」、「キャンセル」の中から選択して、上のサンプルのようにビット単位のOR演算子でつなげます。

☆OnePoint文法変数宣言
ActionScriptで変数を宣言する場合、「var」ステートメントを使用します。シンタックスは以下です。
var 変数名 : データ型
データ型は省略できますが、指定しておくとコンパイル時に問題を発見できやすくなります。

☆OnePoint文法 import文
外部で定義されたクラスやパッケージを参照する場合は、Javaと同じく「import」文を記述します。import文を記述しない場合は、クラスを使用する箇所でパッケージ名を含むクラス名を指定する必要があります。

アラートのボタンがクリックされた場合の処理

今度はアラートのボタンがクリックされた時のイベント処理の方法を見ていきます。

「AlertSample.mxml」

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
           width="388" height="138" backgroundGradientColors="[#ffffff, #ffffff]">

      <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
         x="10" y="29" width="364" height="84" title="アラートサンプル"
        backgroundColor="#8080ff" borderColor="#c0c0c0">

            <mx:Button x="10" y="10" label="アラート表示"
            width="78" id="showBtn" cornerRadius="10" click="onShowBtnClicked()"/>
            <mx:Label x="96" y="10" width="238" fontSize="15" id="msgLabel"/>

      </mx:Panel>

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

                  //「アラート表示」ボタンがクリックされた場合のイベントハンドラ
                  function onShowBtnClicked():void
                  {
                        //アラートを表示する
                        var alert:Alert = Alert.show("「はい」か「いいえ」を選んでください。","アラート",
                                                      Alert.YES | Alert.NO,this,onAlertBtnClicked);       ・・・(1)

                  }

                  function onAlertBtnClicked(evt:CloseEvent):void
                  {
                        if(evt.detail == Alert.YES)       ・・・(2)
                        {
                              msgLabel.text = "「はい」ボタンが押されました。";
                        }
                        else
                        {
                              msgLabel.text = "「いいえ」ボタンが押されました。"
                        }
                  }

            ]]>
      </mx:Script>

</mx:Application>

まず、(1)でshow()の引数を2つ追加しています。第4引数はアラートが中央に表示されるコントロールを指定しますが、通常「this」としておけばよいです。(筆者が調べた限りではthis以外を指定しても変化がありませんでした。)

第5引数にアラートのボタンがクリックされた場合のイベントハンドラを指定します。イベントハンドラでは(2)のように、CloseEventの「detail」を使用してどのボタンがクリックされたかを判定します。