Degrafa not only gives you the ability to draw graphical shapes and objects, but it also allows you to use anything you can create with it as a skin for any component in Flex. Here’s is a simple example of a Button using graphics drawn with Degrafa as skins:

Like the basic shape example, these skins are comprised of shapes, fills and strokes. The only difference is that separate MXML files have been created for the different skin states of the Button. For example, the code for the UpSkin.mxml file used in this example looks like this (not including MXML for Fills and Strokes):

<GeometryData>

    <Geometry:RoundedRectangle cornerRadius="10"
        x="0" y="0" width="150" height="50"
        Fill="{MainFill}"/> 

    <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="3" width="144" height="44"
        Fill="{RevFill}" /> 

     <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="3" width="144" height="16"
        Fill="{WhiteWash}" /> 

    <Geometry:RoundedRectangle cornerRadius="10"
        x="3" y="31" width="144" height="16"
        Fill="{RWhiteWash}"/>  	

</GeometryData>

After a skin is created for each Button state we can assign the skins to a Button inside an Application just like any other skin, like this:

<mx:Button width="150" height="50"
		label="Sample Button Skin"
		upSkin="UpSkin"
		overSkin="OverSkin"
		downSkin="DownSkin"/> 

This simple example offers a small glimpse at what is possible and as the framework continues to grow, skinning will definitely be one of our focuses.