モーダルな ErrorDialog というクラスを作りましたので公開します。
以下、特徴など説明です。
どの階層で addChild しても必ず stage 最前面に表示
そもそもモーダルダイアログとは、
そのダイアログを閉じるまで、他の操作をできなくするタイプのウィンドウの事です。
( Photoshop で言うフィルタのウィンドウみたいな物ですね)
この ErrorDialog クラスは、手軽にそれを実装するため、
どんな階層でも、addChilde するだけで、必ず stage の最前面 (＆中央) に表示されるようになっています。
import jp.itoz.display.window.ErrorDialog;
//どんな深い階層でaddChildしてもOK！
var errorDialog:ErrorDialog = new ErrorDialog("タイトル","メッセージ",new Error());
addChild(errorDialog);
stage.addChilde(hoge);//←以降こんな事しても問題なし複数addChildしても、addChildされた順番通り表示
「必ず最前面に表示される」ということは、
複数addChildしたらどうなるの？
と思った方もいるかも知れません。
そこはご安心を！
例えば下記のように意図的に3回エラーを起こして、addChildしてみます。
var arr : Array;
for (var i : int = 0; i < 3; i++) {
try {
arr.push(i);//newArray()していないのでエラーが起きる。
} catch(error : Error) {
//第三引数にはError継承クラスを渡せる
var errorDialog : ErrorDialog = new ErrorDialog("Error"+ (i+1)+" 回目" , "Error message.", error);
addChild(errorDialog);
}
}結果はこのような動作になります。
[SWF] ErrorDialogSample.swf
ちゃんと順番よく表示されたと思います。
例えば、下層の様々なエラーの起きそうな場所に、(try catchとかで) このクラスを記述しておくことで、エラーが起こった順番通りに表示してくれます。
デザイン変更もサクっと出来る
1. サイズ、マージン変更はコンストラクタで変更
第4引数 以降に、幅、高さ、マージンを設定できます。
//幅と高さ300 マージン20にする
var errorDialog:ErrorDialog = new ErrorDialog("サイズ変更","サイズを変更しました",new Error(),300,300,20);
addChild(errorDialog);[SWF] ErrorDialogSizeChangeSample.swf
ある程度自動でレイアウトされる様になっています。
が、微調整したい場合は、addChild 後に変更してください。
( ※ addChild 時に自動レイアウトされるため )
//位置微調整の例
addChild(errorDialog);
errorDialog.titleTextField.y+=10;
errorDialog.closeButton.y -=5;
2. 背面パネル、クローズボタン、テキストフォーマットは、プロパティで変更
// 背面パネル変更
// ※これを変更すると、コンストラクタで設定したサイズが無効化され
//渡されたDisplayObjectContainerを元にレイアウトされます。
errorDialog.background = [任意のDisplayObjectContainer]
//クローズボタン変更
//※CLICKイベントは自動的に付加されます。
errorDialog.closeButton = [任意のInteractiveObject]
//テキストフォーマット変更
errorDialog.titleTextFormat = newTextFormat(null,20,0xcc0000,true);
errorDialog.messageTextFormat = newTextFormat(null,15,0x00cc00);
errorDialog.errorTextFormat = newTextFormat(null,20,0x0000cc);
以上、簡単に変更できます!
ざっとまとめると例えばこんな感じ。
//背面パネル用スプライト
var bg : Sprite = newSprite();
bg.graphics.beginFill(0xc6d5cd);
bg.graphics.drawRect(-200, -75, 400, 150);
bg.graphics.endFill();
var errorDialog : ErrorDialog = new ErrorDialog("デザインカスタマイズ", "デザイン変更しました", new Error(), 300, 300, 5);
errorDialog.background = bg;//※コンストラクタで指定したサイズ無効になる
errorDialog.closeButton = new PushButton(null, 0, 0, "pushbutton");//Minimalcompのプッシュボタン
errorDialog.titleTextFormat = new TextFormat(null, 20, 0xcc0000,null,null,null,null,null,TextFormatAlign.CENTER);
addChild(errorDialog);
errorDialog.titleTextField.y += 10;
errorDialog.closeButton.y -= 5;上記をパブリッシュすると、
[SWF] ErrorDialogCustomizeSample.swf
と、如何様にでも出来ます。
フェードイン、フェードアウト演出を変更したい
この場合、 AbstractErrorDialog の継承クラスを作成します。
（ ※ ErrorDialog クラスもこの継承です ）
サンプルとして OrigineErrorDialog クラスを作成しました。
[SWF] OriginErrorDialogSample.swf
[AS] OriginErrorDialogSample.as
継承ポイントは下記です。
・初期表示状態はsetLayout()内で定義。(これがaddChild時に呼ばれる)
・open()をoverrideしフェードイン演出を実装
・フェードイン完了時、openComplete()を必ず呼ぶ
・close()をoverrideしフェードアウト演出を実装
・フェードアウト完了時、closeComplete()を必ず呼ぶ
また、背景パネルやクローズボタンも当然ここで変えられます。
背景パネルは、createBackground() 内で作成し、return するだけ。
同じくクローズボタンは、createCloseButton() 内で作成しreturn するだけ。
です。
背面全体を覆っているカバーを変更したい
これも簡単。
errorDialog.cover= [任意のDisplayObjectContainer];
で変更でき、自動で拡縮し画面全体を覆います。
ただ注意点として、複数ダイアログでcoverを変更しても、
全て最後に設定されたものになってしまいます。
ダウンロード
Github にアップしました。
※要Tweener
その他
今後こんな機能も追加したい
・複数表示される場合、キャンセルできる。
・マージンは上下左右別々に設定できる。
・非表示切り替え。（リリースビルドなどの時用）
・メッセージテキストフィールドにスクロールバーを付ける
修正履歴
-2011.4.24 複数同時addChild時、2番目以降の表示オブジェクト位置を調整しても反映されないバグを修正しました。
-2011.4.24 クローズボタンにオーバーを追加しました。
※2011.4.24 teraco – 東京てら子Vol.15 『Error Handling＆Security』の回で発表しました。
以上、バグ発見されましたら教えていただけるとありがたいです。
では！
