<s:SkinnableContainer skinClass="mySkin">
    <s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout>
    <s:Rect>
        ....
    </s:Rect>
    <s:Button ... />
    <s:Button ... />
</s:SkinnableContainer>

public class Panel extends SkinnableContainer {

    // The content and layout properties are inherited from SkinnableContainer. 
    // Panel doesn't add much other functionality beyond what's in SkinnableContainer

    // Skin parts. The Panel class has one new parts: titleField. This is where
    // the header's title goes


    <a href="SkinPart%28required%3D%26quot%3Btrue%26quot%3B%29">SkinPart(required="true")</a>

    /**
     *  The skin part that defines the appearance of the 
     *  title text in the container.
     */
    public var titleField:TextGraphicElement;

    /**
     *  Title or caption displayed in the title bar. 
     */
    public var title:String;

    // This function is called when the skin part is loaded and assigned. 
    override protected function partAdded(partName:String, instance:*):void
    {
        // Assign the content to the header and footer. The main content
        // assignment is done in the superclass (SkinnableContainer)
        super.partAdded(partName, instance);

        if (instance == titleField)
        {
            titleField.text = title;
        }
    }
}

package mx.components
{
/**
 *  Dispatched after the content for this component has been created. With deferred 
 *  instantiation, the content for a component may be created long after the 
 *  component is created.
 *
 *  @eventType mx.events.FlexEvent.CONTENT_CREATION_COMPLETE
 */
<a href="Event%28name%3D%26quot%3BcontentCreationComplete%26quot%3B%2C%20type%3D%26quot%3Bmx.events.FlexEvent%26quot%3B%29">Event(name="contentCreationComplete", type="mx.events.FlexEvent")</a>

/**
 *  Dispatched when a visual element is added to the content holder.
 *  <code>event.element</code> is the visual element that was added.
 *
 *  @eventType mx.events.ElementExistenceEvent.ELEMENT_ADD
 */
<a href="Event%28name%3D%26quot%3BelementAdd%26quot%3B%2C%20type%3D%26quot%3Bmx.events.ElementExistenceEvent%26quot%3B%29">Event(name="elementAdd", type="mx.events.ElementExistenceEvent")</a>

/**
 *  Dispatched when a visual element is removed to the content holder.
 *  <code>event.element</code> is the visual element that's being removed.
 *
 *  @eventType mx.events.ElementExistenceEvent.ELEMENT_REMOVE
 */
<a href="Event%28name%3D%26quot%3BelementRemove%26quot%3B%2C%20type%3D%26quot%3Bmx.events.ElementExistenceEvent%26quot%3B%29">Event(name="elementRemove", type="mx.events.ElementExistenceEvent")</a>

<a href="DefaultProperty%28%26quot%3BmxmlContentFactory%26quot%3B%29">DefaultProperty("mxmlContentFactory")</a>

class SkinnableContainer extends SkinnableContainerBase
{

// NOTE: SkinnableContainerBase extends SkinnableComponent
// SkinnableContainerBase handles enabling/disabling of children and also an 
// IViewport implementation needed for scrolling

    //--------------------------------------------------------------------------
    //
    //  Skin Parts
    //
    //--------------------------------------------------------------------------

    /**
     *  The Group that displays the content of this component. The content 
     *  and layout properties of the 
     *  component are assigned to this skin part.
     */
    <a href="SkinPart">SkinPart</a>
    public var contentGroup:Group;

    //--------------------------------------------------------------------------
    //
    //  Group property and method proxies
    //
    //  The remainder of the FxContainer APIs are direct proxies to the 
    //  contentGroup SkinPart.
    //
    //  Details for these APIs can be found in the Group class.
    //--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    public function get layout():LayoutBase;
    public function set layout(value:LayoutBase):void;

    //--------------------------------------------------------------------------
    //
    //  ViewPort/Scrolling ... just proxies to contentGroup
    //
    //--------------------------------------------------------------------------

    public function get clipAndEnableScrolling():Boolean;
    public function set clipAndEnableScrolling(value:Boolean):void;

    //--------------------------------------------------------------------------
    //
    //  Deferred Instantiation (see Deferred Spec for more details)
    //
    //--------------------------------------------------------------------------

    public function set mxmlContentFactory(value:IDeferredInstance):void;

    public function get creationPolicy():String;
    public function set creationPolicy(value:String):void;

    public function createDeferredContent():void

    //--------------------------------------------------------------------------
    //
    //  Content management 
    //
    //  These are proxies to the properties and methods on the contentGroup
    //  skin part, provided for convenience. They are equivalent to accessing 
    //  the contentGroup part directly. For example, addElement(element); and 
    //  contentGroup.addElement(element); do the same thing. 
    //--------------------------------------------------------------------------

    public function get numElements():int;

    public function getElementAt(index:int):IVisualElement

    public function addElement(element:IVisualElement):IVisualElement;

    public function addElementAt(element:IVisualElement, index:int):IVisualElement;

    public function removeElement(element:IVisualElement):IVisualElement;

    public function removeElementAt(index:int):IVisualElement;

    public function getElementIndex(element:IVisualElement):int;

    public function setElementIndex(element:IVisualElement, index:int):void;

    public function swapElements(element1 :IVisualElement, element2 :IVisualElement):void;

    public function swapElemenstAt(index1:int, index2:int):void;
}

}