In my previous post, I explained how to create nice gradients using Degrafa’s CSSSkin. Once again, CSSSkin is one of the very powerful, yet overlooked function of the Degrafa framework (look at this, or that for those who would still doubt it). But it has in my opinion a limitation: it works almost only for containers (Canvas, Panel, List, etc). But as it stands by default in the latest version (Beta 3.1), it doesn’t work for buttons (Button, ButtonBar and the like). When it comes to the define CSS tags like upSkin, downSkin, selectedOverSkin, etc, there’s no choice but to use tailor made classes extending GraphicBorderSkinlike in this example. But actually, there’s a rather easy way to use CSSSkin defined in a CSS file only, by simply extending CSSSkin.
This is why I’ve created the following class, CSSButtonSkin:
And now an example on how to use it (click to launch then right-click to see the code):
Degrafa CSSButtonSkin Example (click to Launch)
Note that the “child skin” (upSkin for example) inherits its parent’s styles, so there’s no need to re-declare them.
I tried the code in FlexBuilder and I end up with two errors:
1172: Definition com.degrafa.skins:CSSButtonSkin could not be found. Navigation/src/css TopBar.css line 71
1202: Access of undefined property CSSButtonSkin in package com.degrafa.skins. Navigation/src/css TopBar.css line 71
I’m a newb, so it’s probably just a very simple referencing problem that I don’t get yet. Any ideas?
The class CSSButtonSkin is not part of the Degrafa framework and that was the point of this article. Your need to create your own one in src/com/degrafa/skins with the code above (have a look at the source code of the example for more details).
The whole point of this is to extend CSSSkin specific styles to regular buttons (with their different states). You should have a look here to see what kind of styles are available within CSSSkin (and my own CSSButtonSkin).
Subscribe
(1 votes, average: 4.00 out of 5)
Loading ...
I tried the code in FlexBuilder and I end up with two errors:
1172: Definition com.degrafa.skins:CSSButtonSkin could not be found. Navigation/src/css TopBar.css line 71
1202: Access of undefined property CSSButtonSkin in package com.degrafa.skins. Navigation/src/css TopBar.css line 71
I’m a newb, so it’s probably just a very simple referencing problem that I don’t get yet. Any ideas?
The class CSSButtonSkin is not part of the Degrafa framework and that was the point of this article. Your need to create your own one in src/com/degrafa/skins with the code above (have a look at the source code of the example for more details).
Great addition to the degrafa framework. This should be an official part of it!!!
I noticed that the border css tags don’t seem to be supported – at least they don’t appear to work for me. These are the tags I had trouble with:
border-alpha: 1;
border-color: #4D4D4D;
border-style: solid;
The whole point of this is to extend CSSSkin specific styles to regular buttons (with their different states). You should have a look here to see what kind of styles are available within CSSSkin (and my own CSSButtonSkin).
Thanks Gilles, that’s exactly what I needed; as someone else commented, well worth adding to standard Degrafa toolkit.
Make sure that all of the button styles you specify exist or it crashes the runtime (at least the Air 2.0 runtime anyway)