三.绑定机制
在我们了解了事件机制后,那么理解绑定就不难了。绑定其实也是事件机制的运用
1. 什么是绑定
绑定的原理就是事件,在被绑定的对象上增加了改变事件的监听,一旦某个被绑定对象改变后,就会分发一个“propertyChange”事件(默认的,也可以改变成自己定义的事件),在其他组件中,会有propertyChange的事件监听,当捕捉到该事件后,则会去更新组件的属性并显示。
绑定的作用在于,将Flex中的变量、类、方法等与组件的值进行绑定。例如,一个变量如果被绑定后,那么引用该变量的组件的相关属性也会发生改变。我们用一个实例来表示
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" xmlns:comp
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var isSelected:Boolean;
private function clickHandler(e:MouseEvent){
//Alert.show(e.currentTarget.toString());
isSelected=isSelected?false:true; //这句话的意思是如果isSelected为true,改变它为false,如果它为false,改变它为true;
Alert.show(isSelected.toString());
}
]]>
</mx:Script>
<mx:Button id="testBtn" click="clickHandler(event)" label="测试" />
<mx:CheckBox x="60" selected="{isSelected}" />
</mx:Application>
上述程序的效果就是,当点击button时,button不是直接改变checkbox的选中状态,而是改变isSelected这个变量,由于isSelected是被绑定了的,那么会关联的改变CheckBox的选中状态。
这样看起来有些多此一举,完全可以直接改变checkbox的selected属性,我只是为了演示一下效果。如果说你的checkbox是动态构造的上百个,你不会去一个个的改变他吧。
因此,我们多数会将一个数据源进行绑定声明,这样引用了这个数据源的控件,比如datagrid,在数据源发生了改变时,即使你不重新设置dataProvider,列表的数据也会刷新。当然,还有很多应用等待你去尝试。
如果这个代码中取消了[Bindable]的声明,会怎么样?isSelected不会改变了吗?
isSelected会改变,我们alert出来的结果也会显示结果改变了,但是checkbox的选择状态不会改变,因为当一个组件由创建到最终显示出来时是经过很多方法的,比如addChild,commitProperties,updateDisplayList等,updataDisplayList则是类似刷新显示效果一样的方法。
仅仅改变属性,而不去更新显示效果那么组件不会因为属性的改变而发生任何变化。
绑定的原理也是利用的事件分发。更复杂的绑定有待你去自己发现了
四. 自定义事件的分发
这部分就不长篇大论了,因为各位应该已经掌握了事件的原理,因此贴出演示源码,并进行些简单的解释。
1. 自定义事件 components/MyEventTest.as
package components
{
import mx.events.FlexEvent;
public class MyEventTest extends FlexEvent
{
public static const ONCHANGE:String = "onChange";
public var eventInfo:String; //自定义的事件信息
public function MyEventTest(s:String){
super(s); //如果在构造时不设bubbles,默认是false,也就是不能传递的。
eventInfo="这个事件是:"+s;
}
}
}
2. 自定义组件 components/ComponentForEvent.as
package components
{
import flash.events.EventDispatcher;
//这个就是声明事件注册通道的方法了。name是事件对应的名称,也就是之前提到的type。Type是该事件的类
[Event(name="onChange", type="components.MyEventTest")]
public class ComponentForEvent extends EventDispatcher
{
private var name:String;
public function changeName(newName:String){
this.name=newName;
dispatchEvent(new MyEventTest(MyEventTest.ONCHANGE) );
}
}
}
3. App.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp
>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private function changeName(){
cfe.changeName("新名称");
}
]]>
</mx:Script>
<mx:Button id="testBtn" click=" changeName ()" label="测试" />
<components:ComponentForEvent
id="cfe" />
</mx:Application>
分享到:
相关推荐
关于flex事件的讲解 一. 引 很多新人对Flex的事件机制都不太熟悉,在使用过程中难免会出现各种问题,这是一个非常普遍的问题,为了更快更好的帮助大家,将介绍一下Flex中事件的各种机制和用法。 Flex的精髓之一...
Flex事件讲解 在Flex开发中,事件处理是构建交互式用户界面的重要组成部分。Flex是一个开源的、基于ActionScript的框架,用于创建富互联网应用程序(RIA)。它提供了丰富的组件库和强大的事件模型,使得开发者能够...
Flex事件机制是Adobe Flex框架中的核心组成...通过这份资料“关于flex事件的讲解.pdf”,读者将能够全面掌握Flex事件机制,包括如何创建、监听和处理事件,以及如何优化事件性能,为构建富互联网应用程序打下坚实基础。
教程深入介绍了Flex的核心组件、数据绑定、事件处理、自定义控件开发、网络通信、以及如何利用Flex与后端Web服务器(如SQL数据库服务器)进行有效交互,为开发者提供了全面的技能提升路径。 通过上述分析,我们可以...
本资料集包含的“flex 入门讲解 ppt”旨在帮助初学者快速掌握Flex的基础知识和应用技巧。 在Flex中,ActionScript是主要的编程语言,它是基于ECMAScript的一个面向对象的语言,具有强大的功能,可以用来实现复杂的...
在本讲解中,我们将深入探讨Flex开发的关键知识点,并通过具体的开发案例进行实战演示。 1. **Flex SDK**:Flex软件开发工具包包含了创建Flex应用程序所需的所有组件和库。它包括ActionScript编译器、Flex框架库、...
如何接收事件?如何做到AS3.0的标准事件编程? 类似JAVA的监听或观察者模式 Event改变的部分很多,正在想怎样用一个有条理的方式来讲解Event和它相关的诸多内容,让我们感到比较容易理解,记忆和接受。
### 深入浅出讲解Flex中的事件机制 #### 一、引言 Flex是一种用于构建高度交互式、跨平台的Web应用程序的技术框架。它基于Adobe的Flash平台,并且使用ActionScript 3作为编程语言。Flex的核心优势在于其强大的用户...
6. **事件处理**:在Flex中,事件驱动编程是核心机制之一。教程会介绍如何监听和处理各种用户交互事件,以实现应用程序的响应式设计。 7. **动画与效果**:Flex允许创建丰富的视觉效果和动画,提升用户体验。教程会...
5. **事件处理**:介绍Flex事件模型,学习如何监听和处理用户交互以及程序运行过程中的事件。 6. **状态管理**:讲解如何利用Flex的状态管理功能来改变应用程序的不同视图或阶段,比如加载、登录、主界面等。 7. *...
### Flex控件详解 #### 一、概述 在Flex开发中,控件是构建界面的基础元素,通过不同的控件组合可以实现丰富的用户交互界面。本文将详细介绍几个常用的Flex控件,包括它们的基本功能、用途以及如何使用这些控件来...
4. **事件处理**:解释Flex中的事件模型,如何监听和处理用户交互产生的事件。 5. **服务连接**:介绍如何使用Flex与服务器进行通信,包括HTTPService、WebService和AMF等数据交换格式。 6. **动画和效果**:讲解...
Flex基础应用 Flex基础应用 Flex基础应用 Flex基础应用 Flex基础应用
Flex系列教程之三主要聚焦于通过一个简单的小程序来引导我们了解Adobe Flex这一开发平台。Flex是一种用于构建富互联网应用程序(RIA)的开源框架,它基于ActionScript编程语言和MXML标记语言,允许开发者创建交互性...
8. **学习资源**:压缩包中的电子教案PPT将提供深入浅出的讲解,帮助初学者理解Flex的基础概念和实践技巧。通过这些教程,开发者可以掌握如何使用Flex构建动态、富媒体的Web应用。 9. **开发工具**:Flex的开发通常...
Flex教程是中国天网联盟共享的一款资源,主要针对Adobe Flex这一技术进行深入的讲解。Flex是一种开源框架,主要用于构建富互联网应用程序(RIA),特别是在Web应用中,它可以提供丰富的用户界面和交互体验。本教程...
教会您flex的初级使用以及flex的一些概念!