Flash 8 Documentation

Using Flash > Data Integration (Flash Professional Only) > Data binding (Flash Professional only) > Working with bindings in the Bindings tab (Flash Professional only) > Defining what to bind to

Defining what to bind to

When you expose a component property for binding, you need to define what to bind the property to. The Bound To dialog box appears when you click Bound To in the Binding Attributes pane of the Bindings tab. The Bound To dialog box includes the Component Path pane and the Schema Location pane.

The Component Path pane shows a tree of components that have properties to which you can bind. The tree is based on the current Stage editing environment:

• If the Stage shows the contents of the document root, a single component path tree appears relative to the document root.

  NOTE

  Component instances are displayed only if they exist in Frame 1 of the edited document root or in Frame 1 of any screen/clip whose instance exists in the edited document root. This pane shows only components, not text fields.

• If the Stage shows the contents of a movie clip being edited from the library, two component path trees appears. The first appears from the root of the symbol being edited, and the second appears from the document root, allowing bindings to instances within the document.

  NOTE

  Bindings to this second component tree do not appear in the Bound To instances when they are selected. They appear only as bindings from the Bound From component instance.

The Schema Location pane shows the schema tree of the component selected in the Component Path pane. This is the same information that appears in the Schema Tree pane of the Component inspector Schema tab.

You can use a dynamic value or a constant value for the Bound To property.

To use a dynamic value for the Bound To property:

1. Select a component in the Component Path pane.
2. Do one of the following actions to select a schema item for the data:
   • Select a schema item using the Schema tree located within the Schema Location pane.
   • Select Use Path Expression, select a component property from the schema tree, and enter a path expression. For more information, see Adding bindings using path expressions.

To use a constant value for the Bound To property:

• Select Use Constant Value, and enter a constant value, such as 3, a string, or true. You can use any value that is valid for the schema item. When you use a constant value, the selected component path, schema location, and path expression are ignored. You can bind to a constant value only when the Direction attribute for the binding is set to In.

Creating an indexed binding

In the example application created in Creating a simple application, the data grid displays the dinner menu. The description of each food item, however, is too long to fit in the data grid. Ideally, the user could click an item in the data grid and read the full description of a food item, perhaps in a text box below the data grid. To accomplish this, you would create an indexed binding to the data array.

This section shows you how to create an indexed binding to connect a field in your data source with the selected index of another component. The most common use for an indexed binding is to the selectedIndex property of a UI element. When you create a binding to the index of an array, a setting for its value is dynamically added to the Schema Attributes pane; you use this setting, the Index for field, to specify to what to bind the index.

In the following example, you add a text box to display the full description of the food item when a user clicks on the item in the data grid.

To create an indexed binding:

1. If you haven't already done so, create the example application shown in Creating a simple application.
2. Drag a TextArea component to the Stage and name it myTextArea.
3. Select the xmlConn instance, click the Bindings tab, click the + symbol, and select the description:String property, which is in the food array.

   Notice that on the Bindings tab, the attribute Index for 'food' is dynamically added, as shown in the following image; you'll fill in this value in a later step.

   
   
   

4. With the results:dinner_menu:food.[n].description:String field selected on the Bindings tab, click Bound To, click the magnifying glass icon, select myTextArea, and select the text:string property.

   The text area will be populated by the description property of the food array.

   Next, you define the index value for the food array, so that when the user clicks a different item in the data grid, the correct description populates the text box.

5. Click Index for 'food', click the magnifying glass icon, deselect Use Constant Value, select the menu_dg DataGrid instance, and select selectedIndex:Number. The settings for the indexed binding appear in the Bindings tab, as shown in the following image:

   
   
   

6. Next, set the DataGrid index default value to 0 to make it available for data binding: select the menu_dg instance, click the Schema tab, select selectedIndex:number, and in the Default Value field in the lower pane, type 0.
7. Save and test the application. Click Load Data, then click different items in the data grid.

   The text area updates with the detailed description for each food item. Each time the user selects a new item in the data grid, the index of the array is updated to show the data associated with the new item.

   NOTE

   The index for property appears only in the Binding attributes pane for a schema item that is the field of an object within an array.

Sometimes you might need to manually define a schema that identifies a schema item as a field of an object contained within an array. In the following example, the id, billable, rate, and duration schema fields are all considered attributes of an object contained within the row array:

results : XML
   datapacket : Object
      row : Array
         [n] : object
            @id : Integer
            @billable : Boolean
            @rate : Number
            @duration : Integer

If a binding is created for any of these items, an index for 'row' property appears in the Binding Attributes pane, so that an index can be specified for the row array. Flash uses the [n] schema field to identify this type of relationship. Therefore, you might need to duplicate this entry if you are manually creating a schema. To do this, you add a new schema field under the row : Array node and set Field Name for the schema field to [n]. The compiler reads this value and creates an index for property if it is used within a binding.

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/00000769.html

Add Comment