Custom focus skin for spark components in Flex 4
In spark components, the focusSkin is treated differently from the normal skin. Unlike the skin of a spark component, the focusSkin is not automatically sized or positioned by the component. Instead, it is added as the first child of the component. In addition, if the focusSkin has a property called target, target is set to point to the parent component.
With this knowledge, it is possible to create custom focusSkins. I’ve included an example of some simple custom focusSkins that I’ve created. Note that each of these focusSkins relies on a few things to make sure that it is updated correctly. They each require a target property that attaches a handler onto the target’s skin in order to update the focusSkin when the skin changes. They also require specific sizing and sometimes positioning inside the overridden updateDisplayList() method.
Now, you may be wondering what’s so great about a couple custom focusSkins? I think the coolest thing about them is the fact that the focusSkins are almost completely drawn using MXML! Take a look at the source for how this was done.
Here are the examples:
Note: This sample requires Flex SDK 4.0.0.13672 or higher. You can get the latest SDK builds from opensource.adobe.com.
This is fantastic, I been building a music application for some time and been thinking a lot about when a user switches focus from/to the player, I wanted a bit of Bang to indicate now the player has a grip on you, will def be trying some of these this weekend.
Thanks
@Tyrone Neill
Thanks for the feedback! Great to know you will try it. Let me know how it goes!
super helpful post – i had no idea there was a focusskin for textinput. One thing to note, I’m using the 4.0.0.114410 version of the sdk. rather than target, Flex looks for a focusObject. thnx again, Seth
@seth
Thanks for the comment! If you take a look at SkinnableComponent’s drawFocus() method, you’ll see that focusObject is actually an instance of your focusSkin. Then, “target” is just a property of the focusObject that the component tries to set to itself.