<s:Skin xmlns...>

    <!-- This group is the background graphics for the button skin. -->
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:Rect radiusX="4" radiusY="4" left="0" top="0" right="0" bottom="0">
            <s:stroke> ... </stroke>
            <s:fill> ... </fill>
        </s:Rect>
        <s:Rect radiusX="3" radiusY="3" left="1" top="1" right="1" bottom="1">
            <s:fill> ... </fill>
        </s:Rect>
    </s:Group>

    <s:TextBox horizontalCenter="0" verticalCenter="0" text="{hostComponent.label}" />
</s:Skin>

<s:Skin xmlns...>

    <s:TextBox id="header" left="0" right="0" top="0" height="30" />

    <!-- This group is the main contentGroup for the panel. The 
         Panel will push its content into this group  -->
    <s:Group id="contentGroup" left="5" top="35" right="5" bottom="35">
        <s:layout><s:VerticalLayout /></s:layout>
    </s:Group>

    <!-- This group is the footer for the Panel. -->
    <s:TextBox id="footer" left="0" right="0" bottom="0" height="30" />
</s:Skin>

package mx.components.baseClasses
{

class GroupBase extends UIComponent implements IViewport
{

/**
 *  Layout for this Group.
 *
 *  The layout object is responsible for measurement
 *  and layout of the Group contents.
 *
 *  @default mx.layout.BasicLayout
 *
 *  @see LayoutBase
 */
public function get layout():LayoutBase;
public function set layout(value:LayoutBase):void;

/**
 *  The ResizeMode for this container.  If the resize mode
 *  is set to <code>ResizeMode.NORMAL</code>, resizing is done by laying 
 *  out the children with our new width and height.  If the 
 *  resize mode is set to <code>ResizeMode.SCALE</code>, all of the children 
 *  keep their unscaled width and height and the children 
 *  are scaled to change size.
 * 
 * @default ResizeMode.NORMAL
 * 
 * @see mx.components.ResizeMode
 */
public function get resizeMode():String
public function set resizeMode(stringValue:String):void

/**
 *  If <code>true</code>, measurement and layout are done
 *  when the position or size of a child is changed.
 *  If <code>false</code>, measurement and layout are done only once,
 *  when children are added to or removed from the container.
 *
 *  @default true
 */
public function get autoLayout():Boolean
public function set autoLayout(value:Boolean):void;

//--------------------------------------------------------------------------
//
//  ViewPort/Scrolling Code (see Scroller spec)
//  
//
//--------------------------------------------------------------------------

public function get horizontalScrollPosition():Number;
public function set horizontalScrollPosition(value:Number):void;

public function get verticalScrollPosition():Number;
public function set verticalScrollPosition(value:Number):void;

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

public function get contentWidth():Number;

public function get contentHeight():Number;

public function getHorizontalScrollPositionDelta(scrollUnit:uint):Number;

public function getVerticalScrollPositionDelta(scrollUnit:uint):Number;

//--------------------------------------------------------------------------
//
//  Properties: IGraphicElement
//  See FXG spec: http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
//
//--------------------------------------------------------------------------

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

//--------------------------------------------------------------------------
//
//  Layout element iteration
//
//  Iterator methods used by Layout objects. For visual elements, the layout element
//  is the element itself. For data items, the layout element is the item renderer
//  instance that is associated with the item.
//
//  These methods and getters are really abstract methods that are 
//  implemented in Group and DataGroup.  We need them here in BaseGroup 
//  so that layouts can use these methods.
//
//  <code>getElementIndex()</code> isn't actually needed for layout, but it's
//  implemented in both Group and DataGroup.
//--------------------------------------------------------------------------

/**
 *  The number of visual elements in this visual container.
 * 
 *  @return The number of elements in this visual container
 */
function get numElements():int;

/**
 *  Returns the visual element that exists at the specified index.
 *
 *  @param index The index of the element to retrieve.
 *
 *  @return The element at the specified index.
 * 
 *  @throws RangeError If the index position does not exist in the child list.
 */ 
function getElementAt(index:int):IVisualElement

/**
 *  Returns the index position of a visual element.
 *
 *  @param element The element to identify.
 *
 *  @return The index position of the element to identify.
 * 
 *  @throws ArgumentError If the element is not a child of this visual container.
 */ 
function getElementIndex(element:IVisualElement):int;

}
}

