nwebb

When the value of a bindable property changes you may want to format the data before displaying it, or even use the data to generate some new data for display.

For example, you have a Combo component which needs to display a range of years - here is an example (right-click to view source):

The data you receive may be in the following format (generic object used here for simplicity):

As you can see, it's not in a format suitable for our Combo, but this object may be what you are assigning to some bindable property:

It would be nice if every time it changed we could parse through it, generate an array of years to be displayed and have our Combo display that Array as its dataProvider value.

Solution
Rather than simply setting the bindable property dateRangeObj as the dataProvider for our Combo, we can also wrap it in a method call:

This ensures that every time the value of dateRangeObj changes, the method createYears() is triggered and the dateRangeObj is sent in as an argument. We then use the data within dateRangeObj to create and return a brand new Array, which the Combo then displays:

This is not the only way to trigger a function upon a binding value change, but it's quite a compact way of doing it.

As you can see, the only place createYears() is called is from within the binding, yet it's triggered every time dateRangeObj is updated.

If you're using FF3 and have noticed that your breakpoints are being ignored or that your trace statements are no longer outputting anything then check out this Jira issue: http://bugs.adobe.com/jira/browse/FB-13064

In my case the 'culprit' turned out to be the Adblock Plus plugin, although there are obviously bigger issues here.  As an interim solution I disabled the plugin and went on my merry way.

Update (28/06/2008):

This is Mozilla bug 441424
https://bugzilla.mozilla.org/show_bug.cgi?id=441424 which is a dupe of Mozilla https://bugzilla.mozilla.org/show_bug.cgi?id=438830

We are hoping it will be fixed in FF 3.01. Feel free to add votes to the Mozilla bug.
Resolving as external.

Quick Tip:

I've just been asked how to add additional columns to a DataGrid when changing from one state to another:

Most people who create different states do so in Design View because the syntax is not particularly intuitive. It doesn't appear that you can add new columns to an existing DataGrid in Design View, and while I'm sure you can hand-code the tags, the solution can be simplified if you approach it from a different angle. Create all the necessary columns in your base state, then set the ones you don't need in the base state, to be invisible (rather than actually trying to add additional columns). In your second state you can use the SetProperty tag to toggle their 'visibile' property.

Right-click the above example to view source or check out the code below: