Awhile back I became interested in the details of skinning. By default, the ProgrammaticSkin, "HaloBorder" is used to skin most everything in Flex. HaloBorder is a monster, check out the source code for yourself. As it's responsible for skinning most everything, it's got a significant amount of conditional logic for all of the different components.
But despite all this complexity, it's not terribly flexible. My biggest beef is that it doesn't allow for gradient backgrounds. Just look at any flex app and you will find gradient backgrounds abound - but usually these are accomplished with a background image, or a custom programmatic skin. Wouldn't it be nice if you could do this with style sheets?
So I've created a programmatic skin that skins buttons and boxes (and possibly other components that I haven't tried yet). Here is a sample:
Notice that the button has custom hover state and down state gradients. The gradient also has a subtle angle, to spice things up a bit. All of this is done using style sheets for my new programmatic skin "GradientRectangularBorder".
If you'd like to play around with all of the parameters, try out the sample application: TestGradientSkin.html (4.3K). The sample app will let you change all style sheet parameters, shows you the resulting components, and at the bottom of the page the underlying source code. The "base" gradient applies to both the button and the box, while the other two gradients are specific to the button, as the box doesn't have a hover or down state.
Gradients are defined by specifying an array of colors, alphas, and ratios. The ratios go from 1-255 (don't ask me why) with the beginning of the gradient starting at 1, and the end of the gradient going to 255. Toggle the checkbox for a particular gradient color to add or remove it from the gradient. The default gradient in the sample app is a nice four point gradient with that slick, reflective quality that's so populare these days, but I've left room between each color for a new gradient point. If you want to remove a gradient entirely, unclick all of it's checkboxes. The skin will then use a default gradient which is based on the base gradient. This feature allows you to create a reasonably good looking button by specifying only the base gradient. Unclick all of the gradients except the base gradient to see this default behavior.
You can also set per corner radii, the gradient rotation, and specify the border type. The "gradient" border type creates a high contrast gradient border which is based on the current gradient skin, but rotated 180 degrees. The border gradient is not customizable, though this may be a future enhancement.
To use this highly customizable skin, you can reference it directly as a programmatic skin in your style sheets:
Button {
upSkin:ClassReference('com.quirkconsulting.skins.GradientRectangularBorder');
downSkin:ClassReference('com.quirkconsulting.skins.GradientRectangularBorder');
overSkin:ClassReference('com.quirkconsulting.skins.GradientRectangularBorder');
}
Box {
borderSkin:ClassReference('com.quirkconsulting.skins.GradientRectangularBorder');
}
or more conveniently use the GradientButton, GradientBox, GradientVBox, and GradientHBox convenience classes that wire up the skin styles for you. These are all available in my flex components library:
Comments