Over a million developers have joined DZone.

Quick and Dirty Skinning of a Flex Mobile Button

· Web Dev Zone

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.

Import new button skins

    //Import the new assets for the background of the button
    [Bindable]
    [Embed(source="/assets/filterbuttonDown.png")]
    private var down:Class;
     
    [Bindable]
    [Embed(source="/assets/filterbuttonUp.png")]
    private var up:Class;


 

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

Override GetBorderClass

    // Override this function to return our skin images and not the normal ones.
    override protected function getBorderClassForCurrentState():Class
    {
    if (currentState == "down"){
    labelDisplay.setStyle("color",0xFFFFFF);
    return down;
    }
    else{
    labelDisplay.setStyle("color",0x48250A);
    return up;
    }
    }

 


This will yield this result:
 

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

Hardset the size

    public function DemoButton()
    {
    super();
    //Set the width and the height to the size of the image.
    width = 243;
    height = 103;
    }


 

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.

Nullify draw background

    // Override this function to prvent the button from drawing a background
    override protected function drawBackground(unscaledWidth:Number,
    unscaledHeight:Number):void{
    }

 


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.

LabelDisplayCommitHandler

    override protected function labelDisplay_valueCommitHandler(event:FlexEvent):void
    {
    //super.labelDisplay_valueCommitHandler(event);
    labelDisplayShadow.text = labelDisplay.text;
     
    labelDisplay.setStyle("fontFamily","Lions Den");
    labelDisplay.setStyle("fontSize",40);
    labelDisplay.setStyle("fontWeight","normal");
    labelDisplay.setStyle("color",0x48250A);
    labelDisplayShadow.setStyle("fontFamily","Lions Den");
    labelDisplayShadow.setStyle("fontSize",40);
    labelDisplayShadow.setStyle("fontWeight","normal");
     
    }

 


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.

Flex Mobile Button Skin

    package skins
    {
    import mx.events.FlexEvent;
     
    import spark.skins.mobile.ButtonSkin;
     
    public class DemoButton extends ButtonSkin
    {
     
    //Import the new assets for the background of the button
    [Bindable]
    [Embed(source="/assets/filterbuttonDown.png")]
    private var down:Class;
     
    [Bindable]
    [Embed(source="/assets/filterbuttonUp.png")]
    private var up:Class;
     
    public function DemoButton()
    {
    super();
    //Set the width and the height to the size of the image.
    width = 243;
    height = 103;
    }
     
    // Override this function to return our skin images and not the normal ones.
    override protected function getBorderClassForCurrentState():Class
    {
    if (currentState == "down"){
    labelDisplay.setStyle("color",0xFFFFFF);
    return down;
    }
    else{
    labelDisplay.setStyle("color",0x48250A);
    return up;
    }
    }
     
    // Override this function to prvent the button from drawing a background
    override protected function drawBackground(unscaledWidth:Number,
    unscaledHeight:Number):void{
     
    }
     
    override protected function
    labelDisplay_valueCommitHandler(event:FlexEvent):void
    {
    //super.labelDisplay_valueCommitHandler(event);
    labelDisplayShadow.text = labelDisplay.text;
     
    labelDisplay.setStyle("fontFamily","Lions Den");
    labelDisplay.setStyle("fontSize",40);
    labelDisplay.setStyle("fontWeight","normal");
    labelDisplay.setStyle("color",0x48250A);
    labelDisplayShadow.setStyle("fontFamily","Lions Den");
    labelDisplayShadow.setStyle("fontSize",40);
    labelDisplayShadow.setStyle("fontWeight","normal");
     
    }
     
    }
    }


 

Topics:

Published at DZone with permission of Terrence Ryan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}