v4_01 在项目渲染器中显示数据

v4_01 Representing data in default item renderers 在项目渲染器中显示数据

 

这部分主要讲

DataGroup的相关知识

它是基于一系统已定义的数据来展示其它内容

以及如何在DataGroup容器中使用两个预置的Spark项目渲染器来为数据集中的每一条记录定义统一的,可重用的外观

 

 

 

两个默认的项目渲染器

DefaultItemRenderer:显示简单的数据类型,如字符串,数据

DefaultComplexItemRenderer:用于显示UI组件

 

1.定义一个list数据列表

<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Declarations>
<s:ArrayList id="employeeList">
<fx:String>Andrew Brilliam</fx:String>
<fx:String>Ben Crater</fx:String>
<fx:String>David Avenon</fx:String>
<fx:String>Annette Kotter</fx:String>
<fx:String>Brian Minnows</fx:String>
<fx:String>Barry Kramson</fx:String>
</s:ArrayList>
</fx:Declarations> 

  

定义一个DataGroup

从这部分开始,又要注意页面细节的问题了,DataGroup中dataProvider是数据的提供者

itemRenderer是必须的,它就是使用的项目渲染器,如果不加上这个属性,会提示错误

另外,DataGroup是一个有layout属性的组件,layout可以控制显示的布局

同时,也可以看到,主应用程序中也有layout

另外,默认的layout是以xy坐标来定位的,所以DataGroup中不能使用默认的

<s:DataGroup dataProvider="{employeeList}"
itemRenderer="spark.skins.spark.DefaultItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup> 

  

页面效果如下

 

2.改变数据定义

<!-- Declarations ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Declarations>
<s:ArrayList id="employeeList">
<fx:String>Andrew Brilliam</fx:String>
<mx:Image source="images/abrilliam.jpg"/>
<fx:String>Ben Crater</fx:String>
<mx:Image source="images/bcrater.jpg"/>
<fx:String>David Avenon</fx:String>
<mx:Image source="images/davenon.jpg"/>
<fx:String>Annette Kotter</fx:String>
<mx:Image source="images/akotter.jpg"/>
<fx:String>Brian Minnows</fx:String>
<mx:Image source="images/bminnows.jpg"/>
<fx:String>Barry Kramson</fx:String>
<mx:Image source="images/bkramson.jpg"/>
</s:ArrayList>
</fx:Declarations> 

  

改变项目渲染器

<s:DataGroup dataProvider="{employeeList}"
itemRenderer="spark.skins.spark.DefaultComplexItemRenderer">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>

 

 

它只显示图片,不显示字符串了

 

3.为了能同时使用两种项目渲染器来显示字符串和图片

创建一个function

<!--WizRtf2Html Charset=0 -->

<!-- Script ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<fx:Script>
<![CDATA[
import spark.skins.spark.DefaultComplexItemRenderer;
import spark.skins.spark.DefaultItemRenderer;
private function rendererFunction(item:Object):ClassFactory
{
if(item is String)
{
return new ClassFactory(DefaultItemRenderer)
}
else
{
return new ClassFactory(DefaultComplexItemRenderer)
}
}
]]>
</fx:Script> 
 

 

在DataGroup 中使用itemRendererFunction 来引用 这个function

<s:DataGroup dataProvider="{employeeList}"
itemRendererFunction="rendererFunction">
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:DataGroup>