flex父子页面交互实现（触发事件）

你的名字 2022-06-02 05:42 189阅读 0赞

昨天使用了方法回调的方式实现的，今天写了个以手动触发自定义事件，在分派回的事件流中携带交互数据对象的方式实现父子页面交互

首先自定义一个事件,myEvent.as文件

package
    {
    	import flash.events.Event;
    
    	public class MyEvent extends Event
    	{
    		public static const CONFIGEDITE:String="configedit";
    		public var obj:Object;
    		public function MyEvent(type:String,obj:Object)
    		{
    			this.obj = obj;
    			super(type);
    		}
    		override public function clone():Event { 
    			var e:MyEvent = new MyEvent(CONFIGEDITE,obj);
    			return e;
    		}
    	}
    }

父页面,test.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:Script>
    
    		<![CDATA[
    			import mx.managers.PopUpManager;
    			
    			
    			[Bindable]
    			public var testForm:TestForm = new TestForm; //定义为全局的，这样就只弹一个窗口了
    			
    			
    			public function jump():void{
    				//弹出窗口
    				PopUpManager.addPopUp(testForm,this,false);
    				//添加自定义事件监听,当触发该事件将执行里面的方法
    				testForm.addEventListener(MyEvent.CONFIGEDITE,function(e:MyEvent):void{
    					showLable.text = e.obj.name;
    				});
    				//组装父页面要传到子页面的对象
    				var obj:Object = new Object;
    				obj.name = valueText.text;
    				testForm.initPage(obj);
    			}
    		]]>
    	</fx:Script>
    	<s:VGroup horizontalAlign="center" verticalAlign="middle" width="80%" height="200">
    		<s:Label text="我是父页面，子页面传过来的值为："/>
    		<s:Label id = "showLable"/>
    		<s:TextInput id="valueText"/>
    		<s:Button label="点击将值传递到子页面" click="jump()"/>
    	</s:VGroup>
    </s:Application>

子页面,TestForm.mxml文件

<?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" minWidth="400" minHeight="200"
    			   title="子页面"
    			   close="close()"
    			   >
    	<fx:Script>
    		<![CDATA[
    			import mx.managers.PopUpManager;
    			
    			//关闭
    			public function close():void{
    				PopUpManager.removePopUp(this);
    			}
    			
    			//初始化
    			public function initPage(obj:Object):void{ 
    				showLabel.text = obj.name; 
    			} 
    
    			
    			public function goBack():void{
    				//组装要传到父页面的对象
    				var obj:Object = new Object;
    				obj.name = valueText.text;
    				//手动触发指定事件
    				var myEvent:MyEvent = new MyEvent(MyEvent.CONFIGEDITE,obj);
    				//抛出事件
    				this.dispatchEvent(myEvent);
    			}
    		]]>
    	</fx:Script>
    	<s:VGroup horizontalAlign="center" verticalAlign="middle" width="80%" height="200">
    		<s:Label text="我是子页面,父页面传过来的值为："/>
    		<s:Label id="showLabel" />
    		<s:TextInput id="valueText"/>
    		<s:Button label="点击将值传递到父页面" click="goBack()"/>
    	</s:VGroup>
    </s:TitleWindow>

最后上截图~

![1345652303_8407.jpg][]

这样的方法，如果不用传递数据对象的话，只是需要标识的话，只需要在自定义事件里写不同的事件，然后手动触发不同的事件，根据触发不同的事件执行不同的方法即可。

[1345652303_8407.jpg]: https://img-my.csdn.net/uploads/201208/23/1345652303_8407.jpg