`
tomorrow009
  • 浏览: 46054 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

利用flex自定义事件进行数据传递

    博客分类:
  • flex
阅读更多
有时候我们需要让两个组件之间实现联动,并且在其中传递数据,自定义事件机制可以帮助我们比较优雅的实现这种需要.


下面的例子,是打算实现一个列表和一个编辑框的联动.

编辑框代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.controls.Alert;
			private function init():void
			{
				DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
			}
			
			private function dataChangeListener(event:DummySelectEvent):void
			{
				var data = event.data;
				//Alert.show(event.data.name);
				detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
			}
		]]>
	</mx:Script>
	
	<mx:HBox x="104" y="126" width="1000">
		<ns1:List>
		</ns1:List>
		<ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
		</ns1:Detail>
	</mx:HBox>
	
</mx:Application>

列表代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="300" xmlns:my="my.*" creationComplete="initList()" xmlns:local="*">
	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.events.FlexEvent;
			import my.Dummy;
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			private var dummyList:ArrayCollection;
			
			private var itemSelected:Boolean = false;
			
			private function initList():void{
				dummyList = new ArrayCollection();
				for( var i:Number = 0;i<10;i++)
				{
					var dummy:Dummy = new Dummy();
					dummy.name = "name"+i;
					dummy.email = "email"+i;
					dummy.mobile = "mobile" +i;
					dummy.address = "address"+i;
					dummy.qq = "qq"+i;
					dummy.msn = "msn"+i;
					
					dummyList.addItem(dummy);
					
				}
				dataGrid.dataProvider = dummyList;
			}
			
			private function itemSelect():void
			{
				var dataChangeEvent:DummySelectEvent = new DummySelectEvent(dataGrid.selectedItem,DummySelectEvent.SELECTED_DATA_CHANGE);
				DummySelectEvent.dispatcher.dispatchEvent(dataChangeEvent);
			}
			
			private function deleteItem():void{
				Alert.show("确定要删除?");
			}
			
		]]>
	</mx:Script>
	<!--<mx:Label id="selectedItem" visible="false" data = "{dataGrid.selectedItem}" dataChange="itemSelect()"/>-->
	<mx:Spacer height="2">
	</mx:Spacer>
	<local:ListBar>
	</local:ListBar>
	<mx:DataGrid id="dataGrid" 
		x="0" y="0" width="100%" height="100%"
		data="{dataGrid.selectedItem}"
		dataChange="itemSelect()" >
		<mx:columns>
			<mx:DataGridColumn headerText="name" dataField="name"/>
			<mx:DataGridColumn headerText="email" dataField="email"/>
			<mx:DataGridColumn headerText="mobile" dataField="mobile"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:HBox width="100%">
		<mx:Button label="删除选中" enabled="{itemSelected}" click="deleteItem()"/>
	</mx:HBox>
	
</mx:Panel>

DummyVO代码
package my
{
	[Bindable]
	public class Dummy
	{
		public function Dummy()
		{
			
		}
		
		public var name:String;
		public var mobile:String;
		public var email:String;
		
		public var qq:String;
		public var msn:String;
		public var address:String;
		
	}
}

自定义事件代码
package my
{
	import flash.events.Event;
	import flash.events.EventDispatcher;
	
	public class DummySelectEvent extends Event
	{
		public var data:Object;
		public static var SELECTED_DATA_CHANGE:String = "selectedDataChange";
		public static const dispatcher:EventDispatcher=new EventDispatcher();
		public function DummySelectEvent(data:Object,type:String)
		{
			super(type,true,false);
			this.data = data;	
		}
		
		override public function clone():Event
        {
            return new DummySelectEvent(data,type);
        }
	}
}

主程序代码
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*" creationComplete="init()">

	<mx:Script>
		<![CDATA[
			import my.DummySelectEvent;
			import mx.controls.Alert;
			private function init():void
			{
				DummySelectEvent.dispatcher.addEventListener(DummySelectEvent.SELECTED_DATA_CHANGE,dataChangeListener);
			}
			
			private function dataChangeListener(event:DummySelectEvent):void
			{
				var data = event.data;
				//Alert.show(event.data.name);
				detailPanel.changeMode(Detail.EDIT_SIMPLE,data);
			}
		]]>
	</mx:Script>
	
	<mx:HBox x="104" y="126" width="1000">
		<ns1:List>
		</ns1:List>
		<ns1:Detail id="detailPanel" x="104" y="135" widthInit="0" widthAdvanced="600">
		</ns1:Detail>
	</mx:HBox>
	
</mx:Application>


0
0
分享到:
评论

相关推荐

    flex自定义组件事件DEMO

    下面我们将详细探讨Flex自定义组件、事件处理以及如何通过示例进行学习。 1. Flex自定义组件:Flex允许开发者通过继承现有的UIComponent或者更具体的类(如Button、Canvas等)来创建自定义组件。这样可以定义独特的...

    Adobe Flex Builder 3组件之间的传递参数

    10. **使用ExternalInterface与JavaScript通信**:在Flex与HTML页面交互时,可以利用ExternalInterface接口将数据传递给JavaScript,或者从JavaScript接收数据。 理解并熟练运用这些方法,能让你在Flex开发中更加...

    Flex事件机制详细说明

    Flex支持两种类型的事件:系统内置的事件和用户自定义事件。内置事件由Flex框架提供,用于处理常见的交互场景;自定义事件则允许开发者根据具体需求创建特定类型的事件来扩展Flex的应用能力。 在Flex中,事件模型...

    flex osgi实现-potomac 实现页面与页面间数据传递和页面间各部分的数据传递

    Flex OSGi实现,以...它利用OSGi的模块化和服务注册机制,使得Flex组件可以方便地进行数据交互,提高了应用程序的可扩展性和可维护性。通过学习和应用Potomac,开发者可以构建出更加动态、模块化的富互联网应用。

    FLEX简单的入门快速总结

    总之,Flex入门需要掌握数据绑定的概念,学会使用HTTPService进行服务器通信,理解如何创建和处理自定义事件。同时,熟悉MXML和ActionScript的结合使用,以及Flex组件库的运用,也是成为Flex开发者的必备技能。通过...

    Flex--主程序与弹出窗口之间传递数据

    这个主题聚焦于“Flex中主程序与弹出窗口之间的数据传递”。在Flex应用开发中,经常需要在主应用程序和弹出窗口(如对话框)之间交换数据,以便实现更加复杂的交互逻辑。 一、Flex中的组件层次结构 在Flex中,应用...

    FLEX事件监听样例(JAVA代码)

    通过这种方式,你可以充分利用Flex的事件驱动特性,同时利用Java的强大后端能力,实现丰富的交互式应用程序。记住,实际应用可能需要处理更复杂的事件流和数据转换,但这个例子应该能为你提供一个良好的起点。

    Flex TitleWindow父子页面的事件派发

    本文将深入探讨如何在Flex的TitleWindow父子页面之间进行有效的事件派发,以及背后的事件机制,这对于理解和优化Flex应用中的交互逻辑至关重要。 ### 1. Flex TitleWindow与事件派发基础 TitleWindow作为Flex中的...

    精通flex3.0 精通 Flex3.0 LCDS ActionScript 事件

    - **LCDS事件模型**:如何在Flex与LCDS之间传递事件,如数据更改事件、连接状态事件等。 - **数据服务事件**:如`result`、`fault`事件,用于处理远程调用的成功或失败。 - **实时数据更新**:利用LCDS的实时推送...

    flex表格间数据的拖拽

    实现数据拖拽的关键在于利用Flex的DragManager和DropManager类。DragManager负责处理拖动的启动、执行和结束,而DropManager则管理目标区域的接收和响应。在两个DataGrid之间进行数据拖放时,我们需要为源DataGrid的...

    Flex+SpringMVC HttpService 发送XML数据

    2. 春天处理:SpringMVC接收到请求后,通过XMLMessageConverter解析XML数据,然后将数据传递给Controller的方法。 3. 业务处理:Controller根据接收到的XML数据执行相应的业务逻辑,可能包括数据库操作或其他服务...

    关于flex事件的讲解

    Flex事件是Adobe Flex框架中的一个重要组成部分,它允许开发者在应用程序的不同组件之间传递信息,实现对用户交互、数据更新以及应用程序状态变化的响应。在Flex应用中,事件处理是构建动态和响应式用户界面的关键。...

    flex-event.zip_flex

    Flex事件机制是Adobe Flex应用程序开发中的关键组成部分,它允许组件之间进行有效的通信和状态管理。在Flex中,事件是用于传递信息的结构化对象,它们从一个源头(通常是组件)发送到其他感兴趣的接收者(监听器)。...

    Flex Module间通信

    通过定义事件、接口或利用Flex提供的服务,这些模块可以相互交互,完成特定任务。 为了进一步理解并实践Flex模块间通信,建议查看示例代码,分析其结构和通信机制。同时,查阅Flex官方文档和其他开发者的经验分享,...

    Flex手机项目代码

    Flex手机项目代码是一个基于Adobe Flex技术的移动应用开发实例,主要展示了如何利用Flex来构建一个包含数据列表、参数传递和动态组件创建功能的手机应用程序。在这个项目中,开发者"Wanger"使用了Flex SDK,可能结合...

    Flex和JS的相互调用,传参

    两者之间的互操作性使得开发者能够充分利用Flex的图形和动画能力以及JavaScript的灵活性和浏览器兼容性。 标题中的"Flex和JS的相互调用,传参"指的是在Flex应用中调用JavaScript函数,或者在JavaScript中调用Flex...

    flex blazeds 传递对象实例

    总的来说,"flex blazeds 传递对象实例"是一个关于Flex客户端如何利用BlazeDS与Java服务器进行高效数据交换的话题。这个过程涉及到服务器端的Java类定义、BlazeDS配置、客户端的RemoteObject使用,以及可能的自定义...

    flex+cairngorm+java 实例

    5. **Event**:定义了应用程序中的自定义事件,用于在组件之间传递消息。 6. **Proxy**:作为客户端和服务器之间的中间层,处理远程调用和数据转换。 在这个Flex Cairngorm Java实例中,Java技术如J2EE(Java 2 ...

Global site tag (gtag.js) - Google Analytics