v4_02 创办自定义项目渲染器 _Web前端

v4_02 创建自定义项目渲染器

v4_02 Creating a custom item renderer 创建自定义项目渲染器

ex4_02

这部分主要讲如何自定义一个项目渲染器

可以根据需要使用任意组件和容器来处理显示界面

有两种试来创建项目渲染器

1.内嵌的渲染器

对于复杂的项目渲染器就很难处理了

2.引用一个外部的类文件的itemRenderer属性

? 可以看打开

import spark.skins.spark.DefaultComplexItemRenderer; 
import spark.skins.spark.DefaultItemRenderer;

这两个默认的renderer看看它们的代码DefaultItemRenderer是as文件,DefaultComplexItemRenderer是mxml

所以说,component它本身就可以是两者中的一个

现在来创建一个component,父类使用spark.components.supportClasses.ItemRenderer

EmployeeItemRenderer.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" 
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:states>
<s:State name="normal"/>
</s:states>
<s:BorderContainer height="100%" width="100%"
top="5" borderWeight="2" 
backgroundColor="#cccccc">
<s:layout>
<s:VerticalLayout horizontalAlign="center" 
verticalAlign="middle"/>
</s:layout>
<s:Label text="{data.firstName} {data.lastName}"/>
<mx:Image source="{data.imageFile}"/> 
</s:BorderContainer>
</s:ItemRenderer>

主应用程序中使用itemRenderer与默认的一样

<s:DataGroup dataProvider="{employeeList}"
itemRenderer="components.EmployeeItemRenderer"> 

<s:layout>
<s:VerticalLayout/>
</s:layout> 

</s:DataGroup>