最近的项目中使用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>
- 运行应用程序,试试看~
分享到:
相关推荐
Flex Mate框架swc包及Mate用法。
Mate flex framework在实际项目中的应用
mate flex 框架 基础教程,本资料比较全,看完能够比较全的掌握MATE用法
一个关于flex的框架,名字mate,比较小巧,上手容易
欢迎大家下载,多提宝贵意见!!!(*^__^*)
Mate是一个基于标签的,事件驱动的框架。这是一个小例子,用flex3可以直接打开运行
学习mate flex actionscript 的好资源。源代码.
华为 Mate 8 使用 指南 华为的使用指南 可供你参考 在
Download compiled library (SWC) version 0.9.1 - Flex 3 & 4 Mate is distributed under the Apache 2.0 license.
附件是关于 Flash/Flex 几个重要框架 Cairngorm、Mate、PureMVC以及Swiz 的典型例子,由 Tony Hillerson 提供 Homepage: http://insideria.com
华为Mate20手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20 位置图 点位图 位号图.pdf 华为Mate20 原理图 电路图.pdf 华为Mate20 注释图 故障标注 主板元器件位置图.pdf 华为Mate20 原厂图 维修流程...
华为Mate10手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate10 位置图 位号图 元件图.exe 华为Mate10 原理图 电路图.exe 华为Mate10 注释图 故障标注 主板元器件位置图.exe 华为Mate10 高级维修手册....
Haier海尔洗衣机EG100MATE3S使用说明书手册参数图解图示pdf电子版下载
华为Mate10手机原厂维修图纸 原理图 电路图 故障维修图(PDF版)华为Mate10 位置图 点位图 位号图.pdf 华为Mate10 原理图 电路图.pdf 华为Mate10 注释图 故障标注 主板元器件位置图.pdf 华为Mate10 高级维修手册.pdf...
华为Mate8手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate8 位置图 点位图 位号图.pdf 华为Mate8 原理图 电路图.pdf 华为mate8 注释图 故障标注 主板元器件位置图.pdf 华为mate8 故障维修流程图 GPS...
华为Mate20手机原厂维修图纸 原理图 电路图 元件图 手机故障维修图 华为Mate20 位置图 位号图 元件图.exe 华为Mate20 原理图 电路图.exe 华为Mate20 注释图 故障标注 主板元器件位置图.exe 华为Mate20 原厂图 维修...
Haier海尔洗衣机EG100MATE2S使用说明书手册参数图解图示pdf电子版下载
华为Mate7用户指南,详细描述了华为Mate7的参数和使用方法。
华为Mate10Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate10Pro 位置图 点位图 位号图.pdf 华为Mate10Pro 原理图 电路图.pdf 华为Mate10Pro 注释图 故障标注 主板元器件位置图.pdf 华为Mate10Pro ...
华为Mate20Pro手机原厂维修图纸 原理图 电路图 故障维修图(PDF版) 华为Mate20Pro 位置图 点位图 位号图.pdf 华为Mate20Pro 原理图 电路图.pdf 华为Mate20Pro 注释图 故障标注 主板元器件位置图1.pdf 华为Mate20Pro...