Bindable Read Only Getters

I had the opportunity to clear up some confusion on ‘bindable’ read-only ‘getters’ so I thought I’d post.

If you mark your ActionScript class [Bindable], the compiler will generate propertyChange events for the class’s public variables and properties exposed through getters and setters.

When a property exposed through a get / set pair is modified, a propertyChange event will be dispatched (from the setter). Use the comiplers -keep flag to inspect this for yourself.

If you have a property exposed through a getter but no matching setter, data binding will not detect changes to the ‘get’ value.

For example, you might have a getter value that is calculated from two other fields. To enable data binding on the ‘getter’ value, simply dispatch an event whenever the fields in the calculation are updated. You can then mark the getter function Bindable on those event names.

Here’s a working example


package
{
import flash.events.Event;

[Bindable]
public class BindingDemo
{
private var _numerator:Number = 0;
private var _denominator:Number = 1;

public function get numerator():Number
{
return _numerator;
}

public function set numerator(value:Number):void
{
if(value != _numerator)
{
_numerator = value;
this.dispatchEvent(new Event('numeratorChanged'));
}
}

public function get denominator():Number
{
return _denominator;
}

public function set denominator(value:Number):void
{
if(value != denominator)
{
_denominator = value;
this.dispatchEvent(new Event('denominatorChanged'));
}
}

[Bindable(event='numeratorChanged')]
[Bindable(event='denominatorChanged')]

public function get ratio():Number
{
if(_denominator == 0)
return 0;
return _numerator / _denominator;
}
}
}

And some MXML to try it out


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[

[Bindable] public var bdemo:BindingDemo = new BindingDemo();

]]>
</mx:Script>
<mx:Button x="193" y="23" label="Update" click="bdemo.numerator=Number(nvalue.text)"/>
<mx:Label x="20" y="25" text="Numerator"/>
<mx:Label x="20" y="51" text="Denominator"/>
<mx:Label x="30" y="90" text="Numerator" fontWeight="bold"/>
<mx:Label x="17" y="116" text="Denominator" fontWeight="bold"/>
<mx:Label x="62" y="142" text="Ratio" fontWeight="bold"/>
<mx:Label x="105" y="90" text="{bdemo.numerator}" id="num"/>
<mx:Label x="105" y="116" text="{bdemo.denominator}" id="den"/>
<mx:Label x="105" y="142" text="{bdemo.ratio}" id="ratio"/>
<mx:TextInput x="105" y="23" width="80" id="nvalue"/>
<mx:TextInput x="105" y="49" width="80" id="dvalue"/>
<mx:Button x="193" y="49" label="Update" click="bdemo.denominator=Number(dvalue.text)"/>

</mx:Application>

Try it out below.