flex中自定义事件--------利用元数据标签
2010-09-07 15:32
381 查看
使用 <mx:Metadata> 标签在 MXML 文件中插入元数据标签。元数据标签向 Flex 编译器提供说明 MXML 组件在 Flex 应用程序中的使用方式的信息。元数据标签并不会编译到可执行代码中,而是提供信息来控制如何编译代码的各个部分。
请注意,在 <mx:Metadata> 块中只能插入元数据标签;不能插入 MXML 或 ActionScript 代码。
例如,可以创建定义新事件的 MXML 组件。若要使该事件为 Flex 编译器所知,以便可以在 MXML 中引用该事件,请将 [Event] 元数据标签插入到组件中。
FLEX 系统提供的事件与DOM的事件基本上完全一致 但是和传统的WEB开发不同的是 可以为自定义的组件添加自定义的事件 比如我们做了一个组件是一个登录框 当点击登录按钮的时候触发我们自定义的事件 比如叫"login"事件 虽然这个login事件 归根结底还是某个按钮的click事件 但自定义的事件比传统的事件有什么好处呢 :一是事件的名字是自定义的 可以形象的表示这个事件本身 而不像以前还要关心是哪个按钮按了一下等等 这样为组件与组件的通讯提供便利 下面的例子中自定义了一个组件叫testComponent , 这个自定义的组件中有一个按钮和一个输入框, 当按下这个按钮的时候 新建一个新的事件叫shareData
并且shareData事件被声明为一个textEvent , textEvent可以通过text属性来传递数据(textInput控件的值) 。
EventTest.mxml中引用了这个自定义组件testComponent 并捕获testComponent中的自定义事件shareData, 输出testComponent 中textInput控件的字符串
testComponent.mxml :
eventTest.mxml :
请注意,在 <mx:Metadata> 块中只能插入元数据标签;不能插入 MXML 或 ActionScript 代码。
<?xml version="1.0"?> <mx:TextArea xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Metadata> [Event("enableChange")] </mx:Metadata> <mx:Script> <!--[CDATA[ // Import Event class. import flash.events.Event; // Define class properties/methods private var _enableTA:Boolean; // Add the [Inspectable] metadata tag before the individual property. [Inspectable(defaultValue="false")] public function set enableTA(val:Boolean):void { _enableTA = val; this.enabled = val; // Define event object, initialize it, then dispatch it. var eventObj:Event = new Event("enableChange"); dispatchEvent(eventObj); } ]]--> </mx:Script> </mx:TextArea>
例如,可以创建定义新事件的 MXML 组件。若要使该事件为 Flex 编译器所知,以便可以在 MXML 中引用该事件,请将 [Event] 元数据标签插入到组件中。
FLEX 系统提供的事件与DOM的事件基本上完全一致 但是和传统的WEB开发不同的是 可以为自定义的组件添加自定义的事件 比如我们做了一个组件是一个登录框 当点击登录按钮的时候触发我们自定义的事件 比如叫"login"事件 虽然这个login事件 归根结底还是某个按钮的click事件 但自定义的事件比传统的事件有什么好处呢 :一是事件的名字是自定义的 可以形象的表示这个事件本身 而不像以前还要关心是哪个按钮按了一下等等 这样为组件与组件的通讯提供便利 下面的例子中自定义了一个组件叫testComponent , 这个自定义的组件中有一个按钮和一个输入框, 当按下这个按钮的时候 新建一个新的事件叫shareData
并且shareData事件被声明为一个textEvent , textEvent可以通过text属性来传递数据(textInput控件的值) 。
EventTest.mxml中引用了这个自定义组件testComponent 并捕获testComponent中的自定义事件shareData, 输出testComponent 中textInput控件的字符串
testComponent.mxml :
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" height="300"> <!-- 声明本组件将抛出的事件 --> <mx:Metadata> [Event(name="shareData",type="flash.events.TextEvent")] </mx:Metadata> <mx:Script> <!--[CDATA[ private function fnOnClick_testComp():void { //event 构造函数 至少传递一个事件名 var event:TextEvent = new TextEvent("shareData"); event.text = myTxtInput.text; //使用disptchEvent 来抛出创建的事件 dispatchEvent(event); } ]]--> </mx:Script> <mx:Label text="This is the Test component" /> <mx:TextInput id="myTxtInput"/> <!-- 当点击按钮时进行自定义事件 --> <mx:Button label="clickMe" click="fnOnClick_testComp()" /> </mx:VBox>
eventTest.mxml :
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:view="view.*"> <mx:Script> <!--[CDATA[ import mx.controls.Alert; private function fnOnShareData(event:TextEvent):void { Alert.show("event has been use. event.text => " + event.text ); } ]]--> </mx:Script> <!-- 调用我们自定义的组件 并处理它的shareData事件 就像click事件一样使用 --> <view:testComponent shareData="fnOnShareData(event)"/> </mx:Application>
相关文章推荐
- Flex中利用mx:Sequence标签实现顺序效果(Sequencing effects)以及划变效果(Wipe effects)的例子
- Flex 中的元数据标签
- Flex中如何利用mx:HTTPService标签读取文本文件中的name/value这样的一对数据并显示在DataGrid中的例子
- Flex 元数据标签
- Flex中的元数据标签
- Flex元数据标签之[IconFile]
- Flex中如何利用canDropLabels样式,移除图表中一些水平轴线上标签
- Flex 2 中的元数据标签(转载)
- Flex 中利用标签使一张图绕任一点旋转的例子
- Flex中如何利用getTabAt函数遍历TabNavigator容器的各个Tab,并且通过labelPlacement属性设置标签位置
- Flex元数据标签之[Event]
- Flex中如何利用ActionScript代替mx:Sequence标签实现顺序效果
- Flex 中的元数据标签
- Flex元数据标签之[Style]
- Flex中如何利用Style Sheet和<mx:style>标签嵌入图片/图标的例子
- Flex中的元数据标签
- Flex中如何利用getTabAt函数遍历TabNavigator容器的各个Tab,并且通过labelPlacement属性设置标签位置
- 利用AS3编译器为程序自动添加帧: 方式一:[Frame]元数据标签的应用
- Flex中的元数据标签总结
- Flex Metadata tags 元数据标签