Degrafa – Totally Custom Styles

This post is an example of how to create custom style metadata and pass different values into your degrafa skin dynamically.

I would like to give a shout out to John Yanarella, he and I have been working on a project, and he wrote the skin, and then I adapted it to be able to pass custom styles in via a stylesheet.

Application Source

So the reason I wanted to cover this is because I find myself creating degrafa skins, and then creating them over and over and over to change things just SLIGHTLY, like corner radius, or a stroke here, or a border there, or different highlight colors, but in general the style is the same… and before I know it, I end up with 3 different variations of classes that are relatively simple…

Like flex by default, I would like to pass in styles via mxml or a stylesheet and have it pass through to the degrafa skin… Thats what this post shows you how to do…

lets say you create a style called “customFillColors”

assets/style/styles.css

.myStyledButton { customFillColors: #FFFFFF,#0000FF; }

and you want that to flow into your skin, what you can do is, in your Degrafa skin you have to override updateDisplayList, and get the style in actionscript, and then change the colors accordingly from the style.

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void { super.updateDisplayList( unscaledWidth, unscaledHeight );

var fillColors:Array = getStyle( "customFillColors" );

if ( ( fillColors != null ) && ( fillColors.length == 2 ) ) { topFillColor = fillColors[ 0 ]; bottomFillColor = fillColors[ 1 ]; } }

Here is the application, and you can right click to view source

Application – Source

Leave a comment