Flex EnhancedButtonSkin Release
Are you a Flex coder? Ever feel constrained by the default ButtonSkin provided with the Flex application? I have some good news for you. I have been working on an ‘enhanced’ version of the skin that allows for more fine-grained control over button display such as explicit, multiple gradient and border colors for each button state, border thickness, as well as individual corner radii.
Here is an example demonstrating a few of the newly supported style values.
.customButtonStyle {
cornerRadii: 16, 0, 16, 0;
borderColors: #006699, #006699;
borderThickness: 3;
fillColors: #FCFFF4, #006699, #FCFFF4,
fillAlphas: 0.5, 0.5, 0.5;
fillColorRatios: 0, 128, 255;
}
Check out the style explorer that I built for the skin, or go to Flexlib to download the source.
[...] assets to achieve a quad-gradient, dual-rounded corner, tri-alpha button? If so check out the EnhancedButtonSkin, complete with an Explorer, from Daniel Wabyick. There’s a lot of looks you can create, from [...]
Pingback by ScaleNine Blog » Blog Archive » EnhancedButton Skin for Flex — April 16, 2007 @ 1:44 pm
Looking good. A fine addition to FlexLib.
Comment by Josh Tynjala — April 16, 2007 @ 3:44 pm
Very cool, nice job..
Comment by Jason Hawryluk — April 16, 2007 @ 11:54 pm
Indeed a nice job !
Comment by Ofir — May 1, 2007 @ 5:06 am
This is nice, but I have been unable to control the appearance of the button’s down state. If such control is not available, I would call this a major step backward from the standard Flex Button.
Comment by Joe — September 18, 2007 @ 2:51 pm
Hi Joe,
I would agree that controlling the down state would be a very nice enhancement. It would be straightforward to add to the button skin. I will try to add it when I have some time.
Comment by admin — September 18, 2007 @ 3:05 pm
Is there anyway to choose which sides the border shows up on? I know normally there is borderSides, but it doesnt seem to work for this. Sorry a little new at this. Thanks!
Comment by Chris — October 29, 2007 @ 6:37 pm
I’m having trouble using EnhancedButtonSkin. I’ve added the SWC file to my project’s library path, but I keep getting the following error in Flexbuilder:
1172: Definition EnhancedButtonSkin could not be found.
I’m using Flexbuilder 2. I followed the instructions from flexlib’s Quickstart.
http://code.google.com/p/flexlib/wiki/QuickStart
Any ideas what I’m doing wrong? (Oh the reference to EnhancedButtonSkin is inside my css files).
Comment by Charlie Hubbard — November 1, 2007 @ 12:32 pm
Unfortunately, I don’t have Flex 2.01 setup ( I use Flex 3), and I have never tried running through the SWC file. Can you import the EnhancedButtonSkin into a normal Actionscript or MXML file ? I would use this to verify that EnhancedButtonSkin is in the SWC and that you have the exact package name and classname correct. Let me know how it goes.
Comment by admin — November 1, 2007 @ 1:18 pm
Thanks that was it! It was in the SWC file. I could do an import on flexlib.skins.EhancedButtonBorder in the MXML file. However, I copied the CSS from the style explorer you created. It was missing the fully qualified package name. Once I fully qualified the package in the CSS like this:
upSkin:ClassReference(‘flexlib.skins.EnhancedButtonSkin’);
It worked. I would suggest modifying the style explorer to include the fully qualified path. Just for us noobs.
Thanks for the hint.
Comment by Charlie Hubbard — November 1, 2007 @ 9:03 pm
man, this is great!!! the border gradients alone justify the augmentation to the standard flex library, but with all of the other features…fantastic! the inclusion of a style explorer as well is really great. thanks!!!
Comment by josh ofCourse — February 13, 2008 @ 4:07 am
Great work! Quick question on the Down State. I added some code to the case “downSkin”: which displays the appropriate fill colors and alpha, but the Label either goes away or is hidden from view. Any thoughts? Thanks!
Comment by KC — December 23, 2009 @ 10:29 am
Been a while since I played with that component. Did you figure it out? I could check your code if you send me a flex project export.
Comment by admin — December 25, 2009 @ 10:35 am
[...] Flex Enhanced Button Skin Explorer (from Daniel Wabyick blog) is an explorer dedicated to the EnhancedButtonSkin available in [...]
Pingback by The Blogagic Flex Explorer Collection (Component, Style, Effect) | Blogagic — May 24, 2010 @ 6:39 am
Hi, I am using your code for enhanced button skin the styles are:
{
fill-colors: #FCFFF4, #FFFFFF, #FFFFFF, #FFFFFF;
over-fill-colors: #FCFFF4, #FFFFFF, #FFFFFF, #FFFFFF;
selected-fill-colors: #FCFFF4, #FFFFFF, #FFFFFF, #FFFFFF;
fill-color-ratios: 0, 40, 80, 255;
fill-alphas: 1, 1, 1, 1;
color: #FF00FF;
text-roll-over-color: #FF00FF;
text-selected-color: #FF00FF;
border-color: #190C81;
border-thickness: 2;
borderColors: #006699, #006699;
overBorderColors: #003399, #003399;
}
my butotn lable is updated by TextLayoutFramework
and i am unable to display the lable of button
but the same is display with following style
{
cornerRadii: 9, 0, 0, 9;
overFillColors: #cacaca, #cacaca, #cacaca, #cacaca, #cacaca, #cacaca;
overFillAlphas: 0.5, 0.5, 0.5, 0.5, 0.5, 0.5;
overFillColorRatios: 0, 52, 102, 153, 204, 255;
fillColors: #cacaca, #cacaca, #cacaca, #cacaca, #cacaca, #cacaca;
fillAlphas: 0.6, 0.45, 0.5, 0.5, 0.5, 0.5;
fillColorRatios: 0, 51, 102, 153, 204, 255;
borderThickness: 2;
borderColors: #065182, #065182;
borderAlpha: 0.55;
color: #538FC2;
textRollOverColor: #FFFFFF;
}
for other button any help would be highly appreceated
Comment by Gaurav — July 13, 2010 @ 2:03 am
Hi Gaurav …. I haven’t tried using TLF with this component, as it was built in the Flex 2 days. Also, I’m not quite sure what your exact problem is. The CSS styles are completely different in the two examples. Maybe start with the one that works, and just modify the colors?
Comment by admin — July 13, 2010 @ 2:46 pm