package mx.events
{

/**
 *  Represents events that are dispatched when an element of a Group
 *  is created or destroyed. 
 */
public class ElementExistenceEvent extends Event
{

//--------------------------------------------------------------------------
//
//  Class constants
//
//--------------------------------------------------------------------------

/**
 *  The <code>ElementExistenceEvent.ELEMENT_ADD</code> constant 
 *  defines the value of the <code>type</code> property of the event 
 *  object for an <code>elementAdd</code> event.
 *
 *  <p>The properties of the event object have the following values:</p>
 *  <table class="innertable">
 *     <tr><th>Property</th><th>Value</th></tr>
 *     <tr><td><code>bubbles</code></td><td>false</td></tr>
 *     <tr><td><code>cancelable</code></td><td>false</td></tr>
 *     <tr><td><code>currentTarget</code></td><td>The Object that defines the 
 *       event listener that handles the event. For example, if you use 
 *       <code>myButton.addEventListener()</code> to register an event listener, 
 *       myButton is the value of the <code>currentTarget</code>. </td></tr>
 *     <tr><td><code>element</code></td><td>Contains a reference
 *         to the visual element that was added.</td></tr>
 *     <tr><td><code>index</code></td><td>The index where the 
 *       visual element that was added.</td></tr>
 *     <tr><td><code>target</code></td><td>The Object that dispatched the event; 
 *       it is not always the Object listening for the event. 
 *       Use the <code>currentTarget</code> property to always access the 
 *       Object listening for the event.</td></tr>
 *  </table>
 *
 *  @eventType elementAdd
 */
public static const ELEMENT_ADD:String = "elementAdd";

/**
 *  The <code>ElementExistenceEvent.ELEMENT_REMOVE</code> constant 
 *  defines the value of the <code>type</code> property of the event 
 *  object for an <code>elementRemove</code> event.
 *
 *  <p>The properties of the event object have the following values:</p>
 *  <table class="innertable">
 *     <tr><th>Property</th><th>Value</th></tr>
 *     <tr><td><code>bubbles</code></td><td>false</td></tr>
 *     <tr><td><code>cancelable</code></td><td>false</td></tr>
 *     <tr><td><code>currentTarget</code></td><td>The Object that defines the 
 *       event listener that handles the event. For example, if you use 
 *       <code>myButton.addEventListener()</code> to register an event listener, 
 *       myButton is the value of the <code>currentTarget</code>. </td></tr>
 *     <tr><td><code>element</code></td><td>Contains a reference
 *        to the visual element that is about to be removed.</td></tr>
 *     <tr><td><code>index</code></td><td>The index where the 
 *       visual element that is being removed.</td></tr>
 *     <tr><td><code>target</code></td><td>The Object that dispatched the event; 
 *       it is not always the Object listening for the event. 
 *       Use the <code>currentTarget</code> property to always access the 
 *       Object listening for the event.</td></tr>
 *  </table>
 *
 *  @eventType elementRemove
 */
public static const ELEMENT_REMOVE:String = "elementRemove";

//--------------------------------------------------------------------------
//
//  Constructor
//
//--------------------------------------------------------------------------

/**
 *  Constructor.
 *
 *  @param type The event type; indicates the action that caused the event.
 *
 *  @param bubbles Specifies whether the event can bubble up the display list hierarchy.
 *
 *  @param cancelable Specifies whether the behavior associated with the event can be prevented.
 *
 *  @param element Reference to the element that was added or removed.
 * 
 *  @param index The index where the element was added or removed.
 */
public function ElementExistenceEvent(
                            type:String, bubbles:Boolean = false,
                            cancelable:Boolean = false,
                            element:IVisualElement = null, 
                            index:int = -1);

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

//----------------------------------
//  index
//----------------------------------

/**
 *  The index where the element was added or removed
 */
public var index:int;

//----------------------------------
//  element
//----------------------------------

/**
 *  Reference to the visual element that was added or removed.
 */
public var element:IVisualElement;

}

}

