[AS3.0]CS4 Flash上でFlexのAlertポップアップを実現する

公開日: 

Flashの環境上にはAlertがない。
FlexではAlert.show(“message”);とかで簡単にできちゃうけど、Flashではそれができないのだ。
そこでなんとか方法はないかと探ったら方法と、また、問題点があったのでめもっとく。

sponcer link


[方法]Examples: AlertManager for Flash CS3から適当にどれかFLAファイルひろってくる。
そのあと、FLAファイルにあるAlertManagerと、コンポーネントのButtonを自分とこのライブラリにコピー
次に

import com.yahoo.astra.fl.managers.AlertManager;
import fl.data.DataProvider;
import fl.events.ComponentEvent;

を、importして、

AlertManager.createAlert(this, “This is an alert box.”);

を実行するだけ。
[問題点]
ASファイルを別に作り、ドキュメントクラスで書いてるとうまく動かない
[解決方法]
AlertManager.createAlert(this, “This is an alert box.”);
のthisの部分をrootに変える。
[詳細]
参考サイト
ASTRA AlertManager
FlashでのAlertポップアップの答えがここにあった!
サンプルをみると、、、
おー!
FlexのAlertのようだ!
Using AlertManagerをみてみると、
1.importと初期設定

import com.yahoo.astra.fl.managers.AlertManager;
import fl.data.DataProvider;
import fl.events.ComponentEvent;
stage.align = StageAlign.TOP_LEFT;

をやってくれとのこと。
しかし、ここで問題。
私の環境ではstage.align = StageAlign.TOP_LEFT;をやってもえらーになってしまった。
しかたないのでここははずしたが・・・
あれ、、はずしてもうごいてるじゃんw
ということで、なくてもよくわからんけど動きます。
2.Alertの表示
以下を書き込むだけでアラートができる。

AlertManager.createAlert(this, “表示したいメッセージ”);

なんと簡単なんだ!!
3.引数の設定
もっと詳細に設定したい場合はこちら。

AlertManager.createAlert(this, “表示したいメッセージ”, “アラートタイトル”, buttons, alertClickHandler, iconClass, true);

・1個目の引数
みたまんまthisをいれている。
だがしかし、これがトラップをもっている。
ASファイルを別につくりドキュメントクラスとして書いて、thisで実行するとこんなエラーがでた。

TypeError: Error #1034: [email protected] を flash.display.DisplayObject に変換できません。
at MethodInfo-136()

そのため、代わりにrootをいれてあげたらできた。
・2個目の引数
メッセージ本文です。
String型でいれてあげましょう。
・3個目の引数
メッセージのタイトルです。
これもString。
・4個目の引数
ボタンの設定です。
Arrayをいれます。
Arrayの個数によってボタンが増えていきます。
たとえば

var buttons:Array = new Array( “button1”, “button2” );

と、宣言しこのbuttonsを引数に指定すれば、
button1とbutton2のボタンが生成されます。
・5個目の引数
ボタンが押されたときに呼び出されるイベントハンドラです。
適当に関数を指定しときましょう
・6個目の引数
iconClassってことだが、これは表示するポップアップを

“” (普通のアラート)
“dialogIcon”
“warningIcon”
“confirmationIcon”

4つ選択できる。
すきなものをString型でいれてあげてください。
・7個目の引数
よくわからん。
とりあえずtrue。
falseにするとなんかエラーでるのでとりあえずtrueにしとけばいいかと。
とりあえずASファイルの記述はこんなかんじ。

サンプルとソースはこちら
アラートサンプル
ソース
11/20追記
ライブラリに追加する際に、AlertManagerだけでなく、コンポーネントからButtonも追加しないといけないようなので注意です。
これがないとエラーでて、大変だったので注意。
アラートボックス

  • このエントリーをはてなブックマークに追加
  • Pocket
  • UKONN

    new Array( "button1", "button2" );
    2つのボタンのうちどちらがクリックされたかをイベントハンドラ内で判別したいのですが可能でしょうか?

  • もぐめっと

    >UKONNさん
    こんにちは。
    どちらかクリックされて判定は、少々スマートなやり方ではない気がしますが、私は event.target.nameの値をみて判別しました。
    以下のサンプルを参考にソースを弄ってみたので確認してみてください。
    http://developer.yahoo.com/flash/astra-flash/alertmanager/examples/CustomizedAlert.html
    //import necessary classes
    import com.yahoo.astra.fl.managers.AlertManager;
    import fl.data.DataProvider;
    import fl.events.ComponentEvent;
    //align the stage
    stage.align = StageAlign.TOP_LEFT;
    //create variable for the icon class
    var iconClass:String;
    //style showAlertButton and add listener to its click event
    showAlertButton.label = "Show Alert";
    showAlertButton.addEventListener(MouseEvent.CLICK, ShowAlerts);
    //event handler function for the showAlertButton
    //creates an alert based on the form field values
    function ShowAlerts(event:MouseEvent):void
    {
    var buttonString = buttonNames.text;
    if(buttonString.lastIndexOf(",") == buttonString.length-1) buttonString = buttonString.substr(0, buttonString.length-1);;
    // オリジナルソースでは「,」をいれることによってボタン化してますが、
    // 今回はボタンにする必要があるので、buttonsにarrayをいれておきます。
    //var buttons:Array = buttonString.split(",");
    var buttons:Array = new Array( "button1", "button2" );
    AlertManager.createAlert(this, alertText.text, titleText.text, buttons, displaySelectedButtonText, iconClass, true);
    }
    //create an array of classes for the iconSelector dropdown
    //set its width and data provider
    //add listener to its change event
    var iconClasses:Array = [
    {label:"none", data:""},
    {label:"dialogIcon", data:"dialogIcon"},
    {label:"warningIcon", data:"warningIcon"},
    {label:"confirmationIcon", data:"confirmationIcon"}
    ];
    iconSelector.width = 300;
    iconSelector.dataProvider = new DataProvider(iconClasses);
    iconSelector.addEventListener(Event.CHANGE, iconSelectorHandler);
    //event handler for the iconSelecter changes the ionClass value
    function iconSelectorHandler(event:Event):void
    {
    iconClass = event.target.selectedItem.data;
    }
    //event handler for the alert
    //displays the label of the button that the user clicks in the output text field
    function displaySelectedButtonText(event:Event):void
    {
    // event.target.nameの値をみてどのボタンがおされたかを判別します
    if ( event.target.name == "button1" ) {
    outputText.text = ‘you selected button one’;
    } else if (event.target.name == "button2") {
    outputText.text = "this is … button two";
    }
    }

  • UKONN

    ありがとうございます。
    event.target.namecで充分だと思います。気がつきませんでした。
    そうですね、そうすればいいんですね。判別できなければアラートの意味がなくなりますもんね!
    ありがとうございました。

PAGE TOP ↑