StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Don't be afraid of MXML. It's great for laying out views. If you write your own <em>reusable</em> 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.</p> <p>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.</p> <p>What you have is <code>BindingUtils</code> and it's methods <code>bindSetter</code> and <code>bindProperty</code>. I almost always use the former, since I usually want to do some work, or call <code>invalidateProperties</code> when values change, I almost never just want to set a property.</p> <p>What you need to know is that these two return an object of the type <code>ChangeWatcher</code>, 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.</p> <p>Let's start with a simple example:</p> <pre><code>BindingUtils.bindSetter(nameChanged, selectedEmployee, "name"); </code></pre> <p>This sets up a binding that will call the method <code>nameChanged</code> when the <code>name</code> property on the object in the variable <code>selectedEmployee</code> changes. The <code>nameChanged</code> method will recieve the new value of the <code>name</code> property as an argument, so it should look like this:</p> <pre><code>private function nameChanged( newName : String ) : void </code></pre> <p>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 <code>selectedEmployee</code> may change, but the binding is still set up for the object that the variable pointed to before.</p> <p>There are two ways to solve this: either to keep the <code>ChangeWatcher</code> returned by <code>BindingUtils.bindSetter</code> around and call <code>unwatch</code> 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.</p> <p>The <code>currentEmployee</code> could be made into a getter/setter pair and implemented like this (only showing the setter):</p> <pre><code>public function set currentEmployee( employee : Employee ) : void { if ( _currentEmployee != employee ) { if ( _currentEmployee != null ) { currentEmployeeNameCW.unwatch(); } _currentEmployee = employee; if ( _currentEmployee != null ) { currentEmployeeNameCW = BindingUtils.bindSetter(currentEmployeeNameChanged, _currentEmployee, "name"); } } } </code></pre> <p>What happens is that when the <code>currentEmployee</code> property is set it looks to see if there was a previous value, and if so removes the binding for that object (<code>currentEmployeeNameCW.unwatch()</code>), then it sets the private variable, and unless the new value was <code>null</code> sets up a new binding for the <code>name</code> property. Most importantly it saves the <code>ChangeWatcher</code> returned by the binding call.</p> <p>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 <code>currentEmployee</code> property changes you can have the binding system do it for you. In your <code>creationComplete</code> handler (or constructor or at least some time early) you can set up a binding like so:</p> <pre><code>BindingUtils.bindSetter(currentEmployeeNameChanged, this, ["currentEmployee", "name"]); </code></pre> <p>This sets up a binding not only to the <code>currentEmployee</code> property on <code>this</code>, but also to the <code>name</code> property on this object. So anytime either changes the method <code>currentEmployeeNameChanged</code> will be called. There's no need to save the <code>ChangeWatcher</code> because the binding will never have to be removed.</p> <p>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 <code>this</code> has to be an event dispatcher and the <code>currentEmployee</code> has to be bindable for it to work).</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload