FLEXYGEN

Adobe Flex and AIR development

Computed properties and binding

Updating views in response to model changes is a snap with Flex data binding.
A model property is set to be [Bindable] and and a view property is set to an expression in curly braces that refers to that property. For example, suppose MyModel.as has the following:

[Bindable]
public var description: String;

Then MyView.mxml can have this:

<mx:Panel title="{model.description}">
...
</mx:Panel> 

Flex implements this by dispatching a PropertyChangedEvent when “description” changes, but by implementing implicit getter and setter functions, one can customize the event. In the MVC sample I wrote, which I hope to post one of these days, I stumbled upon the following idiom, where several bindable properties are based on a single value changing. In SlideEditorModel.as:

public function selectSlides(slides: Array) : void {
	if (slides == null || slides.length == 0) {
		_selectedSlides = null;
	} else {
		_selectedSlides = slides;
	}
	dispatchEvent(new Event("selectionChanged"));
}

[Bindable(event="selectionChanged", type="flash.events.Event")]
public function get currentSlide() : Slide {
	if (_selectedSlides == null) {
		return null;
	} else {
		return _selectedSlides[0];
	}
}

[Bindable(event="selectionChanged", type="flash.events.Event")]
public function get hasSingleSelection() : Boolean {
	return _selectedSlides != null && _selectedSlides.length == 1;
}

[Bindable(event="selectionChanged", type="flash.events.Event")]
public function get hasSelection() : Boolean {
	return _selectedSlides != null && _selectedSlides.length > 0;
}

With the above in place, I was able to enable buttons based on “hasSelection” or “hasSingleSelection” in addition to binding to the current Slide.

<mx:Button label="Duplicate Slide"
	click="handleDuplicateSlide(event)"
	enabled="{slideShowEditorModel.hasSingleSelection}"/>

January 24, 2008 Posted by richard | tips | | 1 Comment