Flash CS3 introduces many new and exciting features and delivers an entirely new experience in Flash dev.
Adobe Flash CS3
Flash MX 2004 - Data Binding
Streamline your web dev with a collection of Adobe software including the new Flash CS3 Pro.
Adobe Creative Suite 3
Adobe Creative Suite 3
A very common way of getting data between components is by using a Listener. Events are broadcast by components and any object that is registered to the event broadcaster as a listener can be notified of the event.
A function is applied to the listener to handle the event and execute operations based on it. But there's a more direct way to go about getting data between two components, and that's through data binding, which is what I'll be explaining in this tutorial.
Data binding is way of connecting components to each other. A binding is a statement that says "When property X of component A changes, copy the new value to property Y of component B." This does away with the Actionscript method of a Listener and bindings can be simply added or removed through the Component Inspector panel. Although data binding works with any component, its main purpose is to connect UI components to external data sources such as web services and XML documents. These external data sources are available as components with properties, which you can bind to other component properties.
I'm going to keep things simple for teaching purposes.
Start up a new Flash Document, and in the Components panel (Ctrl+F7) double click the List component to add it to the stage. Assign it an instance name of bindList. Now we need to fill this List component with information. This can be done through AS but for the sake of focusing on one thing, we'll use the Component Inspector (Alt+F7 if you don't see it).
Click the Parameters tab and then double click the data field, this should bring up a Values box. Click the plus (+) button three times to add three values. In order, give each field these values (the numbers are just representative of each field, don't add them in):
0: This is information about Joe.
1: This is information about Susan.
2: This is information about Chris.
Click OK. Now we need an equal number of labels for those 3 data values. Double click the labels field and in the Values box, click the plus (+) button to add 3 value fields. You should always have an equal number of data and label fields. In order, give each field these values (again, the numbers are just representative of each field, don't add them in):
0: Joe
1: Susan
2: Chris
Click OK. The List component is now set up for use. But we need another component to bind to the List and exchange it's values.
Go back to the Components panel and double click the TextArea component to add it to the stage, assign it an Instance name of bindText. Now that we have our two components it's time to bind them together.
Click the TextArea component to make it selected and go to your Component Inspector. Click on the Bindings tab and then click the plus (+) button to assign a new binding. There should only be one binding of text : string, Click OK. Since we only want to recieve data from the List component, change Direction to "in". Now to bind it to the List. Click the bound to field which should bring up the Bound To window. For the Component Path select the List (List, <bindList>) and for the Schema location choose selectedItem : Object. At the bottom of the window, tick the checkbox for Use path expression and add data for the value. Click OK.
You should have a bound value of: bindList:selectedItem.data. And with this done, you now have two bound components, with the TextArea component recieving the data value for each selected item of the List component. Test your movie and select each item of the List and you should see the data (This is information about....) appear in the TextArea.Working Example
A function is applied to the listener to handle the event and execute operations based on it. But there's a more direct way to go about getting data between two components, and that's through data binding, which is what I'll be explaining in this tutorial.
Data binding is way of connecting components to each other. A binding is a statement that says "When property X of component A changes, copy the new value to property Y of component B." This does away with the Actionscript method of a Listener and bindings can be simply added or removed through the Component Inspector panel. Although data binding works with any component, its main purpose is to connect UI components to external data sources such as web services and XML documents. These external data sources are available as components with properties, which you can bind to other component properties.
I'm going to keep things simple for teaching purposes.
Start up a new Flash Document, and in the Components panel (Ctrl+F7) double click the List component to add it to the stage. Assign it an instance name of bindList. Now we need to fill this List component with information. This can be done through AS but for the sake of focusing on one thing, we'll use the Component Inspector (Alt+F7 if you don't see it).
Click the Parameters tab and then double click the data field, this should bring up a Values box. Click the plus (+) button three times to add three values. In order, give each field these values (the numbers are just representative of each field, don't add them in):
0: This is information about Joe.
1: This is information about Susan.
2: This is information about Chris.
Click OK. Now we need an equal number of labels for those 3 data values. Double click the labels field and in the Values box, click the plus (+) button to add 3 value fields. You should always have an equal number of data and label fields. In order, give each field these values (again, the numbers are just representative of each field, don't add them in):
0: Joe
1: Susan
2: Chris
Click OK. The List component is now set up for use. But we need another component to bind to the List and exchange it's values.
Go back to the Components panel and double click the TextArea component to add it to the stage, assign it an Instance name of bindText. Now that we have our two components it's time to bind them together.
Click the TextArea component to make it selected and go to your Component Inspector. Click on the Bindings tab and then click the plus (+) button to assign a new binding. There should only be one binding of text : string, Click OK. Since we only want to recieve data from the List component, change Direction to "in". Now to bind it to the List. Click the bound to field which should bring up the Bound To window. For the Component Path select the List (List, <bindList>) and for the Schema location choose selectedItem : Object. At the bottom of the window, tick the checkbox for Use path expression and add data for the value. Click OK.
You should have a bound value of: bindList:selectedItem.data. And with this done, you now have two bound components, with the TextArea component recieving the data value for each selected item of the List component. Test your movie and select each item of the List and you should see the data (This is information about....) appear in the TextArea.