Flex4 弹出窗口的数据交互

取出数据

• 使用组件属性，设置返回字段的getter来获取数据

主程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   applicationComplete="init()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import mx.controls.Alert;
			import mx.events.*;
			
			import views.*;
			
			protected var simpleWindow:layoutPop;
			
			protected function init():void
			{
				simpleWindow = new layoutPop();
				//添加响应事件
				simpleWindow.addEventListener(layoutPop.LOGINNING,onLogin,false,0,true);
				login.addEventListener(MouseEvent.CLICK,openLoginWindow);
			}
			protected function onLogin(event:Event):void
			{
				Alert.show(simpleWindow.username+"\n"+simpleWindow.password);
			}
			protected function openLoginWindow(event:Event):void
			{
				PopUpManager.addPopUp(simpleWindow,this,true);
				PopUpManager.centerPopUp(simpleWindow);
			}
		]]>
	</fx:Script>
		<s:VGroup verticalCenter="0" horizontalCenter="0">
			<s:Button horizontalCenter="0" verticalCenter="0" id="login" label="Login"/>
		</s:VGroup>
</s:Application>

 弹出Window layoutPop

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" close="closeWindow()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			//添加元数据方便MXML代码提醒 
			[Event(name="loggingIn")]
			import mx.managers.PopUpManager;
			//定义事件
			public static const LOGINNING:String = "loggingIn";
			//绑定两个字符串
			[Bindable]
			public var _username:String="";
			public function get username():String
			{
				return _username;
			}
			
			[Bindable]
			public var _password:String="";
			public function get password():String
			{
				return _password;
			}
			protected function closeWindow():void
			{
				PopUpManager.removePopUp(this);
			}
			protected function sendLogin():void
			{
				dispatchEvent(new Event(LOGINNING));
				closeWindow();
			}
			
		]]>
	</fx:Script>
	<!--使用Form提交数据，并且绑定字符-->
	<s:Form>
		<s:FormItem label="Username">
			<s:TextInput id="usernameField" text="@{_username}"/>
		</s:FormItem>
		<s:FormItem label="Password">
			<s:TextInput id="passwordField" text="@{_password}" displayAsPassword="true"/>
		</s:FormItem>
		<s:FormItem>
			<s:Button label="Login in" click="sendLogin()"/>
		</s:FormItem>
	</s:Form>
</s:TitleWindow>

•  使用事件属性，自定义事件获得返回值

主程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   applicationComplete="init()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import mx.controls.Alert;
			import mx.events.*;
			import action.LoginEvent;
			
			import views.*;
			
			protected var simpleWindow:ReayoutPop;
			
			protected function init():void
			{
				simpleWindow = new ReayoutPop();
				//添加响应事件
				simpleWindow.addEventListener(LoginEvent.LOGGING,onLogin,false,0,true);
				login.addEventListener(MouseEvent.CLICK,openLoginWindow);
			}
			protected function onLogin(event:LoginEvent):void
			{
				//通过LoginEvent的事件来获取字段值
				Alert.show(event.username+"\n"+event.password);
			}
			protected function openLoginWindow(event:Event):void
			{
				PopUpManager.addPopUp(simpleWindow,this,true);
				PopUpManager.centerPopUp(simpleWindow);
			}
		]]>
	</fx:Script>
		<s:VGroup verticalCenter="0" horizontalCenter="0">
			<s:Button horizontalCenter="0" verticalCenter="0" id="login" label="Login"/>
		</s:VGroup>
</s:Application>

 弹出窗口  ReayoutPop

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" close="closeWindow()">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import action.LoginEvent;
			//添加元数据方便MXML代码提醒 
			[Event(name="loggingIn")]
			import mx.managers.PopUpManager;
			//定义事件
			public static const LOGINNING:String = "loggingIn";
			//绑定两个字符串
			[Bindable]
			public var _username:String="";
			public function get username():String
			{
				return _username;
			}
			
			[Bindable]
			public var _password:String="";
			public function get password():String
			{
				return _password;
			}
			protected function closeWindow():void
			{
				PopUpManager.removePopUp(this);
			}
			protected function sendLogin():void
			{
				//使用LoginEvent事件
				var event:LoginEvent = new LoginEvent(LoginEvent.LOGGING);
				event.username = _username;
				event.password = _password;
				dispatchEvent(event);
				closeWindow();
			}
			
		]]>
	</fx:Script>
	<!--使用Form提交数据，并且绑定字符-->
	<s:Form>
		<s:FormItem label="Username">
			<s:TextInput id="usernameField" text="@{_username}"/>
		</s:FormItem>
		<s:FormItem label="Password">
			<s:TextInput id="passwordField" text="@{_password}" displayAsPassword="true"/>
		</s:FormItem>
		<s:FormItem>
			<s:Button label="Login in" click="sendLogin()"/>
		</s:FormItem>
	</s:Form>
</s:TitleWindow>

 自定义事件 LoginEvent 

package action
{
	import flash.events.Event;
	public class LoginEvent extends Event
	{
		[Event(name="logging",type="LoginEvent")]
		public static const LOGGING:String = "logging";
		public var username:String;
		public var password:String;
			public function LoginEvent(type:String,bubbles:Boolean=false,cancelable:Boolean=false)
			{
				super(type,bubbles,cancelable);
			}
	}
}

 

 

传入数据

• 通过定义Setter或者公共函数传入数据

主程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   applicationComplete="init()">
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			
			import window.UserWindow;
			
			protected var _usersWindow:UserWindow;
			
			protected function init():void
			{
				_usersWindow = new UserWindow();
				login.addEventListener(MouseEvent.CLICK,openWindow);
			}
			
			protected function openWindow(event:Event):void
			{
				PopUpManager.addPopUp(_usersWindow,this,true);
				generateData();
			}
			
			protected function generateData():void
			{
				var users:Array = new Array();
				var totalRecords:uint = Math.round(Math.random()*100);
				var name:String;
				for (var i:uint = 0;i<totalRecords;i++)
				{
					name = "User"+i.toString();
					users.push({name:name,email:name+"@system.com"});
				}
				_usersWindow.users = users;
			}
		]]>
	</fx:Script>
	<s:VGroup verticalCenter="0" horizontalCenter="0">
		<s:Button horizontalCenter="0" verticalCenter="0" id="login" label="Login"/>
	</s:VGroup>
</s:Application>

 窗口文件UserWindow

<?xml version="1.0" encoding="utf-8"?>
<s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="400" height="300"
			   title="User Manager({_users.length}users)"
			   close="closeWindow()"
			   creationComplete="init()">
	<fx:Declarations>
		<!-- 非ビジュアルエレメント (サービス、値オブジェクトなど) をここに配置 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.managers.PopUpManager;
			
			[Bindable]
			private var _users:Array;
			public function get users():Array
			{
				return _users;
			}
			public function set users(value:Array):void
			{
				_users = value;
			}
			protected function closeWindow():void
			{
				PopUpManager.removePopUp(this);
			}
			protected function init():void
			{
				if(isPopUp)
					PopUpManager.removePopUp(this);
			}
		]]>
	</fx:Script>
	<s:DataGrid id="usersList" verticalCenter="0" horizontalCenter="0" width="100%" height="100%" dataProvider="{new ArrayCollection(_users)}"/>
</s:TitleWindow>