You’ve probably been using the Bindable metadata tag a lot of times with properties in your Flex applications. When a property is defined through getter and setter functions, you may take for granted that each time you set the value of the property, the corresponding setter is invoked, so you can perform your own operations in it. Well, this is not totally true with bindable properties. What I’m going to show is just something to remember whenever you use the Bindable metadata tag with properties defined through getter and setter. It is much easier to explain everything if we immediately look at the example application.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
pageTitle="Setter is not invoked when a bindable Flex property doesn\'t change - devahead BLOG"
layout="vertical" horizontalAlign="left"
viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
private var _notBindableProp: String = "";
public function get notBindableProp(): String
{
return _notBindableProp;
}
public function set notBindableProp(value: String): void
{
_notBindableProp = value;
logValueChange("notBindableProp", _notBindableProp);
}
private var _bindableProp: String = "";
[Bindable]
public function get bindableProp(): String
{
return _bindableProp;
}
public function set bindableProp(value: String): void
{
_bindableProp = value;
logValueChange("bindableProp", _bindableProp);
}
private var _bindableEventProp: String = "";
[Bindable("bindableEventPropChanged")]
public function get bindableEventProp(): String
{
return _bindableEventProp;
}
public function set bindableEventProp(value: String): void
{
_bindableEventProp = value;
logValueChange("bindableEventProp", _bindableEventProp);
dispatchEvent(new Event("bindableEventPropChanged"));
}
protected function logValueChange(propertyName: String, newValue: String): void
{
logArea.text += propertyName + " setter invoked: " + newValue + "\n";
}
]]>
</mx:Script>
<mx:Form>
<mx:FormItem direction="horizontal"
label="New value for the NOT BINDABLE property:">
<mx:TextInput id="notBindablePropText" width="150"/>
<mx:Button label="Set" click="{notBindableProp = notBindablePropText.text}"/>
</mx:FormItem>
<mx:FormItem direction="horizontal"
label="New value for the BINDABLE property:">
<mx:TextInput id="bindablePropText" width="150"/>
<mx:Button label="Set" click="{bindableProp = bindablePropText.text}"/>
<mx:Label text="{bindableProp}" fontWeight="bold"/>
</mx:FormItem>
<mx:FormItem direction="horizontal"
label="New value for the BINDABLE property WITH CUSTOM EVENT:">
<mx:TextInput id="bindableEventPropText" width="150"/>
<mx:Button label="Set" click="{bindableEventProp = bindableEventPropText.text}"/>
<mx:Label text="{bindableEventProp}" fontWeight="bold"/>
</mx:FormItem>
</mx:Form>
<mx:Label text="Log:"/>
<mx:TextArea id="logArea" width="400" height="300"/>
</mx:Application>
The property called notBindableProp is just a simple not bindable property. Whenever you set its value, the setter is invoked. bindableProp is a standard bindable property. If you try to set its value, you’ll quickly find out that the setter is invoked only if the new value is different from the value returned by the corresponding getter. So you cannot rely on doing something inside the setter when the new value is exactly the same as the previous one. What if you still want a bindable property, but you need to perform some operations in the setter every time a value is set, even if it’s equal to the previous one? You can simply define a custom event name in the Bindable metadata tag as you can see in the bindableEventProp. Every time a value is set for that property, the setter is invoked and you can perform your operations and then dispatch your own event.
Recent Comments