Two-way Bindings

Wednesday, June 24th, 2009 | examples

Binding between two properties in Flex 4 is insanely easy now. Instead of just using “{}”, now you can add an @ to make it go both ways: “@{}”. In this example, you’ll see the @ in the text property of the second TextArea which will two-way bind with the text property of the first TextArea.

You can test this out by typing the the two TextAreas below:

<?xml version="1.0" encoding="utf-8"?>
<s:Application 
	xmlns:fx="http://ns.adobe.com/mxml/2009" 
	xmlns:s="library://ns.adobe.com/flex/spark" 
	xmlns:mx="library://ns.adobe.com/flex/halo" 
	>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:TextArea 
		id="firstTextField" 
		width="100%" 
		height="50%"
		fontSize="20"
		/>
	<s:TextArea 
		id="secondTextField" 
		text="@{firstTextField.text}" 
		width="100%" 
		height="50%"
		/>
</s:Application>