Recently, a new mechanism of defining two-way data binding has been added to the Gumbo sources. It makes creating such bindings easier and it offers two ways to do it:
- Using the "@{expr}" binding syntax
- Setting the new property "twoWay" of the "" tag to "true"
Here is an example to show both methods:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
<![CDATA[
private static const LOREM:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque a nunc nec elit vulputate hendrerit. Sed adipiscing. Proin non metus in odio imperdiet ultricies. Vivamus vestibulum purus sit amet sapien. Quisque sollicitudin. Phasellus vitae elit. Donec sodales, nisl eu adipiscing convallis, felis nisl ullamcorper arcu, in lobortis pede mi ac erat. Praesent in ipsum sed mi vulputate bibendum. Donec malesuada. Quisque lobortis. Vestibulum sit amet augue et ligula interdum dignissim. Maecenas vehicula elit bibendum ipsum.";
[Bindable]
private var txt:String;
]]>
</mx:Script>
<mx:Binding source="txt" destination="ta2.text" twoWay="true" />
<mx:HBox>
<mx:TextArea id="ta1" height="150" text="{LOREM}" verticalScrollPosition="@{ta2.verticalScrollPosition}"/>
<mx:TextArea id="ta2" height="150" />
</mx:HBox>
<mx:Button label="Set Text" click="txt = LOREM" />
<mx:Text width="400" text="{txt}" />
</mx:Application>
You need Flash Player 10 to view the application:
To test it click on the "Set Text" button and start dragging both scrollbars and editing the text of the second TextArea.
Here I use the first method to bind the positions of the vertical scrollbars of both TextAreas. No matter which scrollbar you move, the other will follow.
The second method is used to bind the text of the second TextArea with the bindable property "txt". To view its value, it was also bound (one-way) to the Text control.
