在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.