Flex 3 開発のポイント

Flex 3 開発のポイント
このドキュメントは Flex 3 での開発に必要なテクニックの一部を解説しています。基本的な開発
方法やクラスの詳細は市販のマニュアル や Adobe 社の Web サイト等をご覧ください。
※本書の内容は Flex3 に基づいています。説明の補助としてサンプルコードを用いていますが動作を保障するもので
はありません。
1 ポップアップウィンドウの制御
Flex のようなリッチインターネットアプリケーションの
特徴のひとつとして、クライアント（ブラウザ）で処理さ
れるためレスポンスが早いことが挙げられます。ポッ
プアップウィンドウの制御は Flex の利点を生かしたレ
スポンスの早い使いやすいシステムを構築するため
には重要です。
1-1 ポップアップウィンドウの開き方
ポップアップウィンドウは、ActionScript で PopUpMamanger を使用して開きます。
サンプル）　login ウィンドウをポップアップで開く例
import mx.managers.PopUpManager;
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
ポップアップウィンドウは、デフォルトでは左上に表示されますが、centerPopUp 関数によって中
央に表示することができます。
サンプル）　login ウィンドウをポップアップを中央に表示する例
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
PopUpManager.centerPopUp(wd);
メインからポップアップウィンドウのプロパティに値を設定することもできます。
サンプル）　login ポップアップウィンドウのプロパティ設定例
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
wd.btnLogin.enabled = false;
//
ボタンを使用不可とする
wd.enabled = true;
//
ウィンドウを使用可能にする
Page 1 Flex 3 開発のポイント ecobioinfo.com
2010.10.28 All rights reserved
1-2 ポップアップウィンドウの初期化と同期
ポップアップウィンドウの初期化関数はウィンドウの creationComplete プロパティで設定すること
もできますが、ActionScript で addEventListener 関数を用いて CREATION_COMPLETE イベント
ハンドラーとして初期化関数を設定することによって、メインからイベントを設定することも出来ます。
メインから初期化関数のイベントを設定することによって、メインでのパラメータ処理が終了してか
らポップアップウィンドウの初期化を行うようにタイミングを合わせることができます。
サンプル）　login ポップアップウィンドウの初期化関数のイベントを設定する例
---- 呼び出し元の ActionScript
import mx.managers.PopUpManager;
import mx.events.FlexEvent
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
（ここで、パラメータ設定などを行う）
// イベントハンドラー設定
wd.addEventListener(FlexEvent.CREATION_COMPLETE, wd.init);
----- login ポップアップウィンドウの ActionScript
public function init(event:Event) : void
{
（画面表示完了後に必要な初期処理はここで行う）
txtUserId.setFocus();
// フォーカス初期設定
// 全ての初期処理終了後、ボタン使用可とする
btnLogin.enabled = true;
}
1-3 ポップアップウィンドウからメインへの受け渡し
ポップアップウィンドウから呼び出し元へ値を設定するには幾つかの方法がありますが、最も単
純な方法は呼び出し元への参照を予め設定しておくことです。
サンプル）　login ポップアップウィンドウに呼び出し元 main への参照を設定する例
---- 呼び出し元の ActionScript
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
wd.mainRef = this;
// メインウィンドウへの参照を設定
wd.addEventListener(FlexEvent.CREATION_COMPLETE, wd.init);
----- login ポップアップウィンドウの ActionScript
public var mainRef:main = null;
// 呼び出し元への参照のための変数
// 初期化関数
public function init(event:Event) : void
{
// 全ての初期処理終了後、ボタン使用可とする
btnLogin.enabled = true;
}
// この関数は処理終了時に呼ばれる
private function loginOK() : void
{
mainRef.userId = userId;
}
// 呼び出し元へ設定
Page 2 Flex 3 開発のポイント ecobioinfo.com
2010.10.28 All rights reserved
ポップアップウィンドウから parent プロパティを使ってメインウィンドウを参照することもできます。
但し、ポップアップウィンドウは SystemManager によって制御されるため parent プロパティは呼び
出し元のウィンドウとは限りません。 下記の例のように、SystemManager の application プロパティ
からメインウィンドウを参照することができます。
サンプル）　login ポップアップウィンドウから呼び出し元 main への参照の例
-----ポップアップウィンドウの ActionScript
import mx.managers.SystemManager;
// 呼び出し元への参照のための変数
private var mainRef:main = null;
// 親ウィンドウを設定
var p:SystemManager = this.parent as SystemManager ;
mainRef = p.application as main;
1-4 カスタムイベントによるポップアップウィンドウと呼び出し元との連携
ポップアップウィンドウと呼び出し元画面との連携を行う場合にはカスタムイベントも使えます。
Event クラスを継承して独自のイベントクラスを作り、addEventListener 関数で登録、必要に応じて
dispatchEvent 関数でイベントを発生させます。
サンプル）　カスタムイベントによる呼び出し元との連携の例
---- 独自のイベントクラスの ActionScript
import flash.events.Event;
public class PopUpEvent extends Event
{
// 独自のイベントを定義
public static const USERID_COMPLETE:String = "userIdComplete";
// 独自のイベントクラスのプロパティ
public var userId:String = "";
public function PopUpEvent(type:String,
bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
---- 呼び出し元の ActionScript
public function clickLogin():void
{
var wd:login = PopUpManager.createPopUp(this, login, true) as login;
// イベントハンドラ登録
wd.addEventListener(PopUpEvent.USERID_COMPLETE, setUserId);
}
wd.enabled = true;
Page 3 Flex 3 開発のポイント ecobioinfo.com
2010.10.28 All rights reserved
// この関数はイベント発生時に呼び出される
public function setUserId(event:PopUpEvent):void
{
userId = event.userId;
}
----- login ポップアップウィンドウの ActionScript
// イベントクラスのインスタンス生成
var newEvent:PopUpEvent = new PopUpEvent(PopUpEvent.USERID_COMPLETE);
newEvent.userId = userId;
// プロパティ設定
// イベントを発生させる。
this.dispatchEvent(newEvent);
このようにイベントを使えば、ポップアップとの連携処理だけではなく、どのような連携処理でも同
様の手法で制御することができます。
1-5 ポップアップウィンドウを閉じる
ポップアップウィンドウは PopUpManager の removePopUp 関数で閉じます。ポップアップは呼
び出し元画面からも、ポップアップウィンドウからも閉じることはできます。（モジュールの汎用性を
考えるとポップアップウィンドウから閉じることが望ましいと思われます。）
ポップアップウィンドウのクローズボタン[×] が押されると CloseEvent.CLOSE イベントが発生しま
すので、イベントハンドラを登録しておくとクローズ時に必要な処理が行えます。
サンプル）　ポップアップを閉じる処理例
import mx.events.CloseEvent;
// 初期処理
private function init(event:Event) : void
{
// イベント登録　クローズボタンが押されると発生
this.addEventListener(CloseEvent.CLOSE, cancelHandler);
}
// 閉じるときに呼び出されるイベントハンドラ
private function cancelHandler(event:CloseEvent) :void
{
// 確認メッセージ　YES で閉じる処理へ
Alert.show("キャンセルしてよろしいですか？", "確認",(Alert.YES|Alert.NO),
null, cancelResultHandler, null, Alert.YES);
}
// 終了確認メッセージの結果 YESなら閉じる
private function cancelResultHandler(event:CloseEvent) :void
{
if(event.detail == Alert.YES) {
// イベントハンドラを消す
this.removeEventListener(CloseEvent.CLOSE,cancelHandler);
// 自分を閉じる
PopUpManager.removePopUp(this);
}
}
Page 4 Flex 3 開発のポイント ecobioinfo.com
2010.10.28 All rights reserved