flex高级用户界面--创建项目项呈示器

1, flex官方api介绍：

显示列中每个项目数据的项呈示器实例的类工厂。您可以指定嵌入式项呈示器、内嵌项呈示器或自定义项呈示器组件作为此属性的值。

默认项呈示器为 DataGridItemRenderer 类，用于将项目数据显示为文本。

此属性可用作数据绑定的源代码。

2，网页文摘：

1.主页面

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx"   
5.                minWidth="955" minHeight="600">  
6.       
7.     <fx:Declarations>  
8.           
9.         <s:ArrayList id="employeeList">  
10.               
11.             <fx:Object firstName="Samuel"  
12.                        lastName="Ang"  
13.                        imageFile="images/sang.jpg"/>  
14.               
15.             <fx:Object firstName="Athena"  
16.                        lastName="Parker"  
17.                        imageFile="images/aparker.jpg"/>  
18.               
19.             <fx:Object firstName="Saul"  
20.                        lastName="Tucker"  
21.                        imageFile="images/stucker.jpg"/>  
22.               
23.             <fx:Object firstName="Alyssa"  
24.                        lastName="Le"  
25.                        imageFile="images/ale.jpg"/>  
26.               
27.         </s:ArrayList>  
28.           
29.     </fx:Declarations>  
30.   
31.       
32.       
33.       
34.     <s:DataGroup dataProvider="{employeeList}"  
35.                  itemRenderer="components.Employee_ItemRenderer">  
36.         <s:layout>  
37.             <s:VerticalLayout paddingLeft="25" paddingTop="25" />  
38.         </s:layout>  
39.     </s:DataGroup>  
40.       
41.   
42.       
43. </s:Application>  

2.项呈示器 

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"   
3.                 xmlns:s="library://ns.adobe.com/flex/spark"   
4.                 xmlns:mx="library://ns.adobe.com/flex/mx"   
5.                 autoDrawBackground="true">  
6.       
7.     <s:states>  
8.         <s:State name="normal"/>  
9.     </s:states>  
10.       
11.     <s:BorderContainer borderWeight="2"  
12.                        backgroundColor="#CCCCCC"  
13.                         height="100%" width="100%">  
14.           
15.         <s:layout>  
16.             <s:VerticalLayout horizontalAlign="center"  
17.                               verticalAlign="middle"  
18.                               paddingTop="15"  
19.                               paddingBottom="15"  
20.                               paddingLeft="10"  
21.                               paddingRight="10"/>  
22.         </s:layout>  
23.           
24.         <s:Label text="{data.firstName} {data.lastName}"/>  
25.         <s:BitmapImage source="{data.imageFile}" />  
26.           
27.     </s:BorderContainer>  
28.       
29. </s:ItemRenderer>  

转载于:https://www.cnblogs.com/thinkBlue/archive/2012/03/06/2382376.html