Shulou(Shulou.com)06/02 Report--

This article is about how to use Flex data binding. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Flex data binding

1. About Flex data binding

Flex data binding is the process of associating data in one object with data in another object. Flex data binding provides a convenient way to transfer data between different layers of an application. Flex data binding requires a source attribute, a destination attribute, and a trigger event that indicates when data is copied from the source attribute to the destination attribute. When the source property changes, the object emits a trigger event.

Adobe Flex provides three methods for specifying Flex data bindings: braces ({}) syntax in MXML, tags in MXML, and a series of methods for BindingUtils in ActionScript.

(1) the following example uses curly braces ({}) syntax to show a Text control whose data comes from the TextInput control Text property:

ActionScript code and E4X expressions can be included as part of an Flex data binding expression, as shown in the following example:

(2) use markers as an alternative to curly braces syntax.

When you use it, you provide the tag with a source attribute as the tag's source attribute and a destination attribute as the tag's destination attribute. The following example uses tags to define an Flex data binding from a TextInput control to a Text control:

Compared with the brace syntax, the view (user interface) can be completely separated from the model with tags.

Tags can also bind multiple source attributes to the same destination attribute because multiple tags with the same destination attribute can be defined.

Curly braces syntax and tags can define Flex data bindings at compile time, while ActionScript code can define Flex data bindings at run time, as shown in the following example:

(3) create an attribute to be used as the source of Flex data binding

When you create a property to bind the expression source, Flex can automatically copy the value to all destination properties when the value of the source property changes. In order for Flex to perform a copy, you must use the [Bindable] tag to register this attribute with Flex.

The The [Bindable] metadata tag has the following syntax:

[Bindable] [Bindable (event= "eventname")]

If the event name is ignored, Flex automatically creates an event called propertyChange, and when the property changes, Flex issues the event to trigger all Flex data bindings that use this property as the source.

The following example makes a source where a maxFontSize property and a minFontSize property variable can be used for Flex data-binding expressions:

two。 Define Flex data binding in ActionScript

Bindings can be defined in ActionScript by using mx.binding.utils.BindingUtils. This class defines several static methods, and the bindProperty () method allows us to create data to the property implemented with variables

Bind, or use the bindSetter () method to create a Flex data binding to the property implemented by the method.

(1) the difference between defining Flex data binding in MXML and in ActionScript

There are some differences between defining Flex data binding in MXML at compile time and Flex data binding in ActionScript at run time:

◆ cannot introduce ActionScript code in binding expressions defined by bindProperty () or bindSetter () methods. Instead, use the bindSetter () method to specify an object that is called when binding occurs

Method.

◆ cannot introduce an E4X expression into a binding expression defined in ActionScript.

◆ cannot introduce functions or array elements into the attribute chain of Flex data binding expressions defined by the the bindProperty () or bindSetter () methods. For more information, see Working with bindable property chains.

The ◆ compiler has better warning and error checking support than Flex data bindings defined by bindProperty () or bindSetter () at run time.

(2) example: define Flex data binding in ActionScript

The following example establishes a Flex data binding with bindSetter (). The parameters of the bindSetter () method are set as follows:

◆ Source (source) object

◆ source (source) attribute name

◆ the method that is called when the source property changes.

In the following example, when you enter text into a TextInput control, the text is converted to uppercase and copied to TextArea

Controls:

Public function mySetterBinding (event:FlexEvent): void {var watcherSetter:ChangeWatcher = BindingUtils.bindSetter (updateMyString, myTI, "text");}]] >

(3) define the bound observer (watchers)

Flex has a mx.binding.utils.ChangeWatcher class that you can use to define an Flex data binding observer. Typically, the Flex data binding observer activates an event listener when the binding occurs. You can use the following example

Watch () of ChangeWatcher creates a Flex data binding observer:

In the above example, an event listener is defined for the Flex data binding observer, in which a single parameter is used to contain the event object. The data type of the event object is determined by the properties being observed. Each bindable property will be different.

The event type and the associated event object. For more information about determining the type of event, see "using Bindable metadata tags."

Thank you for reading! This is the end of this article on "how to use Flex data binding". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.