【AIR & Flex3】 mx:Windowクラスでモーダルダイアログを実装( NativeWindow )

  カスタムコンポーネント





http://lightbox.on.coocan.jp/download/flex3_air_window.lzh

AIR ですので、ポップアップ では無い正式の1つウインドウを使ったダイアログ処理です



正式ドキュメントは記述が適当ですが、要するに mx:Window でカスタムコントロールを作って画面を作成します。
このへんは、ポップアップ と変わらないのですが、実装は作ったコンポーネントを new して作成後、open() する
といった手順になります。

ドキュメントではモーダルについての記述は無く、自分で実装ですが、たいした処理ではありませんし、
インターフェイスもルールを決めておけばわりと使いやすいものになると思います

元のウインドウはカスタムウインドウになるので、クラス名である Mainw でキャストして
新しいプロパティを参照しています


※ 位置プロパティである x と y は、直接参照できないので、nativeWindow プロパティ経由でセットしています。

LboxDialog.mxml
  
<mx:Window
	xmlns:mx="http://www.adobe.com/2006/mxml"
	title="ダイアログのテスト"
	initialize="initData();"
	close="endData();"
>
<mx:Script>
<![CDATA[

	import mx.core.*;

	// 元ウインドウ参照用
	private var opener:WindowedApplication = null;

	// *********************************************************
	// 初期化
	// 元のウインドウを参照する為の引渡し用メソッド
	// *********************************************************
	public function setOpener(opener:WindowedApplication):void {

		this.opener = opener;

	}

	// *********************************************************
	// 初期化
	// *********************************************************
	public function initData():void {

		// メッセージ
		trace( "initData()" );
		// 基本操作不可にする
		opener.enabled = false;
		opener.mouseEnabled = false;

		// タイトルバーは使用可能なので、閉じれないようにする為に
		// メインクラスにキャストしてプロパティをセット
		Mainw(opener).closeAction = false;

		// 元のウインドウの中央に表示
		var x:int = ( opener.width - this.width ) / 2;
		var y:int = ( opener.height - this.height ) / 2;
		x = x + opener.nativeWindow.x;
		y = y + opener.nativeWindow.y;

		this.nativeWindow.x = x;
		this.nativeWindow.y = y;

	}

	// *********************************************************
	// 終了
	// *********************************************************
	public function endData():void {

		// メッセージ
		trace( "endData()" );
		opener.enabled = true;
		opener.mouseEnabled = true;
		Mainw(opener).closeAction = true;

		// フォーカス移動
		opener.setFocus();

	}


]]>
</mx:Script>

<mx:VBox width="90%" height="100%"
	horizontalAlign="center"
	verticalAlign="middle"
>

	<mx:TextInput
		id="pass"
		displayAsPassword="true"
	/>
	<mx:Button
		id="send"
		label="送信"
	/>

</mx:VBox>

</mx:Window>
  

以下は、Flex 仕様の画面を持ったダイアログです( プロパティが1つ違うだけです )






  呼び出し側のソースコード



closing イベント を使用して、閉じるボタンをキャンセルしています。
入力部分は使用できないですが、最大化や最小化は可能です。

Mainw.mxml
  
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="*"
	windowComplete="initShown();"
	closing="closeControl(event);"
>

<mx:Style>

	.labelAlign {
		textAlign: left;
	}
	.testButton {
		fillColors: #5EBCDB,#FFFFFF;
	}

</mx:Style>

<mx:Script>
<![CDATA[

	import mx.core.*;

	// ダイアログからコントロールする為のプロパティ
	public var closeAction:Boolean = true;

	// *********************************************************
	// ダイアログ表示中は閉じれないようにする
	// *********************************************************
	public function closeControl(e:Event):void {

		if ( !this.closeAction ) {
			// イベントのデフォルト動作をキャンセル
			e.preventDefault();
		}

	}

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

		// メッセージ
		trace( "initData()" );

	}

	// *********************************************************
	// 表示後の初期化
	// *********************************************************
	public function initShown():void {


	}

	// *********************************************************
	// OS 仕様のダイアログ
	// *********************************************************
	public function openOsDialog():void {

		var newWindow:LboxDialog = new LboxDialog();
		// transparent=true だと、OS 仕様 は不可
		// OS 仕様
		newWindow.systemChrome = NativeWindowSystemChrome.STANDARD;
		// 透過ウインドウなし
		newWindow.transparent = false;

		newWindow.title = "新しいダイアログ";
		newWindow.width = 400;
		newWindow.height = 150;
		newWindow.maximizable = false;
		newWindow.minimizable = false;
		newWindow.resizable =false;
		newWindow.alwaysInFront = true;
		// 追加したメソッドでこのウインドウを引き渡す
		newWindow.setOpener(this);

		// 開いた時にフォーカスを持つ
		newWindow.open(true);

	}

	// *********************************************************
	// Flex 仕様のダイアログ
	// *********************************************************
	public function openFlexDialog():void {

		var newWindow:LboxDialog = new LboxDialog();
		// Flex 仕様
		newWindow.systemChrome = NativeWindowSystemChrome.NONE;
		// 透過ウインドウ
		newWindow.transparent = true;

		newWindow.title = "新しいダイアログ";
		newWindow.width = 400;
		newWindow.height = 150;
		newWindow.maximizable = false;
		newWindow.minimizable = false;
		newWindow.resizable =false;
		newWindow.alwaysInFront = true;
		// 追加したメソッドでこのウインドウを引き渡す
		newWindow.setOpener(this);

		// 開いた時にフォーカスを持つ
		newWindow.open(true);

	}

]]>
</mx:Script>

<mx:Form width="90%" height="90%">
	<mx:FormHeading label="ダイアログのテスト"/>

	<!-- ****************************************** -->
	<!-- 機能テストボタン -->
	<!-- ****************************************** -->

	<mx:FormItem label="OS 仕様のダアログ" labelStyleName="labelAlign">
		<mx:Button
			label="開く"
			click="openOsDialog();"
			styleName="testButton"
			width="100"
		/>
	</mx:FormItem>

	<mx:FormItem label="Flex 仕様のダアログ" labelStyleName="labelAlign">
		<mx:Button
			label="開く"
			click="openFlexDialog();"
			styleName="testButton"
			width="100"
		/>
	</mx:FormItem>


</mx:Form>

</mx:WindowedApplication>
  










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





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

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