Skinning an extended Skinnable Container

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 ?