I’m working on a mobile project and trying to implement based on a beautiful design comp. Unfortunately I haven’t had a lot of luck finding out how to do this right… So I’ll tell you how I did it, right or wrong.
So I start off with the design comp. This is what I want to achieve:
First, I create a blank skin that extends spark.skins.mobile.ButtonSkin.
The mobile skins use an image named “border” to render the border of the button. I’ll exploit that to show the new background image of my skin. There are two images for mobile skins: an up and a down. The Button has a function to return, which should be the correct image for either the up or down state… so:
I import new background images to replace the default up and down backgrounds of the button.
I override the getBorderClassForCurrentState function. (I’m also changing the font color here on the down state, probably the wrong place to do it but it works.)
This will yield this result:
It’s using the background but it’s small, so I hardset the size in the constructor.
This is a big no-no when it comes to mobile development, as that doesn’t scale to many screens well. But my app is pretty specific and I can get away with it.
Good, but I need to remove the background shape. I do this by overriding drawBackground and setting it to do nothing.
Which yields this:
Finally I need to set the fonts. Mobile buttons have drop shadows on their text, but they don’t render using an actual dropshadow filter; they do it by having a second textfield behind the first. So I need to alter and tweak that font to the same settings by overriding the labelDisplay_valueCommitHandler.
And there you have it, a custom skinned button in Flex Mobile. If anyone sees glaring problems with this let me know.
Here’s the entire source if you are interested.