Jan 27 2009
Changing the Focus Rectangle in Flex.
I had come across a situation where i had to highlight different elements of the screen manually. So i had to use the drawFocus method of UIComponent class to highlight that particular element.
The default Halo Skin wasn’t doing the job, I had to change the color to be more prominent for example to be 0xFF0000. Unfortunately setting the CSS for UIComponent wasn’t just enough. I realized that Flex is very smart on how it handles the focus skin, its initialized only when that instance of the component requiring the skin needs to be focussed.
Click here for the source.
If you look at the above example and select Button first the focus is default, however if you select the Red Label and then select the Button it changes. In the code the custom Focus class is initialized only for the Red Label.
Flex initializes the custom FocusSkin class only when its required and once its initialized it is used for the rest of the components. Interesting stuff…….
Hey, this wasn’t quite what I was looking for, but in looking at your code I worked out how to solve my problem and set a focus skin on a Canvas. Nice one!
I am glad that this code example came in handy
Thanks for this interersting article, I’m looking for a custom focus for my textarea and I’m facing a problem (I’m a noob in CSS)…
Can I simply just say what a relief to discover someone that actually understands
what they are talking about on the web. You definitely realize how to bring a problem to light and make it important.
More people should look at this and understand this side of the story.
It’s surprising you’re not more popular because you
most certainly possess the gift.