Flex如何在Flex中运行？

Question

我试图弄清楚焦点机制在Flex中是如何工作的.这是我的意思的例子:

让我们假设我们有一个简单的Web应用程序,其中包含扩展Canvas和实现的自定义组件mx.managers.IFocusManagerComponent.此组件覆盖focusInHandler和focusOutHandler方法,并显示有关如何调用它们的一些反馈(更薄或更粗的边框).此自定义组件还包含一些Text.

该组件的来源是:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100" height="100" creationComplete="cc();" implements="mx.managers.IFocusManagerComponent">
<mx:Script>
    <![CDATA[
        import mx.containers.Canvas;
        import mx.controls.Text;
        import mx.controls.TextArea;
        import mx.core.UIComponent;
        import mx.managers.IFocusManagerComponent;

        public function cc():void
        {
            text = new Text;
            text.text = "123";
            addChild(text);

            setStyle("backgroundColor", "0xddddff");
            setStyle("borderColor", "0x000000");
            setStyle("borderThickness", 1);
            setStyle("borderStyle", "solid");
        }

        private var text:Text;

        override protected function focusInHandler(e:FocusEvent):void {
            trace("focusInHandler, currFocus: " + focusManager.getFocus());
            setStyle("borderThickness", 4);
        }

        override protected function focusOutHandler(e:FocusEvent):void {
            trace("focusOutHandler, currFocus: " + focusManager.getFocus());
            setStyle("borderThickness", 1);
        }
    ]]>
</mx:Script>
</mx:Canvas>

Here is the live version (with source view): http://rafalrybacki.com/lab/focus_question/. In the app there is also a TextArea below the Canvas - to ease the focus manipulation when testing.

The questions:

1. If you click once on a violet canvas it receives focus (focusInHandler is called), then if you click again the focus is lost (focusOutHandler called) - why?

2. Of you click on a Text the Canvas receives focus (focusInHandler called) and keeps it when being clicked wherever on the area (focusOutHandler nevet called) - why?

Maybe my understanding of the whole focus issue is wrong? Thank you for any suggestions.

With respect,

Rafal

Answer 1

嘿，拉法尔巴基。[我正在开会，无法真正花时间讨论这个问题，但我想我可以提供一两个建议：]

首先，Canvas 的目的是与 FocusManager 进行交互，这与实现 IFocusManagerComponent 的组件不同。Canvas 实现了 IFocusManagerContainer，虽然您可以通过使容器成为 IFocusManagerComponent 来完成您想要完成的任务，但我会避免它，只是因为我尝试这样做，我认为 Flex sdk 团队在使用内部组件时打算这样做。

我认为他们的目的是让您监听容器中的 FocusEvent。FocusEvents 默认情况下会冒泡，因此您可以使用简单的事件侦听器完成所需的大部分操作。

注意：监听 focusOut 可能会与具有多个 uicomponents 作为子级的组件混淆 --- 即组合框有一个 UITextField 和一个 Button，因此该组件在同一组件中发生多个 FocusOut 和 FocusIn 事件。你的救世主将是（我猜）在 focusManger.getFocus() 项目上执行container.contains()（对其进行强制转换等）以准确设置你的样式。

我只是胡说八道，所以如果您需要除此之外的一些帮助，或者想了解更多有关在调度 focusIn 或 focusOut evt 时为何调度的信息 - 我很乐意为您编写一些代码并解释为什么会捕获该类型的事件。你最好的选择（为了符合 flex sdk 指南）是使用容器内的事件监听器，而不是与既是 IFocusManagerComponent 又是 IFocusManagerContainer 的组件发生冲突。可能会变得混乱。

希望有帮助。祝你好运，杰里米