Update the UI in real time as data changes
Royale, like Flex before it, makes it easy to pass data around your application. A change to data can automatically update the display of that data in the user interface, and potentially in calculations or other functions that use that data. The feature that makes this possible without having to write lots of code is data binding.
Data binding requires a source property, a destination property, a triggering event that indicates when to copy the data from the source to the destination, and a function to actually do the copying.
There are several ways to deploy data binding:
You can bind the value of a property in the user interface to that value of another property very simply. One of the TextInput examples in Tour de Jewel{:target=‘_blank’} uses data binding twice:
If you clear the existing text in the first text field in the example, then type in a string, what you type in appears in the second and fourth text fields, as you type it.
The source property is the text property of a TextInput control. The key part of its code is
<j:TextInput text="A TextInput" change="textInputChange(event)"/>
When you first open the example, the control displays “A Text Input”.
The destination property is the text property of two other TextInput controls. The ID for the first one is “textToChange”, and its code looks like this:
<j:TextInput id="textToChange"> <j:beads> <j:TextPrompt prompt="With prompt..."/> </j:beads> </j:TextInput>
The second destination shows a different way to bind properties. This TextInput control is disabled, but the value of its text property is bound to the “textToChange” text property value:
<j:TextInput text="{textToChange.text}"> <j:beads> <j:TextPrompt prompt="Disabled with prompt..."/> <j:Disabled/> </j:beads> </j:TextInput>
This second destination‘s value won’t change until the first one's does.
The triggering event is any change to the text property of the first control: change="textInputChange(event)"
.
When there's a change, the control sends an event to its change handler, textInputChange(), the function that carries out the changes. Its code looks like this:
private function textInputChange(event:Event):void { textToChange.text = event.target.text; }
When the text in the first TextInput component changes, it triggers the event which changes the text in the second component. That, in turn, changes the text in the third component.
Here is a data binding tutorial{target=“_blank”} using the Tour de Jewel example.
Details coming soon
Details coming soon