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

Editor to share with you what are the ways of Flex data binding, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Flex data binding

What if there is some data in the database or a file that needs to be displayed on the interface? Our goal is to put the data on the interface so that it can be displayed, and the process of putting the data on the interface can stop Flex data binding.

In Flex applications, Flex data binding is actually accomplished with the help of event mechanism. when the target uses Flex data binding, the target object listens for a fixed event of the data source object. When the data source changes, the data source dispatches a change event to notify the target object to update the data. In the actual development, we do not need to pay attention to the specific implementation process, this process will be completed automatically by Flash/Flex.

In Flex, there are four main ways of Flex data binding, namely: "{}" binding expression, [Bindable] binding symbol, label and BindingUtils dynamic binding. The following four Flex data binding methods are described in detail.

I. "{}" binding expression

In Flex development, the application of "{}" binding expression is the most common, simple and convenient. It has the same effect as the "" in ASP.NET. Here I will briefly introduce how to use the "{}" binding expression to bind data under Flex. If there is such a simple requirement, we define a variable and bind the value of the variable to a similar UI component such as a text box or button through a "{}" binding expression. The variable is defined as follows:

1 2 6

The variable text of a string is defined above, and we bind it to the UI component through the "{}" binding expression? As follows:

1 2 3

Simple, simple, convenient and applicable. OK, now that you've learned it, let's move on to another binding use-- the binding method returns a value. For example, what if you need to Flex data bind the return value of a method through the "{}" binding expression and render it on the UI component? The method is defined as follows:

1privatefunctionBindText (): String 2 {3return "binds methods through\" {}\ "expressions!" ; 4}

In fact, as above, directly change the variable in "{}" to the method OK, as shown in the following code snippet:

This completes the binding of the method, binding the value of the BindText () method to the Label component.

2. [Bindable] binding symbol

[Bindable] the binding symbol has already appeared above, and its use and function are easy to master. As in the example above, our purpose is to bind the value of the defined variable to the UI component. If we want to achieve this function, it is impossible to bind the defined variable directly to the Flex data binding expression through the "{}" binding expression. We must mark the defined variable [Bindable]. In Flex, only data sources marked with [Bindable] can be bound to Flex data (except functions, which is also confirmed in the above example). Of course, it can also be other data sources (xml, databases, files, and other different types of data sources in different places).

The above is really easy to use, but you still need to know more about [Bindable]. When the data source specified [Bindable] changes, the "notification" is still handled through the listening event method, which defaults to the "propertyChange" event. As with the variable text defined earlier, the complete definition should look like this:

1 [Bindable (event= "propertyChange")]

2 "Hey, this is bound through the\" {}\ "expression!

The "propertyChange" event is the default event, and usually we just need to use the abbreviated form [Bindable] to OK. In addition, there are two other points to pay attention to (I will not introduce them here, but I will describe them in more detail in subsequent articles):

1. When the [Bindable] tag is used for functions, it can only be used before functions defined by setter and getter. This binding is called function-level binding.

2. When the [Bindable] tag is used for a public class, all public variables of the class and functions defined in setter and getter can be used for binding. This binding is called object-level binding.

III. Label

Tags are also used very frequently in Flex data binding. How on earth is it used? Here are two small examples to demonstrate Flex data binding using different data sources. First of all, use the tag to define a data source (the tag is equivalent to defining a temporary data, there is no detailed introduction here, friends who are not clear about its role, please refer to the relevant materials to learn). The label definition data source is as follows:

12 3 4ActionScript3.0 5 Zhang San 6 7 8FlashCS3 9 Li Si 10 11 12

For the data source defined above, it is very simple to bind Flex data through tags, as shown in the following code snippet:

1 2 3 4 5

Tags can be used to define XML-style data sources, and you can also define data sources programmatically or obtain them from databases, files, or various data service interfaces. Here is the data source definition using xml:

1privatevarxml 7FlashCS3 = 2 3ActionScript3.0 4 Zhang San 5 6 7FlashCS3 8 Li Si 9 10

The data bound to the xml object is no different from the data source defined by the tag. The details are as follows:

1 2 3 4

4. BindingUtils and dynamic binding

In Flex data binding, dynamic binding is mainly implemented through two static methods provided by the BindingUtils class. This class, located under the package mx.binding.utils, provides two static methods, bindProperty () and bindSetter (), to implement dynamic binding of data.

The bindProperty () method can see the general meaning by name, binding the property. Then how should we apply it in the actual development? It's very simple, in a word: bind the YY attribute of xx to the BB attribute of AA. To understand the meaning of this sentence more clearly, see the following code snippet:

1 2 3 4 14 15 16 17

This code is simple, placing an input component and a button component on the interface, and then defining a variable of type String myName,*** binds the button's "label" property to the "text" property of the input component through the button click event. In fact, the code in the onClick () method is exactly equivalent to the following code:

1this.nameText.text=this.btn.label

The use of the bindSetter () method is also very simple. The Flex data binding method needs to be combined with a setter-like method to delegate the parameters passed externally to realize the dynamic binding of the data. For the example of binding the display value of the button to the value of the text input component, you only need to define a setter method. The bindProperty () method can be bindSetter () method. For more information, please see the following code snippet:

1 23 4 20 21 22 23 and above are all the contents of the article "what are the ways of Flex data binding?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.