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 之间循环,而且相应的弹出窗会被创建或移除。