Skinning an extended Skinnable Container

Question

Hi,
I'm currently re-developping my website with the new Flex 4 SDK. I'm facing something weird :
I built a new panel, based on a skinnabled container. A couple of tweaking for the skin, and voilà, a nice look and feel !
But I'd like to add some more functionnalities : close and refresh button on the right and a toolbar in the middle. So, following what Peter Dehaan posted on his blog, I came up with the following class :
    public class RoundPanel extends SkinnableContainer
        [SkinPart(required="true")]
        public var titleField:TextGraphicElement;
        [SkinPart(required="true")]
        public var headerGroup:Group;
        private var _title:String;
        public function get title():String
            return _title;
        public function set title(v:String):void
            _title = v;
            if (titleField) {
                titleField.text = title;
        private var _headerContent:Array;
        [ArrayElementType("mx.core.IVisualElement")]
        public function get headerContent():Array
            return _headerContent;
        public function set headerContent(v:Array):void
            _headerContent = v;
            if (headerGroup) {
                headerGroup.removeAllElements();
                var idx:int;
                var len:int = v.length;
                for (idx = 0; idx <len; idx++) {
                    headerGroup.addElement(v[idx]);
        public function RoundPanel()
            super();
        override protected function partAdded(partName:String, instance:Object) : void
            super.partAdded(partName, instance);
            if (instance == headerGroup) {
                if (headerGroup) {
                    headerGroup.removeAllElements();
                    var idx:int;
                    var len:int = _headerContent.length;
                    for (idx = 0; idx < len; idx++) {
                        headerGroup.addElement(_headerContent[idx]);
            if (instance == titleField) {
                titleField.text = title;
        override protected function partRemoved(partName:String, instance:Object) : void
            if (instance == headerGroup) {
                if (headerGroup) {
                    headerGroup.removeAllElements();
            super.partRemoved(partName, instance);
And its skin :
<s:Skin
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:components="components.*">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
    <fx:Metadata>
        [HostComponent("components.RoundPanel")]
    </fx:Metadata>
    <s:Rect id="background" left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5" >
        <s:stroke>
            <s:SolidColorStroke color="#555555" />
        </s:stroke>
        <s:fill>
            <s:LinearGradient rotation="90" >
                <s:GradientEntry color="0xFFFFFF" />
                <s:GradientEntry color="0xE8E8E8" />
            </s:LinearGradient>
        </s:fill>           
    </s:Rect>
    <s:Group left="10" top="2">
        <s:layout>
            <s:HorizontalLayout gap="15" />
        </s:layout>
        <s:SimpleText id="titleField" lineBreak="explicit"
            height="30"    verticalAlign="middle" fontWeight="bold">
        </s:SimpleText>
        <s:HGroup gap="0" height="30" id="headerGroup" verticalAlign="middle"/>
    </s:Group>   
    <s:Group id="contentGroup" top="35" width="100%" height="100%" minWidth="0" minHeight="0">
        <s:layout>
            <s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10" />
        </s:layout>
    </s:Group>
</s:Skin>
I instantiate the component in the main app :
<components:RoundPanel title="Round Panel" id="panel"
        skinClass="skins.RoundPanelSkin" width="400" height="200">
        <components:headerContent>
            <mx:Label text="HELLO" />
            <mx:Label text="THE" />
            <mx:Label text="WORLD" />
        </components:headerContent>
        <mx:Label text="Bonjour le monde" />
</components:RoundPanel>
But I don't get WHY the label "Bonjour le monde" does not show up as the contentGroup of the component.
Any ideas ?

Answer 1

I'm having the same problem.
Each time I declare a class member as being a "SkinPart" I no longer receive SkinnableContainer's, Group instance (contentGroup) in my overridden "partAdded" method. If I comment out the [SkinPart] metatag in my class, contentGroup shows up and so does the content I've added.
I'm using the same builds as DevSigning and experienced the same netmon issue as well (not a big deal). Friday's build (10146) had issues even resolving SkinnableContainer so that was a no-go.
Can anyone else share their experience extending SkinnableContainer?
[UPDATE: After implementing the fix shown in the last comment here: http://forums.adobe.com/message/2007571#2007571 , I was able to get SkinTypes working properly. I should also mention that there are occasions when content would show properly without the fix in place. Could it be some sort of strange timing issue? In the interim, I would recommend simply adding the fix to each class that extends SkinnableContainer.]