Default Skin for custom FlashBuilder components.

In a recent post on Custom FlashBuilder Component Views I showed how to create a swc file with your custom component.
This raised a question by one of the commenters on how to create default custom skins for your components so that when you ship them a user can use your default skins without having to explicitly set them.
Normally you have to do something like this

 
<clock:BinaryClock
   skinClass="co.uk.betadesigns.binaryclock.BinaryClockSkin"
   />
 

Setting up my custom component with my custom skin, however if a user of my component doesn't know that they have to set this style they will get a runtime error something like this

 
Error:
   Skin for
   TestProject.ApplicationSkin2._ApplicationSkin_Group1.
   contentGroup.BinaryClock5
   cannot be found.
 

The way to get around this is to tell the library.swc file that you want to set a default style for your components in case one is not set. This allows you to provide one as well as allowing it to be overridden by anyone that wants to.

All you have to do is create a defaults.css file

 
/* CSS file */
@namespace "co.uk.betadesigns.components.binaryclock.*";
BinaryCounter
{
   skinClass : ClassReference(
   "co.uk.betadesigns.components.binaryclock.BinaryCounterSkin"
   );
}
 
BinaryClock
{
   skinClass : ClassReference(
   "co.uk.betadesigns.components.binaryclock.BinaryClockSkin"
   );
}
 

You need to create this in the top level package of your swc file under ( default package for FlashBuilder or src for Flex3 ).
The First element
@namespace is the namespace to the component you want to reference ( you can include multiple namespaces for multiple components in different packages ).
From this you can see that my BinaryClock is in the package co.uk.betadesigns.components.binaryclock.*
You then setup selectors for all the SkinnableComponents you want to give default skins for.
Next you simply need to include the defaults.css file in the compiler arguments.Properties>Flex Library Build Path>Assets>

Then in the Flex Library Compiler>Additional Compiler Arguments set -defaults-css-url defaults.css This will set the defaults.css file as the default css for all components in the swc

All Done.
Example Project files here. ( Right click save as )

Be Sociable, Share!

•