Recipe 19.7. Displaying Data with Components

Problem

You want to display data in a component when it is loaded from XML, a web service, or Flash Remoting, and you don't want to have to write any ActionScript.

Solution

Use data binding.

Discussion

Frequently an XMLConnector, WebServiceConnector, or RemotingConnector call returns data that you want to display to the user. You can certainly use ActionScript to accomplish that task. However, given that the primary purpose of the components is to keep you from having to write ActionScript to work with data, it would seemingly defeat the purpose to have to write ActionScript to display the data. Instead you can use a feature called data binding.

Data binding associates a field from the component schema with a component. For example, if a web service call returns a string, you can associate the return value with a text area component and Flash will automatically display the value in the component as soon as it is returned.

To work with data binding, use the Bindings tab from the Component Inspector panel. In the upper-left corner of the Bindings tab, you'll see two buttons: Add binding and Delete binding. Click the Add binding button to add a new association, by opening the Add Binding dialogbox. The dialogbox displays the component schema. It's important that you've defined the correct schema before you add a binding. From the dialog box, select the field from the schema that you want to associate with a component. When you click OK, the dialogbox will close and the new binding is added to the list in the Bindings tab. When you select the item from the list the name (exp 3pod.com)/value portion of the panel displays the binding details. You always need to define the following parameters:

direction

The direction defines how the data moves from component to component. If you select in, the data moves from the associated component to the current component. If you select out, the data moves from the current component to the associated component. If you select in/out, the data moves both waysif the data changes in either component then the data is updated in both.

bound to

When you double-click on the value column, the Bound To dialogbox opens, and you can select from the existing components that you want to associate with the current component. You are requested to select a component and a property of the component (or a field of the component's schema).

When you add a binding to a component, a corresponding binding is added to the associated component. For example, consider the case in which you have a WebServiceConnector called cwscExample and a TextArea component called ctaExample. When you add a new binding to cwscExample that binds the results field to the text property of ctaExample with a direction of out, a corresponding binding is added to ctaExample. In the ctaExample binding, the binding is for the text property. It is bound to the results field of cwscExample with a direction of in.

The example files available from demonstrate data-binding features.