最近的项目中使用Flex来实现前端的界面显示,那么不同Flex组件间的数据通信便是一个重要的问题。我使用了Mate实现不同组件之间的数据通信。具体方法如下:
- 新建Flex项目,在src中建立以下四个包:business、comp、event、map。
- 在 Mate官网 上下载mate的swc包,并添加到Flex工程的库中。
-
在events包中新建一个自定义事件类MyEvent.as
package events{ public class MyEvent extends Event { public static const CLICK_ITEM:String = "clickItem"; private var _item:String; public function MyEvent(type:String, bubbles:Boolean=true, cancelable:Boolean=false) { super(type, bubbles, cancelable); } public function get item():String { return _item; } public function set item(value:String):void { _item = value; } } }
- 在comp中建立两个组件comp1、comp2。其中comp1中有一个输入框和一个提交按钮,comp2中有一个文本显示框,用于显示comp1中发出的信息。
- 在business中建立MyController.as类,用于定义事件处理业务。
package business { public class MyController { [Bindable] public var data : String; [Bindable] public var type : String; [Bindable] public var name : String; public function setData():void{ if ( type == "clickItem" ) { data = "Hi,"+name; } } } }
- 在map中建立EventMaps.mxml,用于定义事件的映射。
<?xml version="1.0" encoding="utf-8"?> <EventMap xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="http://mate.asfusion.com/"> <mx:Script> <![CDATA[ import events.MyEvent; import comp.*; import business.*; ]]> </mx:Script> <EventHandlers type="{MyEvent.CLICK_ITEM}" > <MethodInvoker generator="{MyController}" method="setData"> <Properties type="{MyEvent.CLICK_ITEM}" name="{event.item}" /> </MethodInvoker> </EventHandlers> <Injectors target="{comp2}"> <PropertyInjector targetKey="data" source="{MyController}" sourceKey="dataStr" /> </Injectors> </EventMap>
- 在comp1中加入事件触发代码,comp1代码如下:
<?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="200" height="300"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ import event.MyEvent; private function clickHandler(event:Event):void{ var myEvent:MyEvent = new MyEvent(MyEvent.CLICK_ITEM,true); myEvent.item = txt.text; dispatchEvent(myEvent); } ]]> </fx:Script> <s:Button x="99" y="171" label="按钮" id="btn" click="clickHandler(event)"/> <s:TextInput x="86" y="87" id="txt"/> </s:Group>
- 在comp2中定义数据接收变量,comp2代码如下
<?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="200" height="300"> <s:layout> <s:BasicLayout/> </s:layout> <fx:Script> <![CDATA[ [Bindable] public var data:String; ]]> </fx:Script> <s:BorderContainer x="49" y="47" width="200" height="200" backgroundColor="#BEF2F8"> <s:Label x="35" y="47" width="127" height="67" id="lbl" text="{data}"/> <s:Label x="34" y="20" text="接收到的内容:"/> </s:BorderContainer> </s:Group>
- 在应用程序文件中加入组件布局以及EventMap的声明
<?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" xmlns:comp="comp.*" xmlns:map="map.*" minWidth="955" minHeight="600"> <fx:Declarations> <map:EventMaps /> </fx:Declarations> <s:HGroup> <comp:comp1 id="comp1" /> <comp:comp2 id="comp2" /> </s:HGroup> </s:Application>
- 运行应用程序,试试看~