Anyone who has done a lot of skinning in Flex will know the simplest, quickest and most effective way is to use a PNG with a scale 9 grid (via the Embed directive).

As an example, applied in CSS:

Button
{
    downSkin: Embed(source="/assets/skin_button_pressed.png",
        scaleGridBottom="23", scaleGridLeft="3", scaleGridRight="11", scaleGridTop="3");
    overSkin: Embed(source="/assets/skin_button_hover.png",
        scaleGridBottom="23", scaleGridLeft="3", scaleGridRight="11", scaleGridTop="3");
    upSkin: Embed(source="/assets/skin_button_normal.png",
        scaleGridBottom="23", scaleGridLeft="3", scaleGridRight="11", scaleGridTop="3");
}

So we get passed a PSD from one of the designers, export the PNG’s, then using an on-screen ruler or the guides in Gimp, work out what the scale grid parameters need to be. And its this last step that is just a bore.

So while toying around with JavaFX 1.2, I knocked together a little application which allows us to simply load a PNG, drag four guides to mark the scale grid, then click a button to copy an Embed tag with correct scale grid values to the system clipboard ready to paste into the code.

I know all of us at Encore will be using this little gem of a time-saver, so for anyone else who fancies using it too, I have packaged it up as a Java Web Start application.

Install and launch here: