0

我创建了一个带有 2 个按钮的组件。每个按钮的单击功能都绑定到一个变量。我需要将组件中定义的默认按钮处理程序替换为应用程序中定义的处理程序。

缩放按钮.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>

应用程序.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>
4

2 回答 2

0

我相信我已经想通了。我从事件处理程序中删除了绑定，并通过函数调用分配/取消分配它们。这似乎有效。

缩放按钮.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>

应用程序.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>
于 2013-11-07T12:47:26.583 回答
0

幸好你找到了解决方案。然而，IMO 最简洁的从组件到其容器的通信方法是使用事件。例如从 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'))" />

然后监听这些事件：

<local:ZoomButtons id="zoomButtons" 
    zoomIn="handleZoomIn()" 
    zoomOut="handleZoomOut()" />

自定义组件中的元数据确保编译器理解以 MXML 编写的“zoomIn”和“zoomOut”事件处理程序。

于 2013-11-07T12:51:21.197 回答