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 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 18.104.22.16872 or higher. You can get the latest SDK builds from opensource.adobe.com.