I've only done a bit of Flex development thus far, but I've preferred the approach of creating controls programmatically over mxml files, because (and please, correct me if I'm wrong!) I've gathered that you can't have it both ways — that is to say, have the class functionality in a separate ActionScript class file but have the contained elements declared in mxml.
There doesn't seem to be much of a difference productivity-wise, but doing data binding programmatically seems somewhat less than trivial. I took a look at how the mxml compiler transforms the data binding expressions. The result is a bunch of generated callbacks and a lot more lines than in the mxml representation. So here's the question: is there a way to do data binding programmatically that doesn't involve a world of hurt?
Best Answer
Don't be afraid of MXML. It's great for laying out views. If you write your own reusable components then writing them in ActionScript may sometimes give you a little more control, but for non-reusable views MXML is much better. It's more terse, bindings are extemely easy to set up, etc.
However, bindings in pure ActionScript need not be that much of a pain. It will never be as simple as in MXML where a lot of things are done for you, but it can be done with not too much effort.
What you have is
BindingUtils
and it's methodsbindSetter
andbindProperty
. I almost always use the former, since I usually want to do some work, or callinvalidateProperties
when values change, I almost never just want to set a property.What you need to know is that these two return an object of the type
ChangeWatcher
, if you want to remove the binding for some reason, you have to hold on to this object. This is what makes manual bindings in ActionScript a little less convenient than those in MXML.Let's start with a simple example:
This sets up a binding that will call the method
nameChanged
when thename
property on the object in the variableselectedEmployee
changes. ThenameChanged
method will recieve the new value of thename
property as an argument, so it should look like this:The problem with this simple example is that once you have set up this binding it will fire each time the property of the specified object changes. The value of the variable
selectedEmployee
may change, but the binding is still set up for the object that the variable pointed to before.There are two ways to solve this: either to keep the
ChangeWatcher
returned byBindingUtils.bindSetter
around and callunwatch
on it when you want to remove the binding (and then setting up a new binding instead), or bind to yourself. I'll show you the first option first, and then explain what I mean by binding to yourself.The
currentEmployee
could be made into a getter/setter pair and implemented like this (only showing the setter):What happens is that when the
currentEmployee
property is set it looks to see if there was a previous value, and if so removes the binding for that object (currentEmployeeNameCW.unwatch()
), then it sets the private variable, and unless the new value wasnull
sets up a new binding for thename
property. Most importantly it saves theChangeWatcher
returned by the binding call.This is a basic binding pattern and I think it works fine. There is, however, a trick that can be used to make it a bit simpler. You can bind to yourself instead. Instead of setting up and removing bindings each time the
currentEmployee
property changes you can have the binding system do it for you. In yourcreationComplete
handler (or constructor or at least some time early) you can set up a binding like so:This sets up a binding not only to the
currentEmployee
property onthis
, but also to thename
property on this object. So anytime either changes the methodcurrentEmployeeNameChanged
will be called. There's no need to save theChangeWatcher
because the binding will never have to be removed.The second solution works in many cases, but I've found that the first one is sometimes necessary, especially when working with bindings in non-view classes (since
this
has to be an event dispatcher and thecurrentEmployee
has to be bindable for it to work).