引越しました!

http://blog.mogmet.com/blog-entry-22.html

へアクセスしてください。

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

Flashの環境上にはAlertがない。

FlexではAlert.show("message");とかで簡単にできちゃうけど、Flashではそれができないのだ。



そこでなんとか方法はないかと探ったら方法と、また、問題点があったのでめもっとく。

[方法]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: 強制型変換に失敗しました。global@31f3f0f9 を 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ファイルの記述はこんなかんじ。
package
{
import flash.display.*;
import flash.events.*;
import com.yahoo.astra.fl.managers.AlertManager;
import fl.data.DataProvider;


public class test extends Sprite {
public function test() {
//add event listener to the button
showAlertButton.addEventListener(MouseEvent.CLICK, ShowAlerts);

//event handler to trigger the alert
function ShowAlerts(evnt:MouseEvent):void
{
var buttons:Array = new Array( "button1", "button2" );
AlertManager.createAlert(root, "this is Alert Message\n are you ok?", "Title", buttons, _clickAlert, "", true );
}
function _clickAlert ()
{
showAlertButton.label = "ok";
}
}
}
}


サンプルとソースはこちら
アラートサンプル
ソース



11/20追記
ライブラリに追加する際に、AlertManagerだけでなく、コンポーネントからButtonも追加しないといけないようなので注意です。

これがないとエラーでて、大変だったので注意。


アラートボックス

コメントの投稿

非公開コメント

クリックされたボタンの判別

new Array( "button1", "button2" );

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

Re: クリックされたボタンの判別

>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";
}

}

Re: クリックされたボタンの判別

ありがとうございます。
event.target.namecで充分だと思います。気がつきませんでした。
そうですね、そうすればいいんですね。判別できなければアラートの意味がなくなりますもんね!
ありがとうございました。
スポンサーリンク
FC2カウンター
最新記事
最新コメント
カテゴリ
アマゾンドリンク
検索フォーム
リンク
ブロとも申請フォーム

この人とブロともになる

アクセスランキング
[ジャンルランキング]
コンピュータ
1913位
アクセスランキングを見る>>

[サブジャンルランキング]
未設定
--位
アクセスランキングを見る>>
バックリンク
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。