This is old news for some, but seriously, after reading the skinning architecture docs and building a couple of sample skins using the Flex 4 SDK, I have to say that it completely rocks!
Up until Flex 4, the approach for architecting UI components (starting back with MX2004 all the way up to Flex 3) has been largely the same. The result has generally been robust components with an amazingly wide feature set but that could take quite a bit of work to customize, particularly in regards to skinning. Each generation of components has improved upon the previous one, but after looking at the Gumbo components, I absolutely love the new true MVC approach. The fact that the view (skin) is pretty much completely decoupled from the controller makes customization more flexible and easier than ever.
Here is a simple button skin built entirely in MXML (Flash player 10 required). Not super complex, yet it shows how easy skinning really is. This example contains small customizations like animated transitions between states, lots of layered gradients, multiline label, label with glow, and others which could take quite a bit of work to implement in the existing framework.
Here are my top 10 things to love about skinning in Flex 4:
FXG - A lot of this just wouldn't be possible without graphics tags introduced in Flex 4.
hostComponent - The ability to bind anything in your skin to any property in the component allows the skin to pull the data it requires and display itself accordingly.
States and Selectors - The ability to define states that correspond to states in the controller is made hugely powerful by the introduction of "state-selectors." In MXML, you can now define values for any state your component implements (for example, in button, you can do alpha.over="0.5").
Integration with the Flex 3 framework - the Gumbo components extend the existing UIComponent class so things you are already familiar with like component lifecycle, events, and tabbing all still apply.
Skin parts - The ability to break up your skin into parts, each defined in your controller to have it's own behavior.
Layout Agnostic - You can quickly snap in different layout classes to display the component in different ways. No longer is the layout tied into the component.
Flexibility - Using all of the above techniques, Ely has already demonstrated that you can customize a list to act like an Accordion or a TabBar without much difficulty.
Building via composition - In this new architecture, it's super simple to just snap new pieces into a skin and wire them up to the hostComponent properties to create more complex components. For example, List doesn't contain a ScrollBar by default, but to add one and make it work is fairly trivial.
Lightweight - Since all of the non-essentials have been pulled out of these components, there is far less code which should mean improved performance. Can they do as much as the Flex 3 component set? No, but I don't think that's the intent initially, as these don't appear to be a replacement for those components, rather an alternative.
Thermo - ever since I was blown away by the initial Thermo demo video (particularly the parts on converting artwork to components), I was skeptical about how they would be able to support skinning in that way using the existing Flex component framework. However, after seeing how skinning works in Gumbo, it now makes tie in with a tool like Thermo much more obvious.
