Mio Project!

(Project)/src/IconItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
								  xmlns:s="library://ns.adobe.com/flex/spark" 
								  applicationDPI="160">
	
	<fx:Style source="./assets/styles/style.css" />
	
	<s:ViewNavigator label="HomeView" width="100%" height="100%" firstView="views.HomeView" />
	<s:ViewNavigator label="MXMLView" width="100%" height="100%" firstView="views.MXMLView" />
	<s:ViewNavigator label="ASView" width="100%" height="100%" firstView="views.ASView" />
	
</s:TabbedViewNavigatorApplication>

(Project)/src/views/HomeView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="HomeView">
	
	<s:Label text="　通常のカスタムアイテムレンダラー(MXMLで記述)によるリスト表示のパフォーマンスと、モバイルリスト用に最適化されたアイテムレンダラー(ASで記述)によるリスト表示のパフォーマンスの比較" 
			 width="100%" paddingTop="20" paddingRight="20" paddingLeft="20" fontFamily="uzura_cff" />
	
</s:View>

(Project)/src/assets/styles/style.css

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";

@font-face {
	src: url("./assets/fonts/uzura.ttf");
	fontFamily: uzura_cff;
	fontStyle: normal;
	fontWeight: normal;
	embedAsCFF: true;
	advancedAntiAliasing: true;
}

@font-face {
	src: url("./assets/fonts/uzura.ttf");
	fontFamily: うずらフォント;
	fontStyle: normal;
	fontWeight: normal;
	embedAsCFF: false;
	advancedAntiAliasing: true;
}

* {
	fontFamily: うずらフォント;
}

(Project)/src/views/MXMLView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="MXMLView">
	
	<fx:Declarations>
		<s:ArrayCollection id="sampleData">
			<fx:Object name="鹿目まどか" 
					   description="「もしも――もしも、だよ？魔法でどんな願い事でも叶えてもらえる、って言われたら、どうする？」" 
					   image="twitter_madoka.jpg" />
			<!-- ...(以下、このようなデータが20項目連続。ここでは省略)... -->
		</s:ArrayCollection>
	</fx:Declarations>
	
	<s:List id="sparkCustomItemRendereredList" 
			dataProvider="{sampleData}" 
			labelField="name" 
			width="100%" 
			height="100%" 
			itemRenderer="renderers.customItemRenderer" />
	
</s:View>

(Project)/src/renderers/CustomItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark"
				opaqueBackground="0xFFFFFF" 
				cacheAsBitmap="true">
	
	<s:layout>
		<s:HorizontalLayout paddingTop="8" 
							paddingBottom="8" 
							paddingLeft="8" 
							paddingRight="8" 
							gap="8" 
							horizontalAlign="center" 
							verticalAlign="middle"/>
	</s:layout>
	
	<s:BitmapImage id="iconDisplay" 
				   smooth="false" 
				   source="./assets/images/{data.image}" 
				   width="128" 
				   height="128" />
	
	<s:VGroup gap="6" horizontalAlign="left">
		<s:Label id="labelDisplay" 
				 width="{this.width - 176}" 
				 text="{data.name}"
				 fontFamily="uzura_cff" />
		<s:Label id="messageDisplay" 
				 width="{this.width - 176}" 
				 fontSize="14"
				 text="{data.description}" 
				 fontFamily="uzura_cff" />
	</s:VGroup>
	
	<s:BitmapImage id="decoratorDisplay" 
			 	   smooth="false" 
				   source="@Embed('./assets/images/arrow.png')" 
				   width="16" 
				   height="16" />
	
</s:ItemRenderer>

(Project)/src/views/ASView.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="ASView">
	
	<fx:Declarations>
		<s:ArrayCollection id="sampleData">
			<fx:Object name="鹿目まどか" 
					   description="「もしも――もしも、だよ？魔法でどんな願い事でも叶えてもらえる、って言われたら、どうする？」" 
					   image="./assets/images/twitter_madoka.jpg" />
			<!-- ...(以下、このようなデータが20項目連続。ここでは省略)
		</s:ArrayCollection>
	</fx:Declarations>
	
	<s:List id="sparkCustomItemRendereredList" 
			dataProvider="{sampleData}" 
			labelField="name" 
			width="100%" 
			height="100%" 
			itemRenderer="renderers.IconItemRenderer" />
	
</s:View>

(Project)/src/renderers/IconItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark" 
					labelField="name" 
					messageField="description" 
					iconField="image" 
					iconWidth="128" 
					iconHeight="128" 
					iconDelay="100" 
					decorator="@Embed('./assets/images/arrow.png')" >
</s:IconItemRenderer>