flex的event

在任何的web应用开发中,在不同的组件中传递数据是一件非常重要的事情, flex的应用开发也不例外,今天讲一下flex的event.

在flex中所有的UIComponent都持有flash.events.EventDispatcher对象,通过改对象我们能够让一个application中的不同UIComponent广播自己的event.,让监听自己event的组件能够获得消息.当事件触发时执行响应的操作,这样的一种事件驱动方式能够是代码很容易维护,和阅读.

事件的职能除了通知监听事件的组件还有就是传递数据.在事情触发的时候将数据传递给下一个组件,让下一个组件来完成接下去的工作是一个非常好的实践.我们通过继承flash.events.Event对象来编写自己的event,并且让自己的event包含我们想要传递的数据.

例如ProductEvent他继承了flash.events.Event同时本身又持有product对象,这样使得下一个组件能够获得product的所有信息,从而继续对product进行处理.

package  events
... {
    import flash.events.Event;
    import valueObjects.Product;

    public class ProductEvent extends Event
    ...{
        public var product:Product;
        
        public function ProductEvent(product:Product,type:String,bubbles:Boolean=false)...{
            super(type,bubbles);
            this.product=product;
        }
        
        public override function clone():Event...{
            return new ProductEvent(product,type,bubbles);
        }
    }
}

有了ProductEvent对象我们现在要做的就是如何使用这个对象使他在不同的组件中传递.在下面的示例中当我们点击add Botton的时候就会调用itemAdded()方法,改方法创建了一个ProductEvent实例,并且通过调用this.dispatchEvent(e)方法来广播这个event,同时注意在这个mxml的顶部声明了自己所持有的event是何种类型,还有event的名字,这个名字将被别的组件用来判断是何种event被触发.

 

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< mx:Canvas xmlns:mx = " http://www.adobe.com/2006/mxml "  
    horizontalScrollPolicy = " off "
  verticalScrollPolicy = " off " >
   < mx:Metadata >
      [Event(name = " itemAdded " ,type = " events.ProductEvent " )]
   </ mx:Metadata >
  
     < mx:Script >
         <! [CDATA[
             import  events.ProductEvent;
             import  mx.core.Application;
             import  valueObjects.Product;
            [Bindable]
             public  var groceryItem:Product;
            
             private  function itemAdded(prod:Product): void ... {
          var e:ProductEvent = new ProductEvent(prod,"itemAdded",true);
                   this.dispatchEvent(e);
      }
      
       private  function toggleState(state:String): void ... {
               if(state == "closed")...{
                  this.currentState = "";
               } else ...{
                 this.currentState = "expanded";
               }
            }


        ]] >
     </ mx:Script >
    
     < mx:states >
    < mx:State name = " expanded " >
       < mx:SetProperty target = " {add} "  name = " visible "  value = " true " />
       < mx:AddChild >
          < mx:VBox width = " 100% "  x = " 200 " >
             < mx:Text text = " {groceryItem.description} "  width = " 50% " />
                     < mx:Label text = " Low Fat "
                  x = " 100 "  y = " 60 "
                  visible = " {groceryItem.isLowFat} " />
          </ mx:VBox >
       </ mx:AddChild >
    </ mx:State >
</ mx:states >
    
     < mx:Canvas mouseOver = " toggleState('open') "  mouseOut = " toggleState('closed') " >
         < mx:Image id = " pic "
       source = " {'../assets/'+groceryItem.imageName} " />
    
         < mx:Label id = " price "
       text = " {groceryItem.listPrice} "
       x = " 100 "  y = " 20 " />
    
         < mx:Button id = " add "
         visible = " false "
       label = " Add To Cart "
       click = " itemAdded(groceryItem) "
       x = " 100 "  y = " 40 " />
    </ mx:Canvas >

</ mx:Canvas >

现在我们看一下上面这个mxml的父组件是如何监听的,当itemAdded事件触发时就会调用logItemAdded()方法.

同时这个mxml自己也定义了itemAdded事件,可以将这个事件作为自己的事件继续广播.

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< mx:VBox xmlns:mx = " http://www.adobe.com/2006/mxml "  xmlns:v = " views.ecomm.* " >
< mx:Metadata >
   [Event(name = " itemAdded " ,type = " events.ProductEvent " )]
</ mx:Metadata >

     < mx:Script >
         <! [CDATA[
             import  events.ProductEvent;
             import  mx.collections.ArrayCollection;
            [Bindable]
             public  var prodByCategory:ArrayCollection;
            
             private  function logItemAdded(event:ProductEvent): void ... {
                trace(event.product);
                this.dispatchEvent(event);
            }
        ]] >
     </ mx:Script >
     < mx:Repeater id = " foodRepeater "
       width = " 100% "  height = " 100% "
       dataProvider = " {prodByCategory} " >
        <v:GroceryDetail id="prod"  
         width="80%"
         groceryItem ="{foodRepeater.currentItem}" itemAdded="logItemAdded(event)"/>
     </ mx:Repeater >
</ mx:VBox >

但是如果一个application中有非常深的组件层次如果最底层的event事件被最上层的组件所调用,按照这种方法,这个两个组件中间的组件中每次都写这样的方法来传递event是非常麻烦,并且恶心的,还好flex对event提供了一个bubbles属性(冒泡),这个属性默认为false,当显示的设置为true我们就可以在中间的那些组件中不用编写itemAdded="logItemAdded(event)类似的代码,这样可以节省很多的编码工作,也减少的出错概率,但是中间的那些组件必须在<Metadata>节点中声明需要传递的这个event.例如上面的示例可以简单的写为

 

<? xml version = " 1.0 "  encoding = " utf-8 " ?>
< mx:VBox xmlns:mx = " http://www.adobe.com/2006/mxml "  xmlns:v = " views.ecomm.* " >
< mx:Metadata >
   [Event(name = " itemAdded " ,type = " events.ProductEvent " )]
</ mx:Metadata >

     < mx:Script >
         <! [CDATA[
             import  events.ProductEvent;
             import  mx.collections.ArrayCollection;
            [Bindable]
             public  var prodByCategory:ArrayCollection;

        ]] >
     </ mx:Script >
     < mx:Repeater id = " foodRepeater "
       width = " 100% "  height = " 100% "
       dataProvider = " {prodByCategory} " >
        <v:GroceryDetail id="prod"  
         width="80%"
         groceryItem ="{foodRepeater.currentItem}"/>
     </ mx:Repeater >
</ mx:VBox >