ダイアログ( ポップアップ )

  mx.managers.PopUpManager による実装



実行ページ

ダイアログ(ポップアップ)は、PopUpManager.createPopUp で作成します。
Windows と少し勝手が違いますが、たいした問題ではありません。

通常、TitleWindow を使用する事によって「ダイアログ」と呼べるような見栄えとなり、
他のコンテナやコントロールであれば、その名の通り「ポップアップ」と考えれば良いでしょう。

dialog.mxml
  
<mx:TitleWindow
	xmlns:mx="http://www.adobe.com/2006/mxml"
	title="パスワード入力"
>
	<mx:TextInput
		id="pass"
		displayAsPassword="true"
	/>
	<mx:Button
		id="send"
		label="送信"
	/>

</mx:TitleWindow>
  

Main.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="*"
	click="Mouse_Click()"
>

<mx:Script>
<![CDATA[

	import lightbox.*;
	import mx.managers.PopUpManager;

	// dialog.mxml
	private var pass:dialog;

	// *********************************************************
	// ダイアログを作成
	// *********************************************************
	public function showDialog():void {
		pass = dialog(			// この部分はキャスト
				PopUpManager.createPopUp(
					this,
					dialog,		// クラス名
					true		// 表示中は、親をプロテクトする
				)
			);

		// 非同期なので、ダイアログ表示後も以下のコードは実行される

		// 閉じる為の x ボタンを表示する
		pass.showCloseButton = true;
		// ダイアログ内の x ボタンにイベント追加
		pass.addEventListener("close", closeDialog);
		// ダイアログ全体にイベント追加
		pass.addEventListener("click", Mouse_Click_Dialog);
		// ダイアログ内のボタンを id で参照してイベント追加
		// pass.send.addEventListener でも良い
		pass["send"].addEventListener("click", displayValue);
		// 中央表示
		PopUpManager.centerPopUp(pass);

	}

	// *********************************************************
	// ダイアログを閉じる
	// *********************************************************
	public function closeDialog(event:Event):void {

		PopUpManager.removePopUp(pass);

	}

	// *********************************************************
	// 入力値の表示
	// *********************************************************
	public function displayValue(event:Event):void {

		// メッセージ
		debug.firebug( pass.pass.text );

	}

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

		// メッセージ
		debug.firebug("initData() が実行されました" );
		debug.open();

	}

	// *********************************************************
	// Mouse_Click
	// *********************************************************
	public function Mouse_Click():void {

		// メッセージ
		debug.firebug("メインでクリックされました" );

	}

	// *********************************************************
	// Mouse_Click
	// *********************************************************
	public function Mouse_Click_Dialog(event:Event):void {

		// メッセージ
		debug.firebug("ダイアログでクリックされました" );

	}


]]>
</mx:Script>

	<mx:Button
		label="送信"
		click="showDialog()"
	/>

</mx:Application>
  

イベントをメイン側に定義していますが、ダイアログ内でも定義できます。
しかし、この方法のほうが「再利用が可能」という表現で、勧められています。

Windows でも、あまり一般的ではありませんが、ダイアログ内のメッセージ処理を
メインウインドウのメッセージ処理部分で行う事があります。
しかし大きな違いは、メソッドの処理終了を待つという事が無いところです。



関連 LiveDocs
( ↑※ PC 環境によっては、最初の表示でロードされないので再表示が必要な場合があります )










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