Flex Enterprise Application Development Practice Study Notes (2)

From http://blog.csdn.net/spring19840513/article/details/6909442

Use Bindable metadata tag

1. used before the public class definition

Use the [Bindable] metadata to mark all the public variables defined in the class and the Public attributes with the setter and getter methods at the same time as the source of the data binding expression. In this case, [Bindable] does not use any parameters, as shown in the following code.

 
 

  
  
[Bindable]  
  
  
public class TextAreaFontControl extends TextArea {} 
 
 

The flex compiler automatically generates events named propertychange and of the propertychangeevent type for all public attributes so that these attributes can be used as the source of the data binding expression.

Note:Before defining a public class, use the [Bindable] metadata tag to only apply binding to the public attribute. It does not apply to the private and protected attributes and those defined in other namespaces, you must insert the [Bindable] metadata tag before the Non-Public attribute to make it the source of the data binding expression.

2. Before the public, protected, or private attribute, use

You can use the [Bindable] flag before the public, protected, or private attribute to define this specific attribute as supporting data binding, as shown in the following code.

 
 

  
  
[Bindable]  
  
  
public var foo:String;  
  
  
[Bindable]  
  
  
protected var foo3:String;  
  
  
[Bindable]  
  
  
private var foo2:String; 
 
 

The flex compiler automatically generates an event named propertychange and its type is propertychangeevent for that attribute. If the written property value remains unchanged, flex will not issue an event or update the property. You can also specify the event name in the [Bindable] metadata tag, as shown in the following code.

 
 

  
  
[Bindable(event="fooChanged")]  
  
  
public var foo:String; 
 
 

