SkinnableItemRenderer Usage

The SkinnableItemRenderer is used exactly like s:ItemRenderer.  The difference being SkinnableItemRenderer
allows you to use SkinPart metadata in your ItemRenderer definition.  As a result of being able to skin the
item renderer, the autoDrawBackground capabilities are lost as the super class is no longer Group/GroupBase.  
This is the only lost functionality in SkinnableItemRenderer.  The example Flex project is in the repository, 
which includes the examples below.

Example Application:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
					   xmlns:s="library://ns.adobe.com/flex/spark" 
					   xmlns:mx="library://ns.adobe.com/flex/mx">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:List itemRenderer="itemrenderer.CustomItemRenderer">
		<s:dataProvider>
			<s:ArrayCollection>
				<fx:Array>
					<fx:String>One</fx:String>
					<fx:String>Two</fx:String>
					<fx:String>Three</fx:String>
				</fx:Array>
			</s:ArrayCollection>
		</s:dataProvider>
	</s:List>
	
</s:WindowedApplication>


CustomItemRenderer.as
package itemrenderer
{
	import almerblank.flex.spark.components.SkinnableItemRenderer;
	
	import mx.events.FlexEvent;
	
	import spark.components.Button;
	import spark.components.Label;
	
	public class CustomItemRenderer extends SkinnableItemRenderer
	{
		[SkinPart(required="true")]
		public var myLabel:Label;
		
		[SkinPart(required="true")]
		public var myButton:Button;
		
		public function CustomItemRenderer()
		{
			super();
			
			setStyle("skinClass", CustomItemRendererSkin);
			addEventListener(FlexEvent.DATA_CHANGE,_handleDataChange,false,0,true);
		}

		private function _handleDataChange(event:FlexEvent):void
		{
			if (data)
			{
				var label:String = data as String;
				myLabel.text = label;
				myButton.label = label + "'s button";
			}
		}
	}
}

CustomItemRendererSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<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/mx">
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("itemrenderer.CustomItemRenderer")]
	</fx:Metadata>
	
	<!-- SkinParts
	name=myLabel, type=spark.components.Label, required=true
	name=myButton, type=spark.components.Button, required=true
	-->
	
	<s:layout>
		<s:VerticalLayout />
	</s:layout>
	
	<s:Label id="myLabel" />
	<s:Button id="myButton" />
	
</s:Skin>