Binding data between components

Flex provides simple syntax for binding the properties of components to each other. In the following example, the value inside the curly braces ({ }) binds the text property of a TextArea control to the text property of a TextInput control. When the application initializes, both controls display the text Hello. When the user clicks the Button control, both controls display the text Goodbye.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
   <mx:Panel title="My Application" marginTop="10" marginBottom="10"
      marginLeft="10" marginRight="10" >

      <mx:TextInput id="textinput1" text="Hello"/>
      <mx:TextArea id="textarea1" text="{textinput1.text}"/>
      <mx:Button label="Submit" click="textinput1.text='Goodbye';"/>

</mx:Panel>
</mx:Application>

The following figure shows the application rendered in a web browser window after the user clicks the Submit button:


Data binding example.

As an alternative to the curly braces ({ }) syntax, you can use the <mx:Binding> tag, in which you specify the source and destination of a binding. For more information about data binding, see Binding and Storing Data in Flex in Developing Flex Applications.


Version 1.5

 

Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/flex_docs_en/00000019.htm