Flex4 弹出窗口的数据交互

msyspacer

浏览: 9918 次
性别:
来自: 南京

最近访客更多访客>>

zhouvsjian

liangchai2008

zdsonline

chenling123

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

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>

分享到：

Flex4 自定义弹出提醒框 | Flex4 选项卡TabNavigator的使用

2013-12-05 10:03
浏览 676
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Flex4 弹出窗口的数据交互

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Flex4 弹出窗口的数据交互

评论

发表评论

相关推荐

Flex4 画面常见问题备忘

Flex 使用filter过滤数据

Flex4 拖放功能实现

Flex4 state状态设置

Flex4 自定义弹出提醒框

Flex4 可折叠的面板控件Accordion

Flex4 选项卡TabNavigator的使用

Flex4 ViewStack使用

Flex4 菜单导航定制

Flex4 菜单导航数据源配置

Flex4 停止传播事件

Flex4 创建自定义Event

最近访客更多访客>>