There are a some new features available for skinning in Flex 3 beta 2. Some of them are covered by Juan and NJ. But I want to focus in one specific topic: Stateful Skins (without Flash).
These are very nice additions to the framework because they keep the code clean while giving more power when it comes to changing the behavior and look and feel of the component. With that ability, you could add transitions between one state to the other or change any property between states, without leaving Flex Builder.
As an example, to create this button, I would have this code in my application:
As you can see, I have a normal button and a link to a style sheet.
The style sheet contains the following code:
/* CSS file */
Button{
skin: ClassReference("skins.ButtonSkin");
fontSize:16;
fontWeight:normal;
paddingLeft:23;
paddingRight:23;
paddingTop:10;
paddingBottom:10;
color:#ffffff;
textRollOverColor:#ffffff;
cornerRadius:5;
borderThickness:1;
borderColor:#cccccc;
borderStyle:solid;
backgroundColor:#1e83b8;
}
So far, everything looks clean at this point: a button, and a style that references a skin ("skins.ButtonSkin"). A developer can work on the logic of the application without worrying about how the button looks. Later, a designer or a "designloper" can add transitions, colors and change the look and feel without breaking or modifying the application. A reference in the CSS to the skin property gives the designer the power to add a new class (ex: skins.ButtonSkin) where transitions, dropshadows and other effects are defined.
Usually (in Flex 2), we would create this skin as a programmatic skin and have some kind of logic to determine what to show depending whether this skin should be "up", "down", "over", etc, (if we used the same skin for the "upSkin", "downSkin", "overSkin", etc). Another easy way was to use an embedded asset as the skin. With these two approaches we would get one instance of the skin for each corresponding button state, making it difficult to have transitions between these skins.
With Flex 3, we can create only one class with states for each corresponding button state. I've implemented it as a MXML component, using a Canvas as the super class, because I'm lazy ;) but I could have used any UICoponent or any class that implements IStateClient.
In this canvas, I implemented a state for each skin in the button: down, over, up (I didn't add disabled because I don't use it) and I can create transitions between states. In this example, I made a color transition from blue to orange (thanks Darron for the library) and set other properties like adding filters.
Disclaimer, I'm changing the background color by calling setStyle. That is not a good practice because setStyle is very expensive. It is better to use other method to make the same effect.
The code of the ButtonSkin is the following:
This is just the beginning. Ely Greenfield showed what is coming in Flex 4 at MAX and they are making these things even easier. I'm very excited.
I also want to see how I can use Degrafa to implement some more complex skins.
If you want to read more, I recommend checking the docs