is it possible to hide the standard grey rounded box of a BUTTON component in flex 4.5?

Question

I have a set of buttons I have added to the stage of my flex mobile app... I have transparent PNG icons set on those buttons using the 'icon' parameter but was wondering if there is a way to hide the grey box of the standard button element? so that my button would only appear as the icon i have set on the button... or is the only way to achieve this to skin the button and create a style (which I still dont have a full grasp on yet.

Thanks in advance.

Answer 1

There are numerous ways to go about doing this. As Flextras said, you can just remove all the things that the normal Spark ButtonSkin draws. However, it's not that straight forward, because if you look at the ButtonSkin class, it doesn't have the BitmapImage object that the button uses to show your icon. That BitmapImage is actually defined in the base class for ButtonSkin (which is SparkButtonSkin).

Fortunately, it's simple enough to fix that. Below is a skin that extends the base class and adds the BitmapImage back. The reason I add it back is

• you can't use the base class by itself (it doesn't define the required states and throws an error at run time
• you probably want to add some interactivity to your button - on mouse over, mouse down, etc. In my simple example below, that interactivity is pretty cheesy, I'll leave it up to you to decide what should happen on mouse over, mouse down, etc...

Skin that extends SparkButtonSkin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:BitmapImage id="iconDisplay" alpha=".75" alpha.over="1" alpha.down=".5" alpha.disabled=".25" />
</s:SparkButtonSkin>

Another way to go about this is to not use the Button at all. You can make a much lighter version of that behaves as a simple button by using the BitmapImage object for your button. You'd have to add some interactivity (like perhaps swapping out the icon it uses for mouse down, etc).

<s:BitmapImage source="path/to/my/icon" click="clickHandler()" />