Встраивание изображений в CSS для расширенной искровой кнопки (IconButton)

У меня есть этот IconButton:

Класс

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;

            }

        }

    }

}

Обложка

<?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');
}

Это отлично работает с:

MXML

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

Но как я могу это сделать?:

MXML

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

CSS

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

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

person coma    schedule 01.04.2011    source источник


Ответы (1)


Удалите свойство icon и вместо этого используйте стиль:

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

В вашем файле скина:

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

Только предположение, не проверял...

person Florian F    schedule 01.04.2011