Data binding is a great example of one of these features.
Exposed through the MXML API, data bindings allow developers to "bind" the value of one object property (destination property) to the value of another object property (source property) using MXML or MXML + inline ActionScript.
<mx:Binding source="source.text" destination="destination.text" /> |
One benefit of using the <mx:Binding> tag instead of inline ActionScript is the ability to bind a property to multiple source properties. If any of the source properties change so does the destination property.
<mx:Binding source="source.text" destination="destination.text"/> |
Note: a source property can only be identified for data binding if the object to which it belongs has an id property.
Although it is possible to bind the text property of one TextInput control to the text property of another TextInput control as demonstrated in the previous example, data binding is not limited to such a scenario.
Properties of visual elements may be bound to non-visual elements and vice versa. In fact, an predominant Flex architecture, MVC, relies on the ability to bind visual elements in the "view" to non-visual elements in the "model".
Also, you could bind the text property of a TextInput control to the selectedIndex property of a ComboBox control if you so choose.
Data bindings are not limited to the binding of "like" properties or "like" elements.
Note that data bindings are, however, limited to properties of identical data types or scenarios where type casting is possible. For example, you can bind a property with a data type String (i.e. text property) to a property with a data type of Int (i.e. selectedIndex) since an Int can be implicitly cast to a String. However, the reverse is not true - a property with a data type of Int cannot be bound to a property with a data type of String.
Data binding could also be accomplished by using ActionScript to add an event listener to the source object which listens for a specified event and calls a specified event handler method responsible for changing the destination object's property value to the source object's property value.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()"> |
While some may refer to such capabilities as nothing more than "syntactic sugar", most developers can appreciate the convenience and accessibility demonstrated by Flex's MXML implementation of data bindings.
Keep in mind that using MXML to bind data binds the properties to one another at compile time. If you want to bind data at runtime based on a condition, you will have to use ActionScript.
Binding Expressions
A data binding is the simplest form of a binding expression.More advanced binding expressions combine the use of data bindings with ActionScript operations. Since binding expressions define the value of an MXML attribute, they must return a value and be wrapped in curly braces. Without curly braces, your binding expression will be interpreted as a literal value.
Binding expression are most commonly used to accomplish the following:
- Bind the value of one object property to the property of another object (simple data binding)
- String concatenation that includes one or more binded properties
- Calculations on one or more binded properties
- Conditional operations on one or more binded properties
<mx:ComboBox id="c" dataProvider="{myArray}" /> |
<mx:TextInput id="fname" /> |
<mx:NumericStepper id="quantity" /> |
<mx:NumericStepper id="quantity" /> |