What does the Flex [Bindable] tag do?

Question

Meaning . . . I've seen cases where I've bound components to a [Bindable] dataProvider. When I updated the data in the dataProvider, the component doesn't reflect the change immediately. Do I need to do something to refresh the data? What event causes a component to refresh its dataProvider data?

Answer 1

that would depend on what you did to the data. did you apply a filter, if so you'll need to refresh the data. did you do a sort, if so you'll need to refresh the data. Is your dataProvider an Array, if so this doesn't do binding, use an ArrayCollection.

Give us an example of what it is that isn't updating and we should be able to give specifc help.

Answer 2

This is probably overkill, but if you are really interested in what happens under the hood when you add the [Bindable] tag, I strongly recommend checking out Michael Labriola's Diving in the Data Binding Waters session from 360|Flex!San Jose. It is by far the most in-depth presentation on this subject that you will find.

To view it you'll need to download Adobe Media Player (which runs on Adobe Air). If you have problems subscribing to the 360|Flex sessions in the Adobe Media Player, follow Ted Patrick's advice from his blog post.

His presentation is also on Slideshare, but it's nowhere near as informative or entertaining.

Answer 3

Chapter 7 of the developer's guide deals exactly with this. I suggest you read it.

Excerpt:

Although raw data objects, such as an Array of strings or objects, are wrapped in collections when you use them as the value of a dataProvider property, using collections explicitly is a better practice. Using collections explicitly ensures data synchronization and provides both simpler and more sophisticated data access and manipulation tools than are available when you are using raw objects directly as data providers. Collections can also provide a consistent interface for accessing and managing data of different types.

See also this about data binding and arrays

Answer 4

"When a property is the source of a data binding expression, Flex automatically copies the value of the source property to any destination property when the source property changes. To signal to Flex to perform the copy, you must use the [Bindable] metadata tag to register the property with Flex, and the source property must dispatch an event."

Answer 5

If you're into fiddling around with the command line compiler, you can use the compile.keep-generated-actionscript flag to see the effect of adding [Bindable] to a property. Create a simple actionscript class called test and add a single bindable string property to it then compile it like this :

mxmlc -compiler.keep-generated-actionscript test.as

This will create a folder called "generated" containing all the extra action script, which in this case would be a single file called (probably) "_test-binding-generated.as".

You should be able to see from this that adding the bindable tag just creates a wrapper which implements IEventDispatcher and dispatches an event when the setter is called. It's this wrapper that your component will be listening to.

If your component isn't immediately reflecting the change in its display, this might mean you'll have to look into the redraw code of that component. The Tree control is pretty notorious for this kind of issue, mostly because updating can be expensive.