BlogJava-samtiger-文章分类-flex基础

flex基础之事件机制

sam.chuan.yang — Wed, 14 Apr 2010 13:41:00 GMT

Flex事件执行流程：
第一阶段为：1:捕获阶段，第二阶段为：（2：目标阶段，3：冒泡阶段）。
所以：addEventListener方法注册的监听器有两种，第一种是处理捕获阶段的监听器（addEventListener的第三个参数useCapture 为true）
第二种就是处理目标和冒泡阶段的监听器（第三个参数useCapture 为false）。

捕获阶段流程：
Flex会去查找事件的触发源，它是通过根显示元素(root display object)逐层向下寻踪，并从上往下，依次触发这些节点的当前事件的处理函数（如果他们都用捕获阶段的监听器注册了这个事件）直到找到事件发起源头的父节点。并触发完父节点的这个事件为止。但它不会调用事件触发源节点的事件。
例如：
test.mxml文件下：
application节点--vbox（id=vb）节点--button（id=bt）节点。

如果在application的creationComplete中：将以上所有组件的click事件注册为捕获监听器。
如：
addEventListener(MouseEvent.CLICK, btnClick2, true);
vb.addEventListener(MouseEvent.CLICK, btnClick3,true);
bt.addEventListener(MouseEvent.CLICK, btnClick4,true);
如果在bt上点击，执行流程如下：
Flash Player会去查找事件的触发源（bt），通过根显示元素(root display object)（这里就是application）逐层向下寻踪，并从上往下，依次调用它们的click事件（如果他们都注册了捕获阶段的click事件）直到找到事件的发起源头的父节点，上面例子中会找到vb，并执行完vb的click事件后，就不再查找下边的bt组件和执行它的click事件。

第二阶段：
一般情况下，第二阶段的目标阶段，也是执行mxml文档的目标节点配置的那个事件处理函数，然后再处理对应的监听器（处理目标和冒泡阶段的监听器）注册的那个处理函数。

如果文档该节点，没有配置事件处理，则只执行通过addEventListener注册的事件处理方法，否则，如果配置了，就先执行mxml的配置函数处理，接着处理通过监听器注册的函数。

最后就是冒泡阶段：
这个阶段与捕获阶段相反，它会从从目标节点的父节点开始依次向上查找并执行父节点的mxml配置事件和通过监听器注册的事件处理函数。（这些处理函数也是用处理目标和冒泡阶段的监听器注册的）

也就是说：捕获阶段的事件触发只能是用处理这个阶段的监听器去注册。目标和冒泡阶段的事件触发，也只能是处理这个阶段的监听器去注册。如果，要让同一个事件，在捕获阶段或目标和冒泡阶段都执行的话，需要用addEventListener注册两次，将第三个参数useCapture true和false各设置一次。

sam.chuan.yang 2010-04-14 21:41 发表评论

flex基础之函数对象

sam.chuan.yang — Wed, 14 Apr 2010 02:41:00 GMT

Function
在ecamscript规范中。函数都是一个Function类型的对象，

而普通函数，和类定义的普通方法，以及类静态方法都有不同的地方。
相同点：
他们都是Function类的对象。
不同点：
在作函数绑定上，（函数绑定：就是将函数赋值给另一个函数，或者利用call或apply方法将函数绑定到别的对象上调用）
如果是类的普通函数绑定到别的对象上去，那么函数中的this，指的就是该类的实例，无论你是用call方式，还是将函数赋值给另一个对象，this始终指的就是先前函数所在的那个类的实例对象，而如果是一个普通函数，this指的就是当前绑定到的那个关联对象。
给对象动态创建的方法和普通函数一样，因为该方法其实就是将一个匿名的普通函数赋给对象的方法变量的，如：obj.fun=function(str){alert(str)} 。
绑定方式：比如obj.fun.call(obj2) 这个方式就是将fun函数绑定到obj2上执行
第二种方式： obj2.funName= obj.fun; obj2.funName();
为什么说第二种方式也是一种绑定，写个例子证明一下：
如果obj.fun()等价于obj.fun.call(obj);
如果：obj2.funName= obj.fun; //因为函数是Function类型的对象，那么obj2.funName和 obj.fun一样都是引用同一个对象。
那么obj2.funName（）也可等价于obj.fun.call(obj2);

说明一下：类的静态函数是定义类的时候就存在了它的Function对象，而类的普通函数则是在类实例化的时候才生成对应的函数的Function对象

关于call方法，详见Function的call方法.api文档。
函数绑定：其实就是指，将一个函数临时的赋给某个对象，该对象就临时的拥有了这个函数，但实际上对象上是没有这个函数定义的

sam.chuan.yang 2010-04-14 10:41 发表评论

flex之弹出窗口数据传递

sam.chuan.yang — Sat, 10 Apr 2010 09:07:00 GMT

弹出窗口：
利用PopUpManager我们可以把flex容器组件作为一种弹出窗口，这样也是便于我们将程序分块编写的方式之一。我们通常会自定义一个容器组件，作为弹出窗口的内容。
举一个例子来说明我们可能利用弹出窗口的地方。

我们做用户信息的增删改查。第一步我们会做一个Module，用于布置datagrid组件和增删查三个按钮，那么在这个Module中我们的datagrid主要就是用于显示查询到的用户数据列表。那么增加按钮事件就是我们弹出一个窗口来编辑数据，完成后在该弹出窗口中点击确定按钮，数据将传送给Module的一个函数。并由这个函数与后台交互，最终使数据通过后台添加到数据库。那么这是弹出窗口向父窗体传递数据的例子，另外我们在Module的datagrid中双击选中的数据，也会弹出窗口，并将该条datagrid的这条记录数据显示在弹出窗口的相应输入框中，供用户编辑。当然这就是父窗体向弹出窗口传递数据的例子了。
在flex中，我所知道的父子窗口传递数据有两种，姑且先让我这么命名并区分它们：一种是事件处理型，另一种就是函数绑定型。
第一种方式（事件处理型）：先看代码，假设我们已经自定义好弹出窗体组件。那么看我们怎么在Module（也就是父窗体）中来调用弹出窗体的。

