Flex 3 cookbook翻译: 2.14 处理focusIn和focusOut事件

2.14 处理 focusIn 和 focusOut 事件

2.14.1 问题

当用户的焦点在一个标签控件上时，你想显示一个弹出窗口，而当用户焦点离开该标签控件时，弹出窗口关闭。

2.14.2 解答

用 focusIn 和 focusOut 事件（所有继承自 InteractiveObject 的类的实例均有该事件）去执行 PopUpManager 的恰当的方法。

2.14.3 讨论

基于用户焦点来触发窗口，你可以修改先前的两个方法。以前是当用户单击 LinkButton 时弹出窗口，现在改成由 focusIn 事件触发。当组件接收到焦点时，就触发一个 focusIn 事件。比如当用户用 tab 键跳到该控件，或者用鼠标点击该控件。 focusIn 事件的处理代码添加了如下内容：

    systemManager.removeFocusManager(IFocusManagerContainer(popup))
译者注：移除这句代码，如果用鼠标交互，不影响程序运行效果。如果用 tab 键切换焦点，就会出现错误。

这儿是代码：

 

<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute">

    <mx:Canvas horizontalCenter="0" verticalCenter="0">
        <mx:LinkButton id="lbl" label="Top" x="100" y="10" focusIn="showDetail(event)"
 focusOut="closePopUp()"/>
        <mx:LinkButton label="Left" x="10" y="100" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:LinkButton label="Bottom" x="100" y="200" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:LinkButton label="Right" x="200" y="100" focusIn="showDetail(event)"
focusOut="closePopUp()"/>
        <mx:Canvas width="100" height="100" x="125" y="40"
            backgroundColor="#ff0000" rotation="45">
        </mx:Canvas>
    </mx:Canvas>

    <mx:Script>
        <![CDATA[
            import mx.managers.IFocusManagerContainer;
            import mx.managers.PopUpManager;

            private const POPUP_OFFSET:int = 10;

            private var popup:CustomPopUp;

            private function showDetail(evt:FocusEvent):void {
                // create the popup
                popup = CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));
                popup.message = "This is the detail for " + evt.target.label;

                // position the popup
                var pt:Point = new Point(0, 0);
                pt = evt.target.localToGlobal(pt);
                popup.x = pt.x  + POPUP_OFFSET;
                popup.y = pt.y  + evt.target.height + POPUP_OFFSET;

                systemManager.removeFocusManager(IFocusManagerContainer(popup))
            }

            private function closePopUp():void {
                PopUpManager.removePopUp(popup);
            }

        ]]>
    </mx:Script>
</mx:Application>

 

 

当一个弹出窗口被创建时，默认地， SystemManager 触发 FocusManager ，让它与该弹出窗口关联起来。并让焦点循环（控制 tab 键顺序）基于刚被创建的弹出窗口。在本例中，我们期望一种不同的行为：当用户焦点移出一个弹出窗口（例如，用 tab 键使焦点移出该控件），该窗口应当被关闭。从 SystemManager 里移除弹出窗口的 FocusManager 能实现这一点，并能让整个应用的 FocusManager 重新起作用。 focusOut 事件的处理器 closePopUp 包含了关闭弹出窗的逻辑。当应用运行起来后，反复按 tab 键，焦点会在这些 LinkButton 之间循环，而且相应的弹出窗会被创建或移除。