MACROMEDIA FLASH 8-LEARNING ACTIONSCRIPT 2.0 IN FLASH - Page 582

582 Creating Interaction with ActionScript
If you want to modify the text in the out_ti text input field from the previous exercise, your
code can become a lot more complex. If you use the Component inspector to set up bindings,
by default you create a two-way connection. This means that if you change either text field on
the Stage, the other text field changes as well. When you use ActionScript to create bindings,
your application works the opposite way. Runtime data bindings are one-way by default
unless you specify otherwise, as demonstrated in the following example.
To use ActionScript to create a two-way binding, you need to make some small modifications
to the code snippets from the previous procedure. This example uses the second, shortened
ActionScript snippet from step 7.
To create a two-way binding:
1. Open panel_as.fla from the previous example.
2. Modify your ActionScript slightly (see boldface code) to match the following ActionScript:
import mx.data.binding.*;
var src:EndPoint = new EndPoint();
src.component = in_ti;
src.property = "text";
src.event = "focusOut";
var dest:EndPoint = new EndPoint();
dest.component = out_ti;
dest.property = "text";
dest.event = "focusOut";
new Binding(src, dest, null, true);
The two changes you make to the ActionScript do the following:
■ Define an event property for the destination EndPoint instance.
■ Define two additional parameters for the Binding constructor.
You use the first parameter for advanced formatting options; you can set that value to
null or undefined. The second parameter defines whether the binding is two-way (true)
or one-way (
false).
You might wonder where the
focusOut event comes from. That’s where the ActionScript
becomes complicated. You can investigate the TextInput class and use some of the listed
methods (such as
change() or enter()), but you won’t find the focusOut event there.
The TextInput class inherits from the UIObject and UIComponent classes. If you view
the UIComponent class, which adds focus support to components, you see four
additional events:
focusIn, focusOut, keyDown, and keyUp. You can use these events
with the TextInput component.
3. (Optional) If you want the previous example to update the value in the out_ti text input
field, you can change the event from
focusOut to change.