Applying Dynamic Styles to Skins in Flex

Question

I have a skin for a scrollbar thumb that I want to be able to style or set properties dynamically.

<mx:Panel   
 verticalScrollBarStyleName="verticalScrollBarNoArrows">
</mx:Panel>

style.css

.verticalScrollBarNoArrows
{
    upArrowSkin:      ClassReference(null);
    downArrowSkin:  ClassReference(null);

    trackSkin:   ClassReference(null);
    thumbSkin:   ClassReference("skins.ScrollBarThumb"); 
}

ScrollBarThumb.as (snippet)

public class ScrollBarThumb extends Border
{
 [Bindable]
 private var cornerRadius:Number = 2;

 [Bindable]
 private var backgroundColor:uint = 0x222222;

 [Bindable]
 private var xOffset:int = -3;

I want to be able to set these properties in the skin so the skin can be styled differently for each component that uses it.

How do you suggest I do this?

Answer 1

You should usually set styles on a skin as styles not as properties:

[Style(name="cornerRadius", type="Number", format="Length", inherit="yes")]

Then in updateDisplayList you can call getStyle("cornerRadius") when you draw the skin.