Air でポップアップウィンドウを作成する

FlexBuilder3 でポップアップウィンドウを実装してみる

○ポップアップウィンドウ用MXMLコンポーネントの作成
まず、作成したいプロジェクトをFlexナビゲーションにて選択し
右クリック>新規>MXMLコンポーネントを選択し
新規MXMLコンポーネント作成画面を起動する
作成したいMXMLファイル名を入力し、ベースにTitleWindowを選択する

終了ボタンを押下すると、ポップアップウィンドウ用のMXMLファイルが作成される

○ポップアップウィンドウの設定
・閉じるボタンの表示
作成したポップアップウィンドウコンポーネントのTitleWindowタグに
showCloseButton="true" のように属性を追加する
・閉じた時の処理の実装
ポップアップウィンドウが閉じられた時に実行する処理として
TitleWindowタグのcloseイベントの処理として以下のように記述する
close="PopUpManager.removePopUp(this)"
※要import mx.managers.PopUpManager;

○呼出元画面からのポップアップ起動処理の実装
ポップアップ呼出元画面のボタンコンポーネントのタグに以下を追記
click="PopUpManager.createPopUp(this, PopupWindow)"
※PopupWindowはコンポーネントファイル名と同様のものを記述する
※要import mx.managers.PopUpManager;

以下、起動イメージ

○呼出元画面からのポップアップ画面へのデータの受け渡し
createPopUpにて返されるポップアップ画面の参照オブジェクトを
利用してデータを引渡すことができる
以下、起動元のポップアップ画面起動時の処理
var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, PopupWindow);
IDataRenderer(popup).data = "";

○ポップアップ画面から呼出元画面へのデータの受け渡し
ポップアップ画面のCloseイベントのリスナーを設定することにより取得できる
以下、起動元のポップアップ画面起動時の処理
var popup:IFlexDisplayObject = PopUpManager.createPopUp(this, PopupWindow);
popup.addEventListener(CloseEvent.CLOSE,onClosePopup);
//データ取得処理
public function onClosePopup(e:CloseEvent):void{
var popup:PopupWindow = e.currentTarget as PopupWindow;
//popup.id にてポップアップのコンポーネントにアクセス可能
}