<s:SkinnableDataContainer itemRenderer="myItemRenderer">
    <s:layout><s:VerticalLayout horizontalAlign="center"/></s:layout>
    <s:ArrayCollection>
        <fx:Object firstName="Deepa" lastName="Subramaniam" phoneNumber="415-555-1111" />
        <fx:Object firstName="Glenn" lastName="Ruehle" phoneNumber="415-555-2222" />
        <fx:Object firstName="Ely" lastName="Greenfield" phoneNumber="415-555-3333" />
        <fx:Object firstName="Alex" lastName="Harui" phoneNumber="415-555-4444" />
        <fx:Object firstName="Ryan" lastName="Frishberg" phoneNumber="415-555-5555" />
    </s:ArrayCollection>
</s:SkinnableDataContainer>

package spark.components {
/**
 *  Dispatched when the selection is going to change. 
 *  Calling the <code>preventDefault()</code> method
 *  on the event will prevent the selection from changing.
 */
<a href="Event%28name%3D%26quot%3BselectionChanging%26quot%3B%2C%20type%3D%26quot%3Bmx.events.IndexChangedEvent%26quot%3B%29">Event(name="selectionChanging", type="mx.events.IndexChangedEvent")</a>

/**
 *  Dispatched after the selection has changed. 
 */
<a href="Event%28name%3D%26quot%3BselectionChanged%26quot%3B%2C%20type%3D%26quot%3Bmx.events.IndexChangedEvent%26quot%3B%29">Event(name="selectionChanged", type="mx.events.IndexChangedEvent")</a>

/**
 *  Dispatched after the focus has changed.  
 */
<a href="Event%28name%3D%26quot%3BitemFocusChanged%26quot%3B%2C%20type%3D%26quot%3Bmx.events.IndexChangedEvent%26quot%3B%29">Event(name="itemFocusChanged", type="mx.events.IndexChangedEvent")</a>

public class ListBase extends SkinnableDataContainer
{
    //--------------------------------------------------------------------------
    //
    //  Properties
    //
    //--------------------------------------------------------------------------

    /**
     *  The 0-based index of the selected item, or -1 if no item is selected.
     *  Setting the selectedIndex property de-selects the currently selected
     *  item and selects the item at the specified index.
     *
     *  The value of selectedIndex is always pinned between -1 and
     *  (dataProvider.length - 1). If item's at a lower index than selectedIndex are
     *  removed from the component, the selected index is adjusted downward
     *  accordingly. If the selected item is removed, selected index is
     *  set to -1 (if requireSelection = false or there are no remaining items)
     *  or 0 (if requireSelection = true and there is at least one item).
     *
     *  @default -1
     */
    public var selectedIndex:int;

    /**
     *  The item that is currently selected. Setting the selectedItem property
     *  de-selects the currently selected item and selects the specified item.
     *
     *  Setting selectedItem to an item that is not in this component results in
     *  no selection, and selectedItem being set to undefined. If the selected
     *  item is removed, the selected item is set to undefined (if requireSelection
     *  = false or there are no remaining items) or the first item (if
     *  requireSelection = true and there is at least one item).
     *
     *  @default undefined
     */
    public var selectedItem:*;

    /**
     *  Specifies whether an item must always be selected.
     *  If the value is true, the selectedIndex property will always be
     *  set to a value between 0 and (dataProvider.length - 1), or -1 if there are
     *  no items.
     *
     *  @default false
     */
    public var requiresSelection:Boolean = false;

    //--------------------------------------------------------------------------
    //
    //  Methods
    //
    //--------------------------------------------------------------------------

    /**
     *  Called when an item is selected or deselected. 
     *  Subclasses must override this method to display the selection.
     *
     *  @param index The item index that was selected.
     *
     *  @param selected <code>true</code> if the item is selected, 
     *  and <code>false</code> if it is deselected.
     */
    protected function itemSelected(index:int, selected:Boolean):void;
}

}

package spark.components
{

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

class SkinnableDataContainer extends SkinnableContainerBase
{

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

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

    /**
     *  The DataGroup that displays the content of this component. The dataProvider,
     *  layout, itemRenderer, and itemRendererFunction properties of the
     *  component are assigned to this skin part.
     */
    <a href="SkinPart">SkinPart</a>
    public var dataGroup:DataGroup;

    //--------------------------------------------------------------------------
    //
    //  DataGroup property and method proxies
    //
    //  The remainder of the DataContainer API are direct proxies to the
    //  dataGroup SkinPart.
    //
    //  Details for these APIs can be found in the DataGroup class.
    //--------------------------------------------------------------------------

    //--------------------------------------------------------------------------
    //
    //  Properties .. proxies to dataGroup
    //
    //--------------------------------------------------------------------------

    public function get dataProvider():IList;
    public function set dataProvider(value:IList):void;

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

    public function get itemRenderer():IFactory;
    public function set itemRenderer(value:IFactory):void;

    public function get itemRendererFunction():Function;
    public function set itemRendererFunction(value:Function):void;

    public function get typicalItem():Object;
    public function set typicalItem(value:Object):void;

}

}