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>