浅析flex中的焦点focus

一、无焦点的困扰——组件监听不到键盘事件
原因：只有获得焦点的组件（确切说是InteractiveObject）才能监听到键盘事件的目标阶段；键盘事件（flash.events.KeyboardEvent）参与冒泡阶段，所以焦点组件的父项（以及它爸爸的爸爸的爸爸……）亦可在事件的冒泡阶段监听到该事件。
简单来说：只有组件本身或者其子孙项获得焦点后，才能监听到键盘事件。

二、获得焦点

1、设置焦点——setFocus()
Flex 的UIComponent 的setFocus() 方法可以设置焦点；调用此方法最终会将自身赋值给 systemManager.stage.focus
另外还可以采用focusManager.setFocus(IFocusManagerComponent) 给组件设置焦点;

2、 swf 获得焦点
如果swf嵌入到html中，首先要保证该swf在DOM中获得焦点；

document.getElementById([swfId]).focus();

复制代码

为方便起见，可直接修改 flex 的模板 index.template.html；

<body scroll="no" οnlοad=’document.getElementById("${application}").focus();’>

复制代码

（详见附件的模板文件）

3、注意焦点转移
需要注意的时，随着swf与用户的交互或者弹出Alert窗框或者Popup组件、抑或是某些代码执行都有可能引起焦点的转移；如果有需要便要采用setFocus() 重设焦点。

4、鼠标点击获得焦点
——我更希望组件能够像TextInput那样鼠标点击即可获得焦点
——很简单监听 MouseEvent.MOUSE_DOWN 然后setFoucus() 即可；
——不！有更简单的，只需让你的组件实现 IFocusManagerComponent 接口即可。
UIComponent 已经实现了 IFocusManagerComponent 接口，只是没有显示的标明而已，所以需要某组件具有鼠标点击获得焦点的功能时，只需显示声明 implements IFocusManagerComponent 即可。当然有特殊需求的还要覆盖某些方法，比方TextInput 就覆盖了 setFocus() 方法。（具体见源码。）
例如：让图片具有点击获得焦点特性：

public class MyImage extends Image implements IFocusManagerComponent {
public function MyImage() { super();}
}

复制代码

该例子详见附件。
下面会介绍 IFocusManagerComponent 接口，并研究究竟如何实现鼠标点击获得焦点的。

5、例外
如果只监听整个应用的键盘事件，不需具体到某个组件，可以考虑用给 stage添加监听，这样就不用考虑烦人的焦点问题。

三、介绍IFocusManagerComponent

见API文档，从focusManager.setFocus(IFocusManagerComponent) 顺藤摸瓜，某些组件已经实现了IFocusManagerComponent 接口。

包 mx.managers.IFocusManagerComponent

Interface public interface IFocusManagerComponent
实现器 Accordion, AdvancedListBase, Button, ButtonBar, ChartBase, ComboBase, DateChooser, DateField, HTML, ListBase, MenuBar, NumericStepper, TabNavigator, TextArea, TextInput, UIMovieClip

IFocusManagerComponent 接口用于定义一些接口，可获得焦点的组件必须实现这些接口才能从 FocusManager 获得焦点。UIComponent 类中提供了此接口的基本实现，但 UIComponent 并不实现完整的 IFocusManagerComponent 接口，因为部分 UIComponent 无需获得焦点。因此，要使 UIComponent 派生的组件成为一个可获得焦点的有效组件，只需将“implements IFocusManagerComponent”添加到类定义即可。

四、鼠标按下获得焦点分析。

当FocusManager被激活时，会给其管辖容器添加监听器：

form.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

复制代码

监听器代码摘要：

private function mouseDownHandler(event:MouseEvent):void {
if (event.isDefaultPrevented()) return;
//从事件目标开始查找顶级的实现可设置焦点的组件
var o:DisplayObject = getTopLevelFocusTarget(
InteractiveObject(event.target));
if (!o) return;
if ((o != _lastFocus || lastAction == "ACTIVATE") && !(o is TextField))
setFocus(IFocusManagerComponent(o));
}

