Flash CS4 Professional ActionScript 2.0

Creating bindings between UI components using ActionScript

It isn't difficult to bind data between two components at runtime. You must remember to include the DataBindingClasses component in your document for it to work, because that component contains the classes that you need to work with.

 To create a binding between two TextInput components using ActionScript:

  1. Create a new Flash document called panel_as.fla.
  2. Drag two copies of the TextInput component onto the Stage.
  3. Give the components the following instance names: in_ti and out_ti.
  4. Select Window > Common Libraries > Classes and open the new common library called Classes.fla.
  5. Drag a copy of the DataBindingClasses component into the Library panel, or drag the component onto the Stage and then delete it.

    You can close the common library after you finish. After you delete the DataBindingClasses component from the Stage, Flash leaves a copy in the library.

     

    If you forget to delete the DataBindingClasses component from the Stage, the component's icon is visible at runtime.

    NOTE

     

    When you created a binding using the Component inspector in the previous example, Flash added the DataBindingClasses component automatically to the FLA file. When you use ActionScript to create data bindings, you must copy that class into your library yourself, as shown in the following step.

  6. Insert a new layer and name it actions.
  7. Add the following ActionScript to Frame 1 of the actions layer:
    var src:mx.data.binding.EndPoint = new mx.data.binding.EndPoint();
    src.component = in_ti;
    src.property = "text";
    src.event = "focusOut";
    var dest:mx.data.binding.EndPoint = new mx.data.binding.EndPoint();
    dest.component = out_ti;
    dest.property = "text";
    new mx.data.binding.Binding(src, dest);
    
    

    If you prefer the somewhat shortened version, you could import the binding classes and use the following code instead:

    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";
    new Binding(src, dest);
    
    

    This ActionScript creates two data binding end points, one for each component that you're binding. The first endpoint you create defines which component it is binding from (in_ti), which property to watch for (text), and which event will trigger the binding (focusOut). The second endpoint you create lists only the component and property (out_ti and text, respectively). Finally, you create the binding between the two endpoints when you call the constructor for the Binding class (new Binding(src, dest)).

    You don't need to use fully qualified class names (such as mx.data.binding.EndPoint) in your ActionScript, as you saw in the first code snippet. If you use the import statement at the beginning of your code, you can avoid using fully qualified names. When you import all the classes in the mx.data.binding package using the wildcard (*) (the package includes both the EndPoint and Binding classes), you can shorten your code and directly reference the EndPoint and Binding classes. For more information on import statements, see the import entry in the ActionScript 2.0 Language Reference.

  8. Select Control > Test Movie to test the code in the test environment. Enter some text into the in_ti text input field.

    After the in_ti instance loses focus (click the Stage, press Tab, or click the second field), Flash copies any text that you input into in_ti to the out_ti text field.

  9. Select File > Save to save your changes.

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:

  3. Define an event property for the destination EndPoint instance.
  4. 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.

  5. (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.
  6. Select Control > Test Movie to test the document.

    Flash changes the second value in the in_ti text input field and updates the value for out_ti. You successfully created a two-way connection.

You can use the Binding classes with most user interface components of version 2 of the Adobe Component Architecture, not just the TextInput component. The following example demonstrates how to use ActionScript to bind CheckBox instances and Label components during runtime.

 To use binding classes with the CheckBox component:

  1. Create a new Flash document.
  2. Select File > Save As and name the new file checkbox_as.fla.
  3. Select Window > Common Libraries > Classes.
  4. Drag a copy of the DataBindingClasses class into the document's library.
  5. Drag a copy of the CheckBox component onto the Stage and give it the instance name my_ch.
  6. Drag a copy of the Label component onto the Stage and give it the instance name my_lbl.
  7. Create a new layer and name it actions.
  8. Add the following ActionScript to Frame 1 of the actions layer:
    var srcEndPoint:Object = {component:my_ch, property:"selected", event:"click"};
    var destEndPoint:Object = {component:my_lbl, property:"text"};
    new mx.data.binding.Binding(srcEndPoint, destEndPoint);
    
    

    You use objects to define the endpoints instead of creating new instances of the EndPoint class, as demonstrated in the previous exercises in this section. The code snippet in this step creates two objects, which act as endpoints for the binding. You create the binding when you call the constructor for the Binding class. To reduce the amount of code (and readability) even more, define the objects inline as shown in the following snippet:

    new mx.data.binding.Binding({component:my_ch, property:"selected", event:"click"}, {component:my_lbl, property:"text"});
    
    

    This ActionScript reduces the readability of your code, but it also reduces the amount of typing you have to do. If you share your FLA (or ActionScript) files, you might want to use the first snippet of ActionScript, because it is more reader friendly.