How does focus works in Flex?

Question

I try to figure out how does focus mechanism work in Flex. Here comes the example of what I mean:

Let's assume that we have a simple web application, which contains custom component that extends Canvas and implements mx.managers.IFocusManagerComponent. This component overrides focusInHandler and focusOutHandler methods and shows some feedback on how they are called (thinner or thicker border). This custom component also contains some Text.

The source of the component is:

<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

Hey Rafalrybacki. [I'm in a meeting, and can't really spend time on the question but thought I could help with a pointer or two:]

First, the intent of a Canvas is to interact with FocusManager differently than a component that implements IFocusManagerComponent. Canvas implements IFocusManagerContainer and while you can accomplish what you're trying to accomplish by making the container an IFocusManagerComponent, I'd avoid it, simply because I try to do that which I think the flex sdk team intended when using internal components.

What I think they'd intend is for you to listen to the FocusEvent in your container. FocusEvents bubble by default, so you can accomplish most everything you need to with a simple event listener.

Note: Listening to a focusOut can get confusing with components that have multiple uicomponents as children --- i.e. combobox has a UITextField and a Button, so the component has multiple FocusOut and FocusIn events happening from whithin the same component. Your savior will be (I would guess) doing a container.contains() on a focusManger.getFocus() item (casting it etc.) to accurately set your style.

I just blab, so if you need some help beyond this, or would like to know more about why a focusIn or focusOut evt is being dispatched when it is being dispatched -- I'd be happy to slap some code together for you and explain why the type of event is being caught. Your best bet tho' (to fit within flex sdk guidelines) is to use an event listener from within the container, and not fight with a component that is both an IFocusManagerComponent AND an IFocusManagerContainer. Could get messy.

Hope that helps. Best of luck, Jeremy