Data Binding in Flex 1: Principles of Data Binding

The [Bindable] label is provided in Flex to facilitate data binding. But what is the principle behind it? You can use the flash. utils. describeType tool for analysis.
Assume that the following classes declare Data Binding to member variables:

Package test
...{
Import mx. collections. ArrayCollection;

Public class BindablePropertity
...{
[Bindable]
Public var list: ArrayCollection = new ArrayCollection ();
}
}

The xml output by flash. utils. describeType is as follows:

<Type name = "test: BindablePropertity" base = "Class" isDynamic = "true" isFinal = "true" isStatic = "true">
<ExtendsClass type = "Class"/>
<ExtendsClass type = "Object"/>
<Accessor name = "prototype" access = "readonly" type = "*" declaredBy = "Class"/>
<Factory type = "test: BindablePropertity">
<ExtendsClass type = "Object"/>
<ImplementsInterface type = "flash. events: IEventDispatcher"/>
<Method name = "hasEventListener" declaredBy = "test: BindablePropertity" returnType = "Boolean">
<Parameter index = "1" type = "String" optional = "false"/>
</Method>
<Method name = "removeEventListener" declaredBy = "test: BindablePropertity" returnType = "void">
<Parameter index = "1" type = "String" optional = "false"/>
<Parameter index = "2" type = "Function" optional = "false"/>
<Parameter index = "3" type = "Boolean" optional = "true"/>
</Method>
<Method name = "willTrigger" declaredBy = "test: BindablePropertity" returnType = "Boolean">
<Parameter index = "1" type = "String" optional = "false"/>
</Method>
<Accessor name = "list" access = "readwrite" type = "mx. collections: ArrayCollection" declaredBy = "test: BindablePropertity">
<Metadata name = "Bindable">
<Arg key = "event" value = "propertyChange"/>
</Metadata>
</Accessor>
<Method name = "addEventListener" declaredBy = "test: BindablePropertity" 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 = "dispatchEvent" declaredBy = "test: BindablePropertity" returnType = "Boolean">
<Parameter index = "1" type = "flash. events: Event" optional = "false"/>
</Method>
</Factory>
</Type>

It can be seen that after the [Bindable] Declaration is added, this class implements the IEventDispatcher interface, and the propertyChange event will be distributed when data changes. In this way, other components that listen to this event can be notified when data changes.
Most attributes of a Flex component can be bound with braces "{}", or the attributes of one component can be bound to the attributes of another component. Also, use describeType for analysis. You can see that:

<Accessor name = "btn1" access = "readwrite" type = "mx. controls: Button" declaredBy = "FlexFramework">
<Metadata name = "Bindable">
<Arg key = "event" value = "propertyChange"/>
</Metadata>
</Accessor>

The component updates data by listening to the propertyChange event. However, the preceding data binding statement does not specify the event name, because [Bindable] is a simplified method, which is equivalent to [Bindable (event = "propertyChange")]. The event name can be changed, but the Flex component listens to the event named propertyChange by default. If you change the event name, you must listen to the corresponding event in Flex and write the event processing.
The next article will introduce several examples of actual binding.