package mx.components
{
/**
 *  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%3BmxmlContent%26quot%3B%29">DefaultProperty("mxmlContent")</a>
class Group extends GroupBase implements IVisualElementContainer
{
//--------------------------------------------------------------------------
//
//  Properties
//
//--------------------------------------------------------------------------

/**
*  @private
*  Content for this Group.  Do not modify this Array directly.
*
*  The content is an array of visual 
*  elements.  If you want to modify the contents of a Group, 
*  use the content API methods instead (addElementAt(), 
*  removeElementAt(), etc...).
*
*  @default null
*
*/
public function get mxmlContent():Array;
public function set mxmlContent(value:Array):void;

//--------------------------------------------------------------------------
//
//  Content management
//
//  The properties and methods in this section mimic the child management
//  APIs available in the flash class DisplayObjectContainer.
//
//--------------------------------------------------------------------------

//----------------------------------
//  Visual Element iteration
//----------------------------------

/**
 *  The number of elements in this group.
 * 
 *  @return The number of visual elements in this group
 */
public function get numElements():int;

/**
 *  Returns the visual element that exists at the specified index.
 *
 *  @param index The index of the element to retrieve.
 *
 *  @return The element at the specified index.
 * 
 *  @throws RangeError If the index position does not exist in the child list.
 */ 
public function getElementAt(index:int):IVisualElement

//----------------------------------
//  Visual Element addition
//----------------------------------

/**
 *  Adds a visual element to this visual container. The element is 
 *  added after all other elements and on top of all other elements.  
 *  (To add a visual element to a specific index position, use 
 *  the <code>addElementAt()</code> method.)
 * 
 *  <p>If you add a visual element object that already has a different
 *  container as a parent, the element is removed from the child 
 *  list of the other container.</p>  
 *
 *  @param element The element to add as a child of this visual container.
 *
 *  @return The element that was added to the visual container.

 * 
 *  @event elementAdded ElementExistenceChangedEvent Dispatched when 
 *  the element is added to the child list.
 * 
 *  @throws ArgumentError If the element is the same as the visual container.
 */   
public function addElement(element:IVisualElement):IVisualElement;

/**
 *  Adds a visual element to this visual container. The element is 
 *  added at the index position specified.  An index of 0 represents   
 *  the first element and the back (bottom) of the display list, unless
 *  <code>layer</code> is specified.
 * 
 *  <p>If you add a visual element object that already has a different
 *  container as a parent, the element is removed from the child 
 *  list of the other container.</p>  
 *
 *  @param element The element to add as a child of this visual container.
 * 
 *  @param index The index position to which the element is added. If 
 *  you specify a currently occupied index position, the child object 
 *  that exists at that position and all higher positions are moved 
 *  up one position in the child list.
 *
 *  @return The element that was added to the visual container.
 * 
 *  @event elementAdded ElementExistenceChangedEvent Dispatched when 
 *  the element is added to the child list.
 * 
 *  @throws ArgumentError If the element is the same as the visual container.
 * 
 *  @throws RangeError If the index position does not exist in the child list.
 */
public function addElementAt(element:IVisualElement, index:int):IVisualElement;

//----------------------------------
//  Visual Element removal
//----------------------------------

/**
 *  Removes the specified visual element from the child list of 
 *  this visual container.  The index positions of any elements 
 *  above the element in this visual container are decreased by 1.
 *
 *  @param element The element to be removed from the visual container.
 *
 *  @return The element removed from the visual container.
 * 
 *  @throws ArgumentError If the element parameter is not a child of 
 *  this visual container.
 */
public function removeElement(element:IVisualElement):IVisualElement;


/**
 *  Removes a visual element from the specified index position 
 *  in the visual container.
 *
 *  @param index The index of the element to remove.
 *
 *  @return The element removed from the visual container.
 * 
 *  @throws RangeError If the index does not exist in the child list.
 */
public function removeElementAt(index:int):IVisualElement;

//----------------------------------
//  Visual Element index
//----------------------------------

/**
 *  Returns the index position of a visual element.
 *
 *  @param element The element to identify.
 *
 *  @return The index position of the element to identify.
 * 
 *  @throws ArgumentError If the element is not a child of this visual container.
 */ 
public function getElementIndex(element:IVisualElement):int;

/**
 *  Changes the position of an existing visual element in the visual container.
 * 
 *  <p>When you call the <code>setElementIndex()</code> method and specify an 
 *  index position that is already occupied, the only positions 
 *  that change are those in between the elements's former and new position.
 *  All others will stay the same.</p>
 *
 *  <p>If a visual element is moved to an index 
 *  lower than its current index, the index of all elements in between increases
 *  by 1.  If an element is moved to an index
 *  higher than its current index, the index of all elements in between 
 *  decreases by 1.</p>
 *
 *  @param element The element for which you want to change the index number.
 * 
 *  @param index The resulting index number for the element.
 * 
 *  @throws RangeError - If the index does not exist in the child list.
 *
 *  @throws ArgumentError - If the element parameter is not a child 
 *  of this visual container.
 */
public function setElementIndex(element:IVisualElement, index:int):void;

//----------------------------------
//  Visual Element swapping
//----------------------------------

/**
*  Swaps the index of the two specified visual elements. All other elements
*  remain in the same index position.
*
*  @param element1 The first visual element.
*  @param element2 The second visual element.
*/
public function swapElements(element1 :IVisualElement, element2 :IVisualElement):void;

/**
 *  Swaps the visual elements at the two specified index 
 *  positions in the visual container.  All other visual 
 *  elements remain in the same index position.
 *
 *  @param index1 The index of the first element.
 * 
 *  @param index2 The index of the second element.
 * 
 *  @throws RangeError If either index does not exist in 
 *  the visual container.
 */
public function swapElementsAt(index1:int, index2:int):void;

//--------------------------------------------------------------------------
//
//  Properties: ScaleGrid
//
//--------------------------------------------------------------------------

public function get scaleGridBottom():Number;
public function set scaleGridBottom(value:Number):void;

public function get scaleGridLeft():Number;
public function set scaleGridLeft(value:Number):void;

public function get scaleGridRight():Number;
public function set scaleGridRight(value:Number):void;

public function get scaleGridTop():Number;
public function set scaleGridTop(value:Number):void;

}
}