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.
Excellent effects the one i like most is the bouncing arrows effect, i will do something like that in an ecommerce app i making for the university.
Daniel SL
great example.
very helpful & effective.
I get it
Thks a lot
Have you found a way to put the focusskin INSIDE the component? I am trying to add an inner border on a focus however it is goes behind the component instead of ontop of it. the depth attribute didn’t seem to help. Any ideas?
Nice example.
I need to add focus for a DateField in my application. How do I do that for DateField. I tried using it by setting the SKinClass to the skin name, but it does not seem to work.
Any help?
Great post. This is fantastic.
@Steve Berube
Sadly, I’m not sure this is possible without hacking around in SkinnableComponent. This is because the focusSkin is added as the bottom child of the SkinnableComponent meaning everything else is laid out on top of it. Of course, if your component’s skin is transparent, you might be able to do something interesting.
@Jeps
This will only work with Spark components. You’ll have to wait for the Spark version of DateField.
@ Jeps
You can listen for rollOver and rollOut events of a skin and then manipulate an overlay graphic that sits on top of your component. For instance, as you may know there is a ‘background’ Rect in alot of skins that has the lowest depth. Create an exact copy of this Rect and paste it at the end of the Skin file so that its depth is the highest. Give it a id name of ‘topground’ with an alpha value of 0 in the mxml tag. Now listen for those events I mentioned directly in the skin class and manipulate the alpha value. This is of course an example which will hopefully show you that you can do much more visually, such as using filters. I hope that helps.
@Marc Kassay
And my comment was directed to Steve Berube, not Jeps.
I’d like to use these for a Button, but when I do the code “this.setActualSize(target.width, target.height);” throws and error.
good example really helpfull.
Very useful.. very handy.. Thanks.