flex 4.5简单的火花按钮剥皮

Question

有人错过了为简单按钮设置皮肤的简单方法吗？

<mx:Button x="10" y="10" label=""
           upSkin="@Embed('imgs/mainButton_std.png')"
           overSkin="@Embed('imgs/mainButton_over.png')"
           downSkin="@Embed('imgs/mainButton_over.png')"
           disabledSkin="@Embed('imgs/mainButton_std.png')"
           creationComplete="mainButtonHitArea()"
           width="75" height="75" id="menuButton" enabled="true"/>
//mainButtonHitArea() : Is a generic function that generates the hit area

我遇到的问题是,这种创建带皮肤的简单按钮的方法正在逐步淘汰:事实上,Flex 4.5移动项目不再支持它.

所以问题是:是否有一种简单的方法来执行此操作,使用火花按钮(这被认为是新的方式).尽可能简单.

基本上我只需要一个带有2个图像的按钮:向下/向上和向上.我想让代码保持尽可能简单:新的蒙皮方法似乎真的为以前的例子提供了过多的线条.

Answer 1

你可以创建一个皮肤,即(如MyButtonSkin.mxml):

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="MyButtonSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009">
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>    
    <fx:Metadata>
        <![CDATA[
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>    
    <s:BitmapImage source.disabled="@Embed('assets/image1.png')" 
                source.down="@Embed('assets/image2.png')" 
                source.up="@Embed('assets/image3.png')" 
                source.over="@Embed('assets/image4.png')" />
</s:SparkSkin>

然后你可以将该皮肤分配给某个按钮:

<s:Button skinClass="MyButtonSkin"/>

Answer 2

这是一个更通用的基本图像按钮:

ImageButtonSkin.mxml

<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">
    <fx:Metadata>
        [HostComponent("com.instantdelay.flex.commons.ImageSkinnableButton")]
    </fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
    <s:BitmapImage id="image"
                   source.up="{getStyle('upImage')}"
                   source.down="{getStyle('downImage')}"
                   source.over="{getStyle('overImage')}"
                   source.disabled="{getStyle('disabledImage')}"
                   />
</s:SparkButtonSkin>

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

然后,您可以在CSS(首选)或mxml中将按钮设置为按钮上的样式:

<commons:ImageSkinnableButton
    upImage="@Embed('imgs/mainButton_std.png')"
    overImage="@Embed('imgs/mainButton_over.png')"
    downImage="@Embed('imgs/mainButton_over.png')"
    disabledImage="@Embed('imgs/mainButton_std.png')" />

Answer 3

您还可以为默认的spark.components.Button组件定义ButtonImageSkin,例如在imageskins包中:

<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">
    <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>
    <s:BitmapImage source="{getStyle('backgroundImage')}"/>
</s:SparkButtonSkin>

只需在皮肤类本身上定义一个样式,然后将图像的源绑定到它.现在,您可以使用CSS伪选择器控制实际图像:

@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");
}

这样,您可以使用更灵活的基于CSS的规则获得结果.我最终为各种Flex组件创建了一组基于图像的Spark皮肤:FXG更强大,但有时使用scale9图像只是获得所需结果的最快方法.

附注:如果您将皮肤类和CSS文件(带有任何名称)放在Flex库项目中,并使用-theme选项编译客户端项目,Flex将自动应用CSS ..在创建一组皮肤时很有用以及将它们与主机组件相关联的CSS.