Utilizing Focus in Custom Components

Working on some side stuff Friday, and over the weekend, and had one hell of a time tackling focus in my custom components.

First off, I use my own custom class as a layer between mx.core.UIComponent and my components classes. I do this because:
– I like Grant Skinner’s GDispatcher better than EventDispatcher, although, I rarely utilize custom methods much, I still like the option to do so.
– one thing not implemented into UIComponent was removal of the deadPreview movie clip like FUIComponent had back in MX; I implement this so I can include a dead preview in my components (since I rarely make an SWC’s for my own components), and I’d prefer to see something beyond a white dot to indicate what a movie clip is on the stage.
– I “finished” the implementation of drawRect to have rounded edges. The drawRect method for UIComponent has radius documented as a property, but it wasn’t implemented.

…however, after using this for …geez, maybe a year, I ran into a problem by overwrriting EventDispatcher’s addEventListener with my GDispatcher’s implementations. When a component gains focus, it fires onSetFocus, and when it loses focus, it fires onKillFocus. These functions inside of UIComponent add and remove listeners for key up and down. I didn’t know why my listeners weren’t getting fired until I realized I was overwriting the methods.

After fixing that, it was pretty nice that a component already listens for it’s own events of keyUp and keyDown when it has focus.

Secondly, I didn’t know until re-reading the class file for the umpteenth time, but you must implement pressFocus in your onPress function, and releaseFocus in your onRelease functions.

Finally, the obvious of focusEnabled = true, tabEnabled = true, and tabChildren = false being set in your init. Additionally, the Halo rect (a green rectangle) won’t draw around your component correctly unless the width and height are validly set. I usually do a setSize as the last call in my init function with default sizes, and pass true in as the 3rd parameter to prevent an event from being generated.

I haven’t figured out how to kill focus completely from everything yet, but these gotchas took a while to get used to.

Oh yeah, and if you want to tab to components within a component, don’t forget:

tabEnabled = false;
tabChildren = true;

It’d pretty nice, once you figure this stuff out, how much stuff is done for you. Hope this helps you all.

If anyone finds out about killing focus, let me know.

var f = getFocusManager();

…does NOT work, hehe.

2 Replies to “Utilizing Focus in Custom Components”

  1. Have you tried “Selection.setFocus(null)”? Works for me in a similar situation concerning custom components!


  2. The whole point of getFocusManager to me was the ability to have a nice, clean implementation of setting focus, without having a component worry about the details.

    …however, this is Flash afterall, and there is no reason I couldn’t utilize Selection itself. I’ll try that, just frustrated I guess there doesn’t appear to be a way to kill all focus via a command.

Comments are closed.