Data Binding


Data binding is one of the nicest features of components. It allows you to link components together without having to use ActionScript.

To data bind one component to another, you use the Bindings tab in the Component Inspector panel, as shown in Figure 16.8. You select the Add Binding button, and the Add Binding dialog box will appear with a list of all the available data binding values (see Figure 16.9). Next, return to the Component Inspector panel, open the Bindings tab, select your new binding, and click the Bound To field where a magnifying glass will appear. Select the magnifying glass, and the Bound To dialog box will appear (see Figure 16.10), which will allow you to choose which component to bind to as well as which of its binding values.

Figure 16.8. The Binding tab in the Component Inspector.


Figure 16.9. The Add Binding dialog box for choosing which data binding element you want to bind.


Figure 16.10. The Bound To dialog box to choose which data binding element to bind to.


It is difficult to grasp until you do it yourself, so follow these steps to data bind a List component to a TextInput component:

1.

Create a new Flash document.

2.

Drag an instance of the List component onto the left part of the stage, and give it an instance name of myList.

3.

Drag an instance of the TextInput to the right of the List component, and give it an instance name of myText.

4.

Select the List component, open up the Component Inspector, and then select the Bindings tab.

5.

Choose the Add Binding button.

6.

From the list in the Binding dialog box, choose selectedItem : Object and click OK.

7.

Now select the Bound To field in the Component Inspector and click the magnifying glass that appears.

8.

Select the TextInput component in the left window, and then choose text : String in the right window and click OK.

9.

Now create a new layer called actions, and place this code in the first frame:

 //create the necessary arrays var names:Array = new Array("David","Ben","Eddie","Todd","Doug","Paul"); //now set the dataProvider property to this array myList.dataProvider = names; 

The code creates an array of names, and fills the List component by means of the dataProvider property.

Test the movie, and you will see that when you select a name from the List component, that name appears in the TextInput component automatically.

Data binding is a great way to quickly and easily link different components together to share data. You will see data binding again in Chapter 25, "Web Services and Flash."

Now that you have seen a great deal about the components that come with Flash, it's time to create one.




Macromedia Flash Professional 8 Unleashed
Macromedia Flash Professional 8 Unleashed
ISBN: 0672327619
EAN: 2147483647
Year: 2005
Pages: 319

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net