1protected function button1_clickHandler(event:MouseEvent):void{
2 //这里是新创建一个弹出窗体对象，UserWin为自定义的一个容器组件对象
3         var win:UserWin = new UserWin();
4    var user:TblBsUserType = new TblBsUserType();
5//将user对象传递给弹出窗体，其中data为win里头的一个空对象。在win里边的代码是public data:Object={};
6    win.data.user = user;
7//通过这种方法给win添加一个事件监听器
8    win.addEventListener("sendData",onSendData);
9                PopUpManager.addPopUp(win,this,true);
10                PopUpManager.centerPopUp(win);
11            }
12
13private function onSendData(e:Event):void{
14                var user:UserType = e.currentTarget.data.user;
15                Alert.show(ro.toString());
16            }

如上注释，我们父窗体向子窗体传递数据的时候其实就是像子窗体的一个已存在的对象中动态添加数据属性即可。这一点是ecmascript的规范，也是他的一个很好的优点。
最后那个方法，其实就是我们处理弹出窗口传数据给父窗体的一个处理过程，其实很简单，为了解耦，我们一般不会在弹出窗口中做数据的处理过程，而是直接由弹出窗口传回数据，交给父窗体处理。那么事件分发处理的方式，显而易见就是我们在创建弹出窗体对象的时候，动态的给子窗体注册一个事件监听器，，然后弹出窗体的确定按钮中调用dispatchEvent(new Event("sendData"));即可将数据传回给父窗体中定义的那个事件处理函数去处理。其中e.currentTarget表示当前正在使用某个事件侦听器处理 Event 对象的对象。也就是上边的win对象。
第二种函数绑定型，其实就是很简单，我们知道在ecmascript中函数也是一种变量，那么就可以利用这一点将函数作为一个变量传递给弹出窗体，同样可以达到我们处理的效果，
代码如下：

1protected function button1_clickHandler(event:MouseEvent):void
2            {
3                var win:UserWin = new UserWin();
4                var user:TblBsUserType = new TblBsUserType();
5                win.data.user = user;
6                win.data.send = add;
7                //win.addEventListener("sendData",onSendData);
8                PopUpManager.addPopUp(win,this,true);
9                PopUpManager.centerPopUp(win);
10            }
11
12//结果处理函数
13private function add(user:TblBsUserType):void{
14                if(null != user.butyId && "" != user.butyId){
15                    ro.addUser(user);
16                }
17            }

那么在弹出窗体中我们只需要调用data.send(data.user);就可以了。

备注：其实以上两种方法，为了使用方便，其实都还可以优化的地方，比如，事件处理方式，我们还可以在自定义组件中声明事件

[Event(name="sendData",type="flash.events.Event")]

让使用组件的mxml文档也能显示注册事件，如：

另外，在函数处理方式上，我们是利用函数绑定到对象的方式，来处理数据的，其实，为了使用接口的人更明确一些，我们可以把这个函数预先定义为组件的属性，比如：[Bindale]public var sendData:Function;这样在创建组件对象的地方，就可以明确的把用户自定义的处理函数赋值给这个属性（sendData）。
总之：不管怎么样，事件处理和函数处理都可以完成我们的要求，任选其一即可。

sam.chuan.yang 2010-04-10 17:07 发表评论

flex 动态创建组件之容器自适应大小

sam.chuan.yang — Sat, 10 Apr 2010 07:59:00 GMT

为了节约swf文件的大小，可以采取动态创建组件的方式，那么动态创建组件就要考虑到组件容器自适应大小。
比如：
        autoLayout="true" id="bc">




我要在上边这个容器里动态装入一些组件，很有可能容器的高度不够装下多个组件，这个时候，就要让程序动态的改变容器的大小。
改变容器的大小可以根据添加的最后一个组件的top和height来决定，那么我们什么时候才能获取得最后一个组件的大小呢？看下边的代码：

public function init():void{
    var user:TblBsUserType = new TblBsUserType();
    function initFormItem(label:String,porp:String):FormItem{
     var fi:FormItem  =ElementFactory.createFormItem(label,user,porp);
     fi.setStyle("paddingTop",10);
     fi.setStyle("paddingLeft",20);
     bc.addElement(fi);
     return fi;
    }
    initFormItem("用户编码：","butyId");
    initFormItem("用户名：","butyName");
    initFormItem("用户密码：","butyPassword");
    var fi:FormItem=initFormItem("用户角色：","butySate");
  //注意下边这种方式可以设置bc的高度吗？？？
     bc.height =fi.top+ fi.height+10;
}

如果动态创建组件，那么直接获取组件的高度是不行的。像上边这种情况，fi.height的值多数情况是0.
其实根据flex组件的生命周期，我们知道只有在creationComplete事件的时候，组件才完成了它所有的初始化工作，包括组件的位置，样式，大小等信息。所以，要想获得组件的高宽，我们应该在creationComplete事件中来完成这个任务。所以上边
bc.height=fi.top+fi.height+10;
应该修改为：
fi.addEventListener("creationComplete",function(){
bc.height =fi.top+ fi.height+10;
});
这样才可以正确设置父容器的高度。

sam.chuan.yang 2010-04-10 15:59 发表评论