The following example shows how you can modify the default skins for the Flex Button control by setting the skin
, upSkin
, overSkin
, downSkin
, and disabledSkin
styles.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Button id="btn"
label="Button"
skin="{null}"
upSkin="{null}"
overSkin="mx.skins.halo.ButtonSkin"
downSkin="mx.skins.halo.ButtonSkin"
disabledSkin="mx.skins.halo.ButtonSkin"
icon="@Embed('assets/Button.png')" />
</mx:Application>
View source is enabled in the following example.
You can also set the various button skin styles in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
Button {
skin: ClassReference(null);
upSkin: ClassReference(null);
overSkin: ClassReference("mx.skins.halo.ButtonSkin");
downSkin: ClassReference("mx.skins.halo.ButtonSkin");
disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
icon: Embed("assets/Button.png");
}
</mx:Style>
<mx:Button id="btn"
label="Button" />
</mx:Application>
Or, you can set the button skin styles using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.skins.halo.ButtonSkin;
[Embed("assets/Button.png")]
private const buttonIcon:Class;
private function init():void {
btn.setStyle("skin", null);
btn.setStyle("upSkin", null);
btn.setStyle("overSkin", ButtonSkin);
btn.setStyle("downSkin", ButtonSkin);
btn.setStyle("disabledSkin", ButtonSkin);
btn.setStyle("icon", buttonIcon);
}
]]>
</mx:Script>
<mx:Button id="btn"
label="Button"
initialize="init();" />
</mx:Application>