Question

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

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

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

<强> 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

你找到解决方案的好事。然而，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'事件处理程序。

Flex组件绑定应用程序中的单击处理程序

2 个答案: