有时候我们需要让两个组件之间实现联动,并且在其中传递数据,自定义事件机制可以帮助我们比较优雅的实现这种需要.
下面的例子,是打算实现一个列表和一个编辑框的联动.
编辑框代码
<?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>
分享到:
相关推荐
下面我们将详细探讨Flex自定义组件、事件处理以及如何通过示例进行学习。 1. Flex自定义组件:Flex允许开发者通过继承现有的UIComponent或者更具体的类(如Button、Canvas等)来创建自定义组件。这样可以定义独特的...
10. **使用ExternalInterface与JavaScript通信**:在Flex与HTML页面交互时,可以利用ExternalInterface接口将数据传递给JavaScript,或者从JavaScript接收数据。 理解并熟练运用这些方法,能让你在Flex开发中更加...
Flex支持两种类型的事件:系统内置的事件和用户自定义事件。内置事件由Flex框架提供,用于处理常见的交互场景;自定义事件则允许开发者根据具体需求创建特定类型的事件来扩展Flex的应用能力。 在Flex中,事件模型...
Flex OSGi实现,以...它利用OSGi的模块化和服务注册机制,使得Flex组件可以方便地进行数据交互,提高了应用程序的可扩展性和可维护性。通过学习和应用Potomac,开发者可以构建出更加动态、模块化的富互联网应用。
总之,Flex入门需要掌握数据绑定的概念,学会使用HTTPService进行服务器通信,理解如何创建和处理自定义事件。同时,熟悉MXML和ActionScript的结合使用,以及Flex组件库的运用,也是成为Flex开发者的必备技能。通过...
这个主题聚焦于“Flex中主程序与弹出窗口之间的数据传递”。在Flex应用开发中,经常需要在主应用程序和弹出窗口(如对话框)之间交换数据,以便实现更加复杂的交互逻辑。 一、Flex中的组件层次结构 在Flex中,应用...
通过这种方式,你可以充分利用Flex的事件驱动特性,同时利用Java的强大后端能力,实现丰富的交互式应用程序。记住,实际应用可能需要处理更复杂的事件流和数据转换,但这个例子应该能为你提供一个良好的起点。
本文将深入探讨如何在Flex的TitleWindow父子页面之间进行有效的事件派发,以及背后的事件机制,这对于理解和优化Flex应用中的交互逻辑至关重要。 ### 1. Flex TitleWindow与事件派发基础 TitleWindow作为Flex中的...
- **LCDS事件模型**:如何在Flex与LCDS之间传递事件,如数据更改事件、连接状态事件等。 - **数据服务事件**:如`result`、`fault`事件,用于处理远程调用的成功或失败。 - **实时数据更新**:利用LCDS的实时推送...
实现数据拖拽的关键在于利用Flex的DragManager和DropManager类。DragManager负责处理拖动的启动、执行和结束,而DropManager则管理目标区域的接收和响应。在两个DataGrid之间进行数据拖放时,我们需要为源DataGrid的...
2. 春天处理:SpringMVC接收到请求后,通过XMLMessageConverter解析XML数据,然后将数据传递给Controller的方法。 3. 业务处理:Controller根据接收到的XML数据执行相应的业务逻辑,可能包括数据库操作或其他服务...
Flex事件是Adobe Flex框架中的一个重要组成部分,它允许开发者在应用程序的不同组件之间传递信息,实现对用户交互、数据更新以及应用程序状态变化的响应。在Flex应用中,事件处理是构建动态和响应式用户界面的关键。...
Flex事件机制是Adobe Flex应用程序开发中的关键组成部分,它允许组件之间进行有效的通信和状态管理。在Flex中,事件是用于传递信息的结构化对象,它们从一个源头(通常是组件)发送到其他感兴趣的接收者(监听器)。...
通过定义事件、接口或利用Flex提供的服务,这些模块可以相互交互,完成特定任务。 为了进一步理解并实践Flex模块间通信,建议查看示例代码,分析其结构和通信机制。同时,查阅Flex官方文档和其他开发者的经验分享,...
Flex手机项目代码是一个基于Adobe Flex技术的移动应用开发实例,主要展示了如何利用Flex来构建一个包含数据列表、参数传递和动态组件创建功能的手机应用程序。在这个项目中,开发者"Wanger"使用了Flex SDK,可能结合...
两者之间的互操作性使得开发者能够充分利用Flex的图形和动画能力以及JavaScript的灵活性和浏览器兼容性。 标题中的"Flex和JS的相互调用,传参"指的是在Flex应用中调用JavaScript函数,或者在JavaScript中调用Flex...
总的来说,"flex blazeds 传递对象实例"是一个关于Flex客户端如何利用BlazeDS与Java服务器进行高效数据交换的话题。这个过程涉及到服务器端的Java类定义、BlazeDS配置、客户端的RemoteObject使用,以及可能的自定义...
5. **Event**:定义了应用程序中的自定义事件,用于在组件之间传递消息。 6. **Proxy**:作为客户端和服务器之间的中间层,处理远程调用和数据转换。 在这个Flex Cairngorm Java实例中,Java技术如J2EE(Java 2 ...