How to add skin states to Flex 4 containers

There is an excellent article over at newtriks (referencing other excellent articles regarding this subject) on how to add skin states to Flex 4 Containers using ActionScript.

I implemented my custom SkinState using the information provided, but never succeeded. There was definitely something missing, which was not obvious to me.

After some (really long) time of inspecting variables and tracing method return values, I noticed, that the getCurrentSkinState():String method return null values.

As is so often, a web search session revealed the missing piece of information. A paragraph in the Adobe Flex 4.5 docs called Implementing the component, explains in detail how to override the getCurrentSkinState():String method in order to get your custom skin state name returned properly.

You can use information in the class to determine the new view state.

override protected function getCurrentSkinState():String {
    var returnState:String = "normal";
 
    // Use information in the class to determine
    // the new view state of the skin class.
    if (_textPlacement == "left")     {
        returnState = "textLeft";
    }
    return returnState;
}

Or applied to a component with several defined states ( e.g. RadioButton) which should still work:

override protected function getCurrentSkinState():String {
 
    if( _highlight ) {
	return "highlight";
    }
 
    return super.getCurrentSkinState();
}