In this case, developers are responsible for creating and issuing events to trigger data binding. This is usually done in other methods of the class. Although the [Bindable] flag is specified at the class level, if you want to name the event that triggers data binding, you can still include the specified name event in [Bindable.

3. before using the public, protected, or private attribute defined by the getter or setter Method

Use this flag before the public, protected, or private attribute defined by the getter or setter method. In this case, to use the [Bindable] flag, the setter and getter methods must be defined for the attribute at the same time.

Bind to functions, objects, and Arrays

1. Bind a function

In Flex, functions can be used as part of a data binding expression. The two common usage of using a function in a data binding expression are as follows.

Use the "Bindable" attribute as a function parameter, as shown below.

 
 

  
  
<?xml version="1.0"?> 
  
  
<!-- binding/ASInBraces.mxml --> 
  
  
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
  
  
    <mx:CurrencyFormatter id="usdFormatter" precision="2" 
  
  
        currencySymbol="$" alignSymbol="left"/> 
  
  
    <mx:TextInput id="myTI" text="Enter number here"/> 
  
  
    <mx:TextArea text="{usdFormatter.format(myTI.text)}"/> 
  
  
</mx:Application> 
 
 

Use a function as the source of the binding expression.

Functions with returned values can be used as the source of the data binding expression. However, there must be a way to activate this function to update the target attribute, that is, to use the [Bindable] metadata tag. In code list 2-14, the [Bindable] metadata tag indicates that flex calls the isenabled () function when the myflagchanged event is distributed. When the setter method of myflag is called, a myflagchanged event is dispatched, which triggers any data binding using the isenabled () function as the source.

Code List 2-14 use a function as the binding expression Source

 
 

  
  
<? XML version = "1.0"?>
  
  
<! -- Binding/asfunction. mxml -->
  
  
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml">
  
  
<Mx: SCRIPT>
  
  
<! [CDATA [
  
  
Import flash. Events. event;
  
  
// Define a function that can respond to the myflagchanged event and can be used as a function to bind the source.
  
  
[Bindable (event = "myflagchanged")]
  
  
Private function isenabled (): String {
  
  
If (myflag)
  
  
Return 'true ';
  
  
Else
  
  
Return 'false ';
  
  
}
  
  
Private VaR _ myflag: Boolean = false;
  
  
// Define a setter method that can dispatch the myflagchanged event to trigger data binding.
  
  
Public Function set myflag (value: Boolean): void {
  
  
_ Myflag = value;
  
  
Dispatchevent (new event ("myflagchanged "));
  
  
}
  
  
Public Function get myflag (): Boolean {
  
  
Return _ myflag;
  
  
}
  
  
]>
  
  
</MX: SCRIPT>
  
  
<! -Use a function as the data binding expression source -->
  
  
<Mx: textarea id = "myta" text = "{isenabled ()}"/>
  
  
<! -- Change the property so that the setter method is called to dispatch the myflagchanged event to trigger data binding.
  
  
-->
  
  
<Mx: button label = "Clear myflag" Click = "myflag = false;"/>
  
  
<Mx: button label = "set myflag" Click = "myflag = true;"/>
  
  
</MX: Application>
 
 

2. bind an object

In the project, we will use a large number of objects as the source of the binding expression. During the running process, there are two reasons for invalid object binding.

Although the property of the bound object can be bound, the declared object reference cannot be bound, as shown in the following code.

 
 

  
  
// If you forget to declare the property that can be bound to the reference, the [Bindable] metadata tag is not placed.
  
  
Private var FOO: myobject = NULL;
  
  
...
  
  
// Although the name attribute of the myobject class can be bound, the binding expression does not work because Foo cannot be bound.
  
  
<Mx: textarea id = "myta" text = "{Foo. name}"/>
 
 

Although the declared object reference can be bound, the bound object property cannot be bound, as shown in the following code.

 
 

  
  
// The reference Foo of the myobject instance can be bound. However, the name attribute of the myobject class cannot be bound.
  
  
[Bindable]
  
  
Private var FOO: myobject = NULL;
  
  
...
  
  
// Although Foo can be bound, the binding expression does not work because the name attribute of myobject cannot be bound.
  
  
<Mx: textarea id = "myta" text = "{Foo. name}"/>
 
 

3. bind an array

When an array is used for work, such as an array or arraycollection object, an array can be used as the source or destination of the Data Binding expression.

Note that an array of the arraycollection type should be used as the binding source, because the arraycollection class can issue an event to trigger data binding when the array or array element changes. For example, data binding is triggered when arraycollection. additem (), arraycollection. additemat (), arraycollection. removeitem (), and arraycollection. removeitemat () are called.

When you bind an array, consider the following two situations: array as the data binding source and array element as the data source. Array-based data sources are one of the most commonly used cases. arraycollection should be used at this time. As shown above, we mainly consider using the elements in the array as the data binding source, as shown in code list 2-15.

Code List 2-15 use the elements in the array as the data binding source

 
 

  
  
<? XML version = "1.0"?>
  
  
<! -- Binding/arraybinding. mxml -->
  
  
<Mx: Application xmlns: MX = "http://www.adobe.com/2006/mxml">
  
  
<Mx: SCRIPT>
  
  
<! [CDATA [
  
  
Import MX. Collections. arraycollection;
  
  
[Bindable]
  
  
Public var myac: arraycollection = new arraycollection ([
  
  
"One", "two", "three", "four"]);
  
  
[Bindable]
  
  
Public var myac2: arraycollection = new arraycollection ([
  
  
"Uno", "dos", "tres", "Quatro"]);
  
  
]>
  
  
</MX: SCRIPT>
  
  
<! -When the application is started or when myac is changed, data binding is updated. -->
  
  
<Mx: Text id = "text1" text = "{myac [0]}"/>
  
  
<! -When the application is started or when myac is changed or myac [0] is changed, the data binding will be updated -->
  
  
<Mx: Text id = "text2" text = "{myac. getitemat (0)}"/>
  
  
<Mx: button id = "button1"
  
  
Label = "change element"
  
  
Click = "myac [0] = 'new one'"/>
  
  
<Mx: button id = "button2"
  
  
Label = "Change arraycollection"
  
  
Click = "myac = myac2"/>
  
  
</MX: Application>
 
 

If the array element is specified as the source of the data binding expression by square brackets [] syntax, data binding is triggered only when the application is started or when the array or its reference is updated. However, when the array element is updated, data binding is not triggered, while myac. getitemat (0) in the data binding expression is triggered when the array element changes. Therefore, the text control whose ID is text2 is updated when you click button1, while the text control whose ID is text1 is not updated. When you click button2, copy myac2 to myac. This triggers all bindings to the array elements, whether using the square brackets [] syntax or using the getitemat () function.

Note that it is best to use the getitemat () function to bind an array element, instead of the square brackets [] syntax.