A simple binding example

The following procedure provides a simple illustration of how data binding connects one UI component to another. In the example, the value properties of component instances stepper1_nm and stepper2_nm are bound to each other, and the value properties of stepper3_nm and myInput_txt are bound to each other. In a real-world application, you would most likely import a schema, define additional bindable component properties, and create multiple bindings between data components and UI components.

To connect UI components to create data binding:

  1. Add a NumericStepper component to the Stage, and name it stepper1_nm.
  2. Add another NumericStepper component, and name it stepper2_nm.
  3. With stepper1_nm selected, open the Component inspector, and click the Bindings tab.
  4. Click the Add Binding (+) button to add a binding.
  5. In the Add Binding dialog box, select Value, and click OK.
  6. In the Name/Value section at the bottom of the Bindings tab, click the Bound To
    item under Name, and click the magnifying glass icon across from the Bound To item under Value.
  7. In the Bound To dialog box, select component stepper2_nm under Component Path, and click OK.
  8. Select Control > Test Movie. Click the Up and Down buttons on component stepper1_nm.

    Each time you click the buttons on stepper1_nm, the value property of stepper1_nm is copied to the value property of stepper2_nm. Each time you click the buttons on stepper2_nm, the value property of stepper2_nm is copied to the value property of stepper1_nm.

  9. Return to editing the application.
  10. Add another NumericStepper component and name it stepper3_nm.
  11. Add a TextInput component called myInput_txt.
  12. Repeat steps 4-7 and bind the value property of stepper3_nm to the text property of myInput_txt.
  13. Select Control > Test Movie. Type a number in the text input field, and press Tab.

    Each time you enter a new value, the text property of myInput_txt is copied to the value property of stepper3_nm. When you click the Up and Down buttons on stepper3_nm, the value property of stepper3_nm is copied to the text property of myInput_txt.

For more tutorials that show you how to create data bindings, see www.macromedia.com/devnet/mx/flash/data_integration.html.


Version 8

 

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

Current page: http://livedocs.adobe.com/flash/8/main/00000761.html