For my session at Flash Camp Birmingham I wanted to introduce people to declarative skinning within Flex. I was skinning Flex applications back in Flex 2 and to get the right visual appeal it was quite a tricky thing to get right. There was a reliance on heavy external assets brought into Flex and scaled using Scale9 techniques. There were many times I wanted to have better control of the UI I was creating through not only a more advanced CSS capability but without having to resort to creating skins from scratch directly with the Flash drawing API. Degrafa is a declarative graphics framework for Flex (and soon for pure ActionScript projects). It makes sense using MXML like syntax for creating your graphical skins. The work the Degrafa team have done is amazing, I had a very good email conversation with Jaun Sanchez of Effective UI before my talk so that I could clarify a few things and get an insight into the future of Degrafa, especially with Flex 4 and FXG from Adobe going into public beta. FXG is a graphical interchange format developed by Adobe and is similar in many ways to SVG. Adobe are building future tooling to take advantage of this format and enable rich graphics to be transferable between developer and designer tools. FXG is also similar in approach to Degrafa the syntax is very alike. Both have their place and advantages and disadvantages depending upon your toolset choice and project requirements.

Flash Camp session slides

Here are my session slides for Flash Camp Birmingham (UK), 16th June 2009. Taking an introductory look at Degrafa and FXG I demonstrated the code for skinning a simple UI in both implementations. The skin is part of a project i'm working on for creating a Palm Pre looking skin for Flex 3 with Degrafa and Flex 4 with FXG. As you can see in the examples further down the page they are very visually close! The full skin will be available soon but for now take a look at the code and I welcome any comments or suggestions on my implementation.

Degrafa skin

For this skin I'm using Flex 3 and a CSS file to target the skin classes for the components. To get a Degrafa skin to match the width and height of the component you no longer need to override the updateDisplayList() method. There are two exposed variables called skinWidth and skinHeight that you should use. [kml_flashembed fversion="8.0.0" movie="http://jameswhittaker.com/wordpress/wp-content/uploads/flash/flashcamp/degrafa/FlashCamp2.swf" targetclass="flashmovie" useexpressinstall="true" publishmethod="static" width="300" height="400"]

[/kml_flashembed] The MXML structure for this Flex 3 example is simply: Then the Degrafa button is skinned as follows (refer to the source in the download for full code): Download the Flex 3 source here.

FXG skin

The MXML is slidghtly different here because of Flex 4 using the new Spark components. Not all components have been created in Spark so elements like tabNavigator are still Halo components. This is not an issue as you can mix and match Halo and Spark components with certain rules like a Halo navigator can only have a Halo container as it's first child. Inside that container you can then place Spark components. Looking around the Flex 4 SDK there is a set of Spark skins for Halo components so that is the technique I have used here. SparkSkin is the base class for these skins so I was able to skin the tabNavigator using FXG. [kml_flashembed fversion="8.0.0" movie="http://jameswhittaker.com/wordpress/wp-content/uploads/flash/flashcamp/fxg/FlashCamp3.swf" targetclass="flashmovie" useexpressinstall="true" publishmethod="static" width="300" height="400"]

[/kml_flashembed] Using skinnableComponent you can then hang Spark skins off them as they support skinning (obviously!). So the simple MXML structure we have is: Then as an example the skin for the button in FXG is: Download the Flex 4 source here.

What's next

I'm looking to release the skins very soon and hopefully the guys at Degrafa will add it to the samples page. If you have any feedback please leave them in the comments and please Tweet out this post.