flex 4.5 simple spark button skinning

阅读更多

Anyone missed the old simple method for skinning a simple button?

//mainButtonHitArea() : Is a generic function that generates the hit area
The problem im having is that, this method of creating a simple button with skin is being phased out : Infact it is no longer supported in flex 4.5 mobile projects.

So the question: Is there a simple way to perform this, with spark buttons (which is suppose to be the new way to go). As simple as possible.

Basically i only need a button with 2 images : down/over & up. And i want to keep the code as simple as possible : The new skinning methods, seems to really adds way too much lines for something that used to be as simple as the example above.

You can create a skin, i.e. (as MyButtonSkin.mxml):

Then you can assign that skin to some button:

Here's a basic image button that's more general:

ImageButtonSkin.mxml

    
        [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")]
    
    
        
        
        
        
    
    

ImageSkinnableButton.as

[Style(name="upImage", inherit="no", type="Class")]
[Style(name="downImage", inherit="no", type="Class")]
[Style(name="overImage", inherit="no", type="Class")]
[Style(name="disabledImage", inherit="no", type="Class")]
public class ImageSkinnableButton extends Button
{
    public function ImageSkinnableButton()
    {
        super();
        setStyle("skinClass", ImageButtonSkin);
    }
}

Then you can set the images as styles on the button in either CSS (preferred) or in mxml:

You can also define a ButtonImageSkin for the default spark.components.Button component, for example in the imageskins package:

    
        [HostComponent("spark.components.Button")]
    
    
        
        
        
        
    
    

Simply define a style on the skin class itself, and bind the source of the image to it. Now, you can control the actual images using CSS pseudo selectors:

@namespace imageskins "imageskins.*";
s|Button {
    skinClass: ClassReference("imageskins.ButtonImageSkin");    
}
imageskins|ButtonImageSkin:up {
    backgroundImage: Embed(source="assets/images/button-up.png");
}
imageskins|ButtonImageSkin:down {
    backgroundImage: Embed(source="assets/images/button-down.png");
}
imageskins|ButtonImageSkin:over {
    backgroundImage: Embed(source="assets/images/button-over.png");
}
imageskins|ButtonImageSkin:disabled {
    backgroundImage: Embed(source="assets/images/button-disabled.png");
}

From http://stackoverflow.com/questions/6477137/flex-4-5-simple-spark-button-skinning