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