Flex 2 Bindable Metadata Tag 背後實際作用

Ticore's Blog

Flex 有一個很方便的功能 - Data Bind
很容易可以做到資料綁定的功能

對於 AS3 Class 加上 [Bindable] metadata tag
便可以對該 Class 資料成員賦予 Data Bind 能力

以下利用 flash.utils.describeType 觀察 Bindable 對 Class 實際的影響

加上 [Bindable] 之前：

package idv.ticore {
 public class MyClass {
  public var name:String;
 }
}

describeType(MyClass) output:

<type name="idv.ticore::MyClass" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  <extendsClass type="Class"/>
  <extendsClass type="Object"/>
  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  <factory type="idv.ticore::MyClass">
    <extendsClass type="Object"/>
    <variable name="name" type="String"/>
  </factory>
</type>

加上 [Bindable] 之後：

package idv.ticore {
 [Bindable]
 public class MyClass {
  public var name:String;
 }
}

describeType(MyClass) output:

<type name="idv.ticore::MyClass" base="Class" isDynamic="true" isFinal="true" isStatic="true">
  <extendsClass type="Class"/>
  <extendsClass type="Object"/>
  <accessor name="prototype" access="readonly" type="*" declaredBy="Class"/>
  <factory type="idv.ticore::MyClass">
    <extendsClass type="Object"/>
    <implementsInterface type="flash.events::IEventDispatcher"/>
    <accessor name="name" access="readwrite" type="String" declaredBy="idv.ticore::MyClass">
      <metadata name="Bindable">
        <arg key="event" value="propertyChange"/>
      </metadata>
    </accessor>
    <method name="addEventListener" declaredBy="idv.ticore::MyClass" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
      <parameter index="4" type="int" optional="true"/>
      <parameter index="5" type="Boolean" optional="true"/>
    </method>
    <method name="hasEventListener" declaredBy="idv.ticore::MyClass" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="willTrigger" declaredBy="idv.ticore::MyClass" returnType="Boolean">
      <parameter index="1" type="String" optional="false"/>
    </method>
    <method name="dispatchEvent" declaredBy="idv.ticore::MyClass" returnType="Boolean">
      <parameter index="1" type="flash.events::Event" optional="false"/>
    </method>
    <method name="removeEventListener" declaredBy="idv.ticore::MyClass" returnType="void">
      <parameter index="1" type="String" optional="false"/>
      <parameter index="2" type="Function" optional="false"/>
      <parameter index="3" type="Boolean" optional="true"/>
    </method>
  </factory>
</type>

可以發現在編譯過程中，MyClass 自動實做了 flash.events::IEventDispatcher 介面
加入了四個與事件有關的方法
原本簡單的資料成員的宣告方式
也被改成 getter、setter 的寫法
是用來處理發布屬性改變的事件

假如在一般 ActionScript3 Project 下使用 [Bindable]
則會出現錯誤訊息

Severity and Description Path Resource Location Creation Time Id

  1172: Definition mx.binding:BindingManager could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 138
  1172: Definition mx.binding:BindingManager could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 143
  1172: Definition mx.core:IPropertyChangeNotifier could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 137
  1172: Definition mx.core:IPropertyChangeNotifier could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 142
  1172: Definition mx.events:PropertyChangeEvent could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 139
  1172: Definition mx.events:PropertyChangeEvent could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 144
  1172: Definition mx.utils:ObjectProxy could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 136
  1172: Definition mx.utils:ObjectProxy could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 141
  1172: Definition mx.utils:UIDUtil could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444062 135
  1172: Definition mx.utils:UIDUtil could not be found. BindableTest/idv/ticore MyClass.as line 1 1168754444078 140
  1202: Access of undefined property PropertyChangeEvent in package mx.events. BindableTest/idv/ticore MyClass.as line 4 1168754444078 145

因為缺少 Data Bind 中需要用到的 Class

只要加入 framework library 即可
framework 路徑：${FRAMEWORKS}libsframework.swc

Flex 線上文件：
Using static properties as the source for data binding

相關連結：
Flex 技巧 - 將資料綁定封裝起來
Flex - 純手工設定 DataBinding 的方式
Flex 技巧 - BindingManager 使用方式
Flex 技巧 - 觀察 Data Binding 資料變化
Flex Tip - 在 Data Binding 內使用 [...] 運算子
Flex 2.0 - 以 ActionScript 3.0 動態設置 Data Binding

轉載請註明出處 http://ticore.blogspot.com/2007/01/flex-2-bindable-metadata-tag.html