`

Flex学习记录(popup弹出窗口的基础上处理focusIn和focusOut事件)

阅读更多
我想要在用户聚焦在一个标签上时,显示一个弹出窗口,并且当用户离开聚焦的时候关闭这
个弹出窗口。
使用focusIn 和focusOut 事件(在InteractiveObject 类的子类的所有实例都可用)来调用
PopUpManager 相关的方法。
在用户聚焦时启动一个窗口,你可以重用前两节的代码。不过就是把弹出窗口的启动从用户
点击LInkButton 切换到通过focusIn 事件来创建而已。组件接受到聚焦的时候就会发布
focusIn 事件,例如当用户按tab 切换到组件上或者点击了它。focusIn 事件的处理代码只需
要在之前章节的内容添加一点:
移除这句代码,如果用鼠标交互,不影响程序运行效果。如果用 tab 键切换焦点,就会出现错误。
systemManager.removeFocusManager(IFocusManagerContainer(popup))
对应的上下文:
Code View:
<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()" tabIndex="1"/>
	<mx:LinkButton label="Left" x="10" y="100"
		focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="3"/>
	<mx:LinkButton label="Bottom" x="100" y="200"
		focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="2"/>
	<mx:LinkButton label="Right" x="200" y="100" 
		focusIn="showDetail(event)" focusOut="closePopUp()" tabIndex="4"/>
	<mx:Canvas width="100" height="100" x="125" y="40"
		backgroundColor="#ff0000" rotation="45">
	</mx:Canvas>
	<!-- tabIndex="0" TAB键无法使FOCUS到达该控件-->
	<mx:TextInput x="50" y="280" tabIndex="0"/>
</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 {
		//创建popup
		popup =
		CustomPopUp(PopUpManager.createPopUp(this,CustomPopUp,false));
		popup.message = "This is the detail for " +
		evt.target.label;
		// 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。FocusOout 事件的处理函数closePopUp 包含了关闭弹出窗口的逻辑。
当这个应用程序运行中,重复按下tab 键的时候,聚焦会循环的在LinkButton 上产生,并
且相关的弹出窗口会被创建或者移除。
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics