flex学习日记（三）使用“项呈示器”ItemRenderer

本文链接：https://blog.csdn.net/raphero/article/details/7056267

1.主页面

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   minWidth="955" minHeight="600">
	
	<fx:Declarations>
		
		<s:ArrayList id="employeeList">
			
			<fx:Object firstName="Samuel"
					   lastName="Ang"
					   imageFile="images/sang.jpg"/>
			
			<fx:Object firstName="Athena"
					   lastName="Parker"
					   imageFile="images/aparker.jpg"/>
			
			<fx:Object firstName="Saul"
					   lastName="Tucker"
					   imageFile="images/stucker.jpg"/>
			
			<fx:Object firstName="Alyssa"
					   lastName="Le"
					   imageFile="images/ale.jpg"/>
			
		</s:ArrayList>
		
	</fx:Declarations>

	
	
	
	<s:DataGroup dataProvider="{employeeList}"
				 itemRenderer="components.Employee_ItemRenderer">
		<s:layout>
			<s:VerticalLayout paddingLeft="25" paddingTop="25" />
		</s:layout>
	</s:DataGroup>
	

	
</s:Application>

2.项呈示器

<?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" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="true">
	
	<s:states>
		<s:State name="normal"/>
	</s:states>
	
	<s:BorderContainer borderWeight="2"
					   backgroundColor="#CCCCCC"
					    height="100%" width="100%">
		
		<s:layout>
			<s:VerticalLayout horizontalAlign="center"
							  verticalAlign="middle"
							  paddingTop="15"
							  paddingBottom="15"
							  paddingLeft="10"
							  paddingRight="10"/>
		</s:layout>
		
		<s:Label text="{data.firstName} {data.lastName}"/>
		<s:BitmapImage source="{data.imageFile}" />
		
	</s:BorderContainer>
	
</s:ItemRenderer>