Quick and Dirty Skinning of a Flex Mobile Button

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.

http://snipplr.com/js/embed.js
http://snipplr.com/json/54891

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.)

http://snipplr.com/js/embed.js
http://snipplr.com/json/54892

This will yield this result:
 

It’s using the background but it’s small, so I hardset the size in the constructor.

http://snipplr.com/js/embed.js
http://snipplr.com/json/54893

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.

This yields:

Good, but I need to remove the background shape. I do this by overriding drawBackground and setting it to do nothing.

http://snipplr.com/js/embed.js
http://snipplr.com/json/54894

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.

http://snipplr.com/js/embed.js
http://snipplr.com/json/54895

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.

http://snipplr.com/js/embed.js
http://snipplr.com/json/54896

4 thoughts on “Quick and Dirty Skinning of a Flex Mobile Button

  1. Such a great example Terry. I was doing something similar to this the other day, and struggled a bit to get it right.

    One thing I was gonna ask you though, is that when you mention:
    “This is a big no-no when it comes to mobile development, as that doesn’t scale to many screens well”

    What would you suggest we use instead? Since when you use images as buttons, they will probably already not be very scalable anyway.

    Cheers and thanks again for the example

    Like

  2. The recommended solution is scalable FXG images: http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html.

    It only works for abstract images, like the existing Button skins, and not concrete buttons like the one in my example.

    If you look in the source code for the ButtonSkin, it looks like Flex has border images for each of the supported DPI settings 160, 240, and 320. So that might be the way to go.

    In short, it works for me, and I couldn’t find any better advice, but that doesn’t make what I have here good advice 😉

    Like

Leave a Reply to jones d Cancel reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s