复制代码

/**
* 从传入的对象开始向其父项方向查找顶级的实现可设置焦点的组件
*/

private function getTopLevelFocusTarget (o:InteractiveObject):InteractiveObject {
//此处可以看到可设置焦点的组件需要满足的几个条件：
while (o != InteractiveObject(form)) {
if (o is IFocusManagerComponent &&
IFocusManagerComponent(o).focusEnabled &&
IFocusManagerComponent(o).mouseFocusEnabled &&
(o is IUIComponent ? IUIComponent(o).enabled : true))
return o;
// if we cross a boundry into a bridged application, then return null so
// the target is only processed at the lowest level
if (o.parent is ISWFLoader) {
if (ISWFLoader(o.parent).swfBridge)
return null;
}
o = o.parent;
if (o == null)
break;
}
return null;
}

复制代码

受FocusManger管理的组件的几个条件：
1、实现 IFocusManagerComponent
2、focusEnabled、mouseFocusEnabled、enabled三个属性皆为true
3、bridge情况下（还不了解bridge，请高手指教）

转载于:https://www.cnblogs.com/programmer-wind/archive/2012/02/28/2919544.html

浅析flex中的焦点focus相关推荐

jQuery中blur和focus事件的应用
本文转自:http://blog.csdn.net/gaolinwu/article/details/7240674 jQuery中blur和focus事件的应用一.需求原因在填写表单时需要实现如 ...
深入理解javascript中的焦点管理
前面的话焦点作为javascript中的一个重要功能,基本上和页面交互都离不开焦点.但却少有人对焦点管理系统地做总结归纳.本文就javascript中的焦点管理作详细介绍焦点元素到底哪些元素可以 ...
使用JS取得焦点(focus)元素
原文链接: Get the Focused Element with JavaScript 原文日期: 2014年3月19日翻译日期: 2014年3月21日翻译人员: 铁锚对于良好的用户体验来说 ...
html tab focus,tabindex解决div获得焦点focus()和失去焦点blur()的问题
tabindex解决div获得焦点focus()和失去焦点blur()的问题首先要说的是,默认情况下div标签是没有获得焦点focus()和失去焦点blur()两个事件的. 如果想要div可以拥有获 ...
表单焦点: focus/blur
表单焦点: focus/blur 当用户点击或按TAB键时元素会获得焦点.也有autofocusHtml属性可以设置元素获取默认焦点,当页面载入或其他方式. 获得焦点通常意味:准备在这里接受数据.所以 ...
浅析 JavaScript 中的函数 uncurrying 反柯里化
柯里化柯里化又称部分求值,其含义是给函数分步传递参数,每次传递参数后部分应用参数,并返回一个更具体的函数接受剩下的参数,这中间可嵌套多层这样的接受部分参数函数,直至返回最后结果. 因此柯里化的过程是 ...
浅析Python中bytes和str区别
本博转载自:Chown-Jane-Y的浅析Python3中的bytes和str类型 Python 3最重要的新特性之一是对字符串和二进制数据流做了明确的区分.文本总是Unicode,由str类型表示, ...
flash中制的SWC组件怎样导入到flex中使用
flash中制的SWC组件怎样导入到flex中使用 2010-04-30 11:18 在使用FLASH导出SWC组件文件后,放入项目的LIB文件夹,然后要用实例化一个对象才能进行时操作使用, 但要记得 ...
计算机网络中路由器,浅析计算机网络中的路由器
浅析计算机网络中的路由器通过路由器的结构 ,分析了路由器的基本原理及功能 ,进而 (本文共2页) 阅读全文>> 由于路由器的应用越来越广泛,所以对网络路由器在使用过程中发生的故障,我们也 ...

浅析flex中的焦点focus

浅析flex中的焦点focus相关推荐

最新文章

热门文章