Embending images on CSS for an extended spark button (IconButton)

问题

I have this IconButton:

Class

package extra {

    import spark.components.Button;
    import spark.primitives.BitmapImage;

    public class IconButton extends Button {

        private var _icon:Class;

        [SkinPart(required="false")]
        public var iconElement:BitmapImage;

        public function get icon():Class {

            return _icon;

        }

        public function set icon(val:Class):void {

            _icon = val;

            if (iconElement != null) {

                iconElement.source = _icon;

            }

        }

        override protected function partAdded(partName:String, instance:Object):void {

            super.partAdded(partName, instance);

            if (icon !== null && instance == iconElement) {

                iconElement.source = icon;

            }

        }

    }

}

Skin

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" minWidth="40" minHeight="22">

    <fx:Metadata>
       [HostComponent("spark.components.Button")]
    </fx:Metadata>

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

    <!-- background -->
    <s:BitmapImage id="iconElement" width="104" height="54"/>

    <!-- label -->
    <s:Label
    id="labelDisplay"
    textAlign="center"
    color="0xffffff"
    fontFamily="AudiNormal"
    fontWeight="bold"
    fontSize="15"
    width="100%"
    top="64"
    />
</s:Skin>

CSS

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

That works great with:

MXML

<extra:IconButton icon="@Embed('../assets/img/animals/dog.png')">Dog Name</extra:IconButton>

But how can I do this?:

MXML

<extra:IconButton styleName="dog">Dog Name</extra:IconButton>

CSS

e|IconButton {
    skinClass: ClassReference('skins.IconButton');
}

.dog {
    icon: Embed('../assets/img/animals/dog.png');
}

回答1:

Remove icon property and use a style instead :

[Style(name="icon", type="Class", inherit="no")]

In your skin file :

<s:BitmapImage id="iconElement" width="104" height="54" icon="{hostComponent.getStyle('icon')}/>

Just a guess, haven't tested it though...

来源：https://stackoverflow.com/questions/5510561/embending-images-on-css-for-an-extended-spark-button-iconbutton