Binding XML Data Directly to UI Components

You use data binding to add the data from your XML document to one or more UI components. This is done visually, through the Component Inspector. Visual data binding is much easier than writing ActionScript to populate UI components. Instead of looping through childNodes and using the addItem method, you can configure the bindings in Bindings tab of the Component Inspector. For example, you can bind XML directly to the dataProvider of a ComboBox or List component.

The Bindings tab of the Component Inspector specifies how data is bound to another component. You will need to bind from the XMLConnector to a data-aware component, such as a List, DataGrid, or ComboBox. You can also use the Bindings tab to specify further bindings between UI components. For example, you could bind a List component to a TextInput component. When you click a List item, further details display in the TextInput component.

Youll need to set the direction for the binding. Bindings involve two directions: the data will come out of one componentthe sourceand go into anotherthe target. This is the case where you want to display external data within Flash, without tracking updates. For example, the data could come out of the XMLConnector component into a UI component such as a List or TextInput.

Sometimes youll have a two-way binding between your components, especially where you want to be able to update your content within Flash. In this case, the content in both components is synchronized, regardless of which component makes the change. Youll see an example of this later, when we bind a DataSet component to UI components using two-way bindings.

Its important to note that you have to add your bindings in the first frame of your Flash movie. They wont work on components that you add later in the timeline. The other restriction is that you cant bind components in multiple scenes in a Flash movie.

Data binding is a huge topic, and I wont give it full coverage here as its beyond the scope of this book. Instead, I plan on showing you some of the most important aspects so that you can create bindings using the XMLConnector component.

Adding a binding

To add a binding, first select the XMLConnector component on the Stage and display the Bindings tab in the Component Inspector. Click the Add binding button, as shown in Figure 8-18.

Figure 8-18: The Add binding button in the Bindings tab of the Component Inspector

Youll need to identify which component property you wish to bind. If youre binding to a data-aware component, youll usually choose an Array . You might choose a String property if you were binding directly to the text property of a TextInput component.

Select the relevant element from your schema and click OK . Make sure that youve chosen the parent of any items that you want to include within your UI component. Figure 8-19 shows the selection of the contact Array. Choosing the contact element allows us to access the id , name , address , and phone elements.

Figure 8-19: Selecting an element for binding

In Figure 8-19, I selected an Array element. This means that I can bind the data to the dataProvider of a data-aware component such as a List, ComboBox, or DataGrid.

Once youve added the binding, youll see it displayed within the Bindings tab, as shown in Figure 8-20. Notice that the path for the binding uses a dot notation to drill down through the elements in the structure.

Figure 8-20: A binding in the Bindings tab

In Figure 8-20, were binding to the contact element in the phoneBook element. This element is part of the results property of the XMLConnector component.

After youve added a binding, youll need to configure the other component involved in the binding.

Configuring the binding

You can use the Component Inspector to select a direction and a second component for the binding. The directionin or outspecifies whether the data is sent out of a component or received by a component. You can also change the way that the bound data displays in the component. Table 8-4 summarizes each of the settings in the Bindings tab and explains their purpose.

Table 8-4: Settings for each binding
Setting	Purpose
direction	Specifies whether the binding sends data, receives it, or does both.
bound to	Specifies the other component or target for the binding.
formatter	Lists any formatting to change the display within the target component. Choose from None , Boolean , Compose String , Custom Formatter , Date , Rearrange Fields , and Number Formatter .
formatter options	Lists the options available for the chosen formatter.

Youll learn more about formatters a little later in this chapter.

If youre directly binding from an XMLConnector component to a UI component, you would set the direction to out and select a UI component for binding. If youve chosen an array element from the results, youll need to select a component capable of displaying more than one value. This could include a ComboBox, List, or DataGrid component. You can then set the array as the dataProvider for the component. Alternatively, you could bind to the selectedIndex property. Youll see examples of both of these bindings later in this chapter.

When you click in the bound to setting, a magnifying glass button will appear at the right of the field. Click the button to select a target component. Make sure that you have set an instance name for the target.

Figure 8-21 shows the Bound To dialog box. In Figure 8-21, Ive selected a List component. Because the List component has a dataProvider property, I can select the dataProvider option from the Schema location section of the dialog box. A dataProvider is an array, so you can assign the array from the XMLConnector results.

Figure 8-21: A binding in the Bindings tab

You may notice the arrows in Figure 8-21 indicating what directions are available to each binding. The right arrow indicates that the XMLConnector can send data to the dataProvider of the name_list component. This is equivalent to adding the contents from the XML document in the UI component. Because the binding is one way, the UI component cant add a new item to the address_xc component.

If we choose the SelectedIndex location, we can add a two-way binding. This means that selecting an item in the component selects the same item in the XML data. You would use the SelectedIndices item if you were selecting multiple items in the UI component.

Click OK to set the binding. If you select the target UI component on the Stage, youll see that Flash has added an equivalent binding in the Bindings tab.

If the data has more than one child element, youll assign all the children to the bound component. For example, if youve bound an array directly to the dataProvider of a component, it will display a list of all values from the array, separated by commas. This is shown in a List component in Figure 8-22.

Figure 8-22: Without a formatter, the the child elements display in the component.

You can add a formatter to the binding to choose which element displays in the target component. In Figure 8-22, we could use a Rearrange Fields formatter to assign values to the label and data properties of the List component. This would allow us to display only the name in the List.

To make this clearer, well work through an example where we bind the contents of the address.xml file directly to a List component. Well use a formatter to display the data correctly.

Exercise 2: Binding data to a List component

In exercise 2, well use the file from exercise 1 and bind the name element to a List component. If you didnt complete exercise 1, you can use the starter file loadContacts.fla .

Open Flash if necessary and open either the starter file loadContacts.fla or your completed file from exercise 1. Make sure the file is in the same folder as the address.xml file.
Drag a List component to the UI layer and size it appropriately in the Properties panel. Give it the instance name name_list .
Select the XMLConnector component, display the Bindings tab in the Component Inspector, and click the Add binding button.
Select the contact array from the XMLConnector schema and bind to the dataProvider of the name_list component. Click OK to create the binding.
Select the binding and change the direction to out .
Test the movie, and youll see the complete contact element displayed in the List component. Your movie should look like the image shown in Figure 8-21. Well need to add a formatter to display only the name.
Choose the Rearrange Fields formatter. Well use this to choose the name element for the label within the list. We can also add a data value at the same time.
Click the formatter options setting to show the magnifying glass icon. Click the icon and enter the settings shown in Figure 8-23.

Figure 8-23: Setting the Rearrange Fields options

We have set the label property of the List items to the name field in the schema and the data to the id field. Click OK to apply the settings.

Test the movie and you should see something similar to the screenshot displayed in Figure 8-24. You can see the completed file saved as loadAddress_Binding.fla in your resource files.

Figure 8-24: The List component showing only the name from the XML document

In this exercise, we bound the data from an XMLConnector component directly to a List component. We added a Rearrange Fields formatter so that we displayed only the name within the List.

We can extend the example so that when we click on the name, the other details will display in UI components. Well do this by adding more bindings.

Exercise 3: Adding multiple bindings to an XMLConnector component

In this exercise, well add multiple bindings so that when we choose an item from the List, the details display in a TextInput and TextArea component. You should complete exercise 2 before you start this exercise, but if you didnt, you can use the starter file loadAddress_Binding.fla instead.

Open Flash if necessary and open either the starter file loadAddress_Binding.fla or your completed file from exercise 2. Again, the file should be in the same folder as address.xml .
Drag a TextInput component to the UI layer, to the right of the List component. Give it the instance name phone_txt . Well use this to display the phone number from the XML document.
Drag a TextArea component below the TextInput and give it the instance name address_txt . Well display the address in this component. Figure 8-25 shows my Flash movie at this point. Notice that Ive added static text fields with a description to the left of the TextInput and TextArea components. You can also see the XMLConnector component to the left of the Stage.

Figure 8-25: The address book interface
Select the XMLConnector component and add a new binding to the phone element.

Set the direction to out and bind it to the text property of the TextInput component. Youll see an additional setting at the bottom of the Bindings tab called Index for ˜contact . Figure 8-26 shows the setting; the value is currently set to . This setting shows which value from the array to display in the Text Input component. Currently it is set to display the first element from the arraythe element at position 0.

Figure 8-26: The additional Index for ˜contact setting
Click the magnifying glass icon in the Index for ˜contact setting to bring up the Bound Index dialog box. Uncheck the Use constant value check box. Select the List component and choose the selectedIndex : Number option. Weve told Flash that the value in the TextInput depends on the item chosen from the List, that is, the selectedIndex . Figure 8-27 shows the settings for the Bound Index dialog box.

Figure 8-27: The settings for the phone binding
Test the movie and check that the phone number displays when you select a name from the List component. Well repeat the process to bind the address to the TextArea component.
Make sure that you select the XMLConnector on the Stage. Add another binding, this time choosing the address element.

Set the direction to out and bind the data to the TextArea component. Set the index setting to use the selectedIndex of the List component.
Test the movie. You should be able to select an item from the List component and see the relevant values in the TextInput and TextArea components. You may need to resize and rearrange the components on the Stage so that you can display all data. Figure 8-28 shows my completed movie. You can see the completed loadAddress_multipleBinding.fla in your resource files.

Figure 8-28: The completed phone book application

In the previous examples, youve seen how easy it is to load XML data into an XMLConnector and bind it directly to one or more UI components. We created a very simple application that displays a list of contacts. You can click each name to display further details in other UI components. If you compare this process with the examples in Chapter 4, youll see that its very easy to use an XMLConnector, UI components, and data binding. Things become a lot more complicated if you want UI components to update your XML data.