TitleWindowSkin, TitleWindowCloseButtonSkin, colorization: how do I duplicate this behavior in a custom component?

I am trying to use the spark.skins.spark.TitleWindowCloseButtonSkin in a custom component and make it look thematically similar to how it looks in TitleWindow. Just specifying it as the skin class for a Button works no problem. I also have a .css style applied to all my TitleWindow classes that affects the close buttons in a TitleWindow. If I set the chrome color of the TitleWindow in .css then the close button skin also gets colorized to match this color. My custom component is also using the same style reference as my TitleWindows. But the Button instance inside of my custom component does not get colorized. So while I have blue TitleWindows with blue-colorized closed buttons, I have a blue custom component with a default gray background closed button (on button-press, the gray background appears).

There must be something going on with TitleWindowSkin and TitleWindowCloseButtonSkin via the colorization mechanic but I don't understand what it is. How should I solve this problem? I need to make the close button style in my custom component match that of the close button in my TitleWindows.

Here is a picture of the problem:

The TitleWindow is on the left in 开发者_运维知识库both pictures. The custom component is on the right. In the left frame, you see the TitleWindow close button in the down position, note that its down state is colorized to match the theme of the TitleWindowSkin. On the right you see the down state of the custom component's close button. I do not know how to colorize the default gray to match the blue theme applied to the custom component.

I am sure there are a multitude of ways to solve this. I am looking for the most "correct" way. I do not want to hard-code colors because later an actual designer will come in and tweak the .css.

PS My custom component extends from spark.components.Group. Could that be a problem??? I should also mention that normal Button instances that use the default spark ButtonSkin do seem to get styled properly in the custom component (part of the reason this problem is so frustrating).

EDIT: yes, yes indeed it looks like the first step to a solution is to inherit from SkinnableComponent not Group or UIComponent...

---

In your TitleWindowSkin you need to add "closeButton" in exclusions array at top, I have resolved the same issue with this.

---

hm, this is curious since I can't seem to find any reference to chrome color or anything within the close button skin:

<s:Rect left="0" top="0" right="0" bottom="0">
        <s:stroke>
            <s:SolidColorStroke color="0x000000"
                                alpha="0.0"
                                alpha.over="0.7"
                                alpha.down="0.7"
                                weight="1"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xCCCCCC" alpha="0" alpha.down="0.7" />
        </s:fill>
    </s:Rect>

If I were you, I'd just create a skin based on the close button skin and have a reference to a style color using getStyle which can be changed in the css.

---

Ok, so I have mostly figured out the problem. It stems from the fact that I am not using a proper skin technique on my custom component. The custom component logic is fine where it is at, but I need to prepare a separate skin class that actually instantiates the custom component's "parts" (ie: sub-components). Currently, the custom component does this in createChildren(). Furthermore, to take advantage of the colorization mechanic, the skin class must inherit from SparkSkin. The TitleWindowCloseButton instance needs to be a member of the custom component's skin class (as well as having a reference in the custom component class). SparkSkin will automatically color transform (colorize) every child of the custom component's skin unless it is explicitly excluded. Finally, back in the custom component, override partAdded() and when "closeButton" comes up, add the close button's event handler at that time. Feels very Cairngorm-ey... but I digress (must suppress urge to rant about the stoopid that are "helper" classes).