Flex中将子窗口中添加的数据即时显示在父窗口中的方法

Flex开发中遇到一个问题，就是在弹出的子窗口中怎么将添加的内容即时地显示在父窗口中呢？一般的思路是添加了数据后父窗口再从数据源中读取数据展现出来，可是这麻烦且不说，还增加了服务器的负担。

在网上的一个论坛的帖子里我找到了解决此问题的方法，那就是在父窗口中给子窗口添加一个监视器，当子窗口有变化时将触动此事件，然后再处理此过程。好了，思路就说到这，下面让我们开始这神奇的旅程！

首先是父窗口程序：RefreshData.mxml，代码如下：

<?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" minWidth="955" minHeight="600">
	<fx:Style source="RefreshData.css"/>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import event.MyEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			//绑定一个数据源
			[Bindable]
			var ac:ArrayCollection=new ArrayCollection(
			[{name:"张三",age:18,sex:"男"},{name:"李四",age:20,sex:"女"},{name:"王五",age:22,{name:"马六",sex:"男"}
			]);
			var child:Child=new Child();  //创建一个子窗口的实例
			protected function button1_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				PopUpManager.addPopUp(child,this,true);   //添加子窗口
				PopUpManager.centerPopUp(child);   //让添加的子窗口居中显示
				child.addEventListener(MyEvent.SAVE_OK,saveSuccess);  //最为重要的一步，给子窗口添加一个监听器
				child.name2.text="";    //确保每一次添加子窗口时“姓名”文本域为空，下面雷同
				child.age.text="";
				child.sex.text="";
			}
			//监听器的函数
			function saveSuccess(e:MyEvent):void{
				ac.addItem(e.data);    //从监听程序中取得数据并添加到表格中
				Alert.show("保存成功！","提示",Alert.OK);  
			}
		]]>
	</fx:Script>
	<mx:AdvancedDataGrid id="adg1" x="183" y="92" width="442" designViewDataType="flat" dataProvider="{ac}">
		<mx:columns>
			<mx:AdvancedDataGridColumn dataField="name" headerText="姓名"/>
			<mx:AdvancedDataGridColumn dataField="age" headerText="年龄"/>
			<mx:AdvancedDataGridColumn dataField="sex" headerText="性别"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
	<s:Button x="358" y="336" width="152" height="30" label="再添加一个" click="button1_clickHandler(event)"/>
</s:Application>

其中子窗口组件：Child.mxml,代码如下：

<?xml version="1.0" encoding="utf-8"?>
<s:Group 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" fontSize="18">
	
	<fx:Script>
		<![CDATA[
			import event.MyEvent;
			
			import mx.events.CloseEvent;
			import mx.managers.PopUpManager;
			protected function add_clickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				var obj:Object=new Object();
				obj.name=name2.text;
				obj.age=age.text;
				obj.sex=sex.text;
				this.dispatchEvent(new MyEvent(MyEvent.SAVE_OK,obj));
				PopUpManager.removePopUp(this);
			}
			//下面是关闭窗口的执行事件
			protected function addUser_closeHandler(event:CloseEvent):void
			{
				// TODO Auto-generated method stub
				this.addUser.visible=false;
				PopUpManager.removePopUp(this);
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<s:TitleWindow id="addUser" width="401" height="300" close="addUser_closeHandler(event)" title="添加用户" >
		<s:Label x="147" y="9" width="119" height="34" fontSize="25" fontWeight="bold" text="用户添加"
				 verticalAlign="middle"/>
		<s:TextInput id="name2" x="99" y="60"/>
		<s:Label x="25" y="61" height="27" text="姓名：" verticalAlign="middle"/>
		<s:Label x="25" y="112" text="年龄："/>
		<s:TextInput id="age" x="99" y="112"/>
		<s:TextInput id="sex" x="99" y="160"/>
		<s:Label x="28" y="169" text="性别："/>
		<s:Button id="add" x="172" y="219" height="33" label="添加" click="add_clickHandler(event)"/>
	</s:TitleWindow>
	
</s:Group>

一个ActionScript文件：MyEvent.as

package event
{
	import flash.events.Event;
	
	public class MyEvent extends Event
	{
		public static const SAVE_OK:String="saveOk";
		private var _data:Object;
		public function MyEvent(type:String,data:Object=null,bubbles:Boolean=false,cancelable:Boolean=false)
		{
			this._data=data;
			super(type,bubbles,cancelable);
		}
		
		public function get data():Object{
		 return _data;
		}
		public function set data(value:Object):void{
		 	_data=value;
		}
	}
}

再就是一个CSS文件RefreshData.css，代码如下：

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";


global
{
	font-size: 18;
	font-family: "中易宋体";
}

好了，就这些代码了，详细的讲解在代码中以注释的形式出现，不是很难理解！

这是我的整个工程图：

下面是程序执行的截图：

?进入程序时：

点击“再添加一个”，弹出“添加用户”，然后添加数据：

点击“添加”按钮时，会提示你成功添加，刚才添加的数据即时显示出来了，是不是很给力啊？

本文已移至http://www.it161.com/