Custom Button Skin – Adobe Flex
How to create a custom button skin in a Flex web application?
That’s a common question but a simple google will not reveal so much info on how to do it.
The limitation with default flex skin is that even we can define as many colors we want in
a “gradient fill” the “ButtonSkin” will take in consideration only the first 2 of them.
Why did they made it like this ? donno, and do not care! So we extended the existing skin
and created a custom skin for buttons.
Here is how it does look:
Yes.. this is a flex button. Right click on it to download or view the sources, or just click
the following link to see the project http://blog.timeister.com/controls/custombutton
In more details, this is what have we done:
1. Extended the default mx.skins.halo.ButtonSkin class and overrided the updateDisplayList() method that is in charge of “drawing” the button skin.
CustomButtonSkin.as
2. Created a css file where we define the style for our custom button.
main.css
3. Created a CustomButton class that extends the basic flex Button class so we can bind the “CustomButton style” name to an existing “CustomButton control”
CustomButton.as
4. Declare the used css file in the application then start using the skinned button
Application.mxml
Let us know your ideas about this skin or if you need help in custom skinning other flex controls.
That’s all folks!!!
—————-
The TiMeister Team
stimulating and communicative, but would participate in something more on this topic?
Hi, good post. I have been wondering about this issue,so thanks for posting.
Please someone help…
I have the original button (with two states – active and passive)
they are on http://img682.imageshack.us/g/buttonactive.jpg/
my css is:
up-skin: ClassReference(“Style.Skins.Button”);
over-skin: ClassReference(“Style.Skins.Button”);
down-skin: ClassReference(“Style.Skins.Button”);
outBorderColors: #00b4ff, #00b4ff;
inBorderColors: #7f9ca2, #0b99b3;
cornerRadius: 3;
upFillAlphas: 1,1,1,1;
upFillColors: #7f9ca2, #195a6e, #0a7a98, #0b99b3;
overFillColors: #0c5466, #0c5466, #0c5466, #0c5466;
downFillColors: #6d9095, #0f4558, #096785, #0b99b3;
override class is
package Style.Skins
{
import flash.display.GradientType;
import mx.skins.halo.ButtonSkin;
public class Button extends ButtonSkin
{
public function Button()
{
super();
}
protected override function updateDisplayList(width:Number, height:Number):void
{
super.updateDisplayList(width, height);
// берем необходимые свойства из CSS
var outBorderColors:Array = getStyle(“outBorderColors”);
var inBorderColors:Array = getStyle(“inBorderColors”);
var cornerRadius:Number = getStyle(“cornerRadius”);
var upFillAlphas:Array = getStyle(“upFillAlphas”);
var upFillColors:Array = getStyle(“upFillColors”);
var overFillColors:Array = getStyle(“overFillColors”);
var downFillColors:Array = getStyle(“downFillColors”);
var cr:Number = Math.max(0, cornerRadius);
var cr1:Number = Math.max(0, cornerRadius – 1);
var cr2:Number = Math.max(0, cornerRadius – 2);
graphics.clear();
drawRoundRect(
0, 0, width, height, cr,
outBorderColors, [1, 1],
verticalGradientMatrix(0, 0, width, height),
GradientType.LINEAR, [0, 255]);
drawRoundRect(
1, 1, width – 2, height – 2, cr1,
inBorderColors, [1, 1],
verticalGradientMatrix(0, 0, width, height),
GradientType.LINEAR, [0, 255]);
switch (name)
{
case “upSkin”:
{
drawRoundRect(
2, 2, width – 4, height – 4, cr2,
upFillColors, upFillAlphas,
verticalGradientMatrix(0, 0, width – 2, height – 2),
GradientType.LINEAR, null);
break;
}
case “overSkin”:
{
drawRoundRect(
2, 2, width – 4, height – 4, cr2,
overFillColors, upFillAlphas,
verticalGradientMatrix(0, 0, width – 2, height – 2),
GradientType.LINEAR, null);
break;
}
case “downSkin”:
{
drawRoundRect(
2, 2, width – 4, height – 4, cr2,
downFillColors, upFillAlphas,
verticalGradientMatrix(0, 0, width – 2, height – 2),
GradientType.LINEAR, null);
break;
}
}
}
}
}
… but in a flex application I can’t get the same result