Wednesday, December 29, 2010

Skinning in Spark - how to get the default skin?

Flex 4 introduced Spark components skinning - very powerful but at the same time quite overwhelming capability. I think the best idea is to edit default component skin instead of creating your own from the scratch. The big question is - how can you get this default skin? Well, if this is just a skin class for Spark component, it's quite simple. In Flash Builder you just have to click rmb on your project, choose MXML Skin and in Host component you can browse for a skin class.

OK but what about other skins? For example what if you want to find default header background skin for Datagrid component? In Actionscript Reference (LINK) you can find that package for this skin is mx.skins.spark.DataGridHeaderBackgroundSkin. My solution for this problem is quite rough, but it's working fine (if you know a better solution - just let me know). First you have to instantiate a variable with a type of class that you searching for.

var skin:mx.skins.spark.DataGridHeaderBackgroundSkin;

Now you just have to hold ctrl key and click LMB on DataGridHeaderBackgroundSkin and... voila! You got the code! Just copy it all to your own skin file and do whatever you want with it (but please - be nice).

OK so the last thing (I promise) - how can you set the skin class in Actionscript code? This code

myComponent.skinClass = mySkinClass;

obviously not working, and even gives you an error which is something like "Access of possibly undefined property skinClass through a reference with static type components". Why? The answer is simple (and simplest things are usaully the hardest ones - I believe this could be one of the Murphy's law). It's not working because skinClass is not a property, it's a style. So the correst code is

myComponent.setStyle("skinClass", mySkinClass);

3 comments:

  1. This helped me, but it would be nice if it said where to put:

    myComponent.setStyle("skinClass", mySkinClass);

    Still trying to figure that out. I'm sure it's obvious once you've done this.

    Anyways, thanks!

    ReplyDelete
    Replies
    1. This code should be processed as soon as possible, so for example you can put it in initialize complete handler function. Even better idea is to set the skin in MXML code:

      Delete
    2. <myComponent skinClass="mySkinClass" />

      Delete