Flex component binding click handlers in application - actionscript-3

Question

I have created a component with 2 buttons. Each button's click function is bound to a variable. I need to swap out the default button handlers that are defined in the component with the handlers that are defined in the application.
ZoomButtons.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
preinitialize="onPreinitialize(event)">
<mx:script>
import mx.events.FlexEvent;
[Bindable] public var zoomOutHandler:Function;
[Bindable] public var zoomInHandler:Function;
protected function onPreinitialize(event:FlexEvent):void {
zoomOutHandler = localZoomOutHandler;
zoomInHandler = localZoomInHandler;
}
private function localZoomOutHandler(event:MouseEvent):void {
// Do nothing.
}
private function localZoomInHandler(event:MouseEvent):void {
// Do nothing.
}
</mx:script>
<mx:Button id="zoomOut" label="-" width="20"
toolTip="Zoom Out" click="{zoomOutHandler}" />
<mx:Button id="zoomIn" label="+" width="20"
toolTip="Zoom In" click="{zoomInHandler}" />
</mx:HBox>
App.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
mx:local="*"
creationComplete="onCompelete(event)">
<mx:script>
[Binable] public var scale:Number = 1.0;
protected function onComplete(event:FlexEvent):void {
zoomButtons.zoomOutHandler = handleChangeZoomOut;
zoomButtons.zoomInHandler = handleChangeZoomIn;
}
private function handleChangeZoomOut(event:MouseEvent):void {
scale /= 2;
}
private function handleChangeZoomIn(event:MouseEvent):void {
scale *= 2;
}
</mx:script>
<local:ZoomButtons id="zoomButtons" />
</mx:Application>

Answer 1

I believe I have figured it out. I removed the binding from the event handlers and assigned/unassigned them through a function call. This seems to work.
ZoomButtons.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:script>
import mx.events.FlexEvent;
private var zoomOutHandler:Function = localZoomOutHandler;
private var zoomInHandler:Function = localZoomInHandler;
public function addHandlers(zoomOutHandler:Function, zoomInHandler:Function):void {
removeHandlers();
this.zoomOutHandler = zoomOutHandler;
this.zoomInHandler = zoomInHandler;
zoomOut.addEventListener(MouseEvent.CLICK, zoomOutHandler);
zoomIn.addEventListener(MouseEvent.CLICK, zoomInHandler);
}
pubblic function removeHandlers():void {
zoomOut.removeEventListener(MouseEvent.CLICK, zoomOutHandler);
zoomIn.removeEventListener(MouseEvent.CLICK, zoomInHandler);
}
private function localZoomOutHandler(event:MouseEvent):void {
// Do nothing.
}
private function localZoomInHandler(event:MouseEvent):void {
// Do nothing.
}
</mx:script>
<mx:Button id="zoomOut" label="-" width="20" toolTip="Zoom Out" />
<mx:Button id="zoomIn" label="+" width="20" toolTip="Zoom In" />
</mx:HBox>
App.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
mx:local="*"
creationComplete="onCompelete(event)">
<mx:script>
[Binable] public var scale:Number = 1.0;
protected function onComplete(event:FlexEvent):void {
zoomButtons.addHandlers(handleChangeZoomOut, handleChangeZoomIn);
}
private function handleChangeZoomOut(event:MouseEvent):void {
scale /= 2;
}
private function handleChangeZoomIn(event:MouseEvent):void {
scale *= 2;
}
</mx:script>
<local:ZoomButtons id="zoomButtons" />
</mx:Application>

Answer 2

Good thing you found a solution. However IMO the cleanest approach to do communication from a component to its container is to use events. For example dispatch some custom zoom events from ZoomButtons:
<fx:MetaData>
[Event(name="zoomIn", type="flash.events.Event")]
[Event(name="zoomOut", type="flash.events.Event")]
</fx:MetaData>
<mx:Button id="zoomOut" label="-" width="20"
toolTip="Zoom Out" click="dispatchEvent(new Event('zoomOut'))" />
<mx:Button id="zoomIn" label="+" width="20"
toolTip="Zoom In" click="dispatchEvent(new Event('zoomIn'))" />
And then listen for those events:
<local:ZoomButtons id="zoomButtons"
zoomIn="handleZoomIn()"
zoomOut="handleZoomOut()" />
The metadata in the custom component makes sure that the compiler understands the 'zoomIn' and 'zoomOut' event handlers written in MXML.