Flex渲染机制中外部Flex渲染器用法指导-oc渲染器使用方法

你对Flex渲染机制是否熟悉，这里和大家分享一下Flex渲染机制中外部Flex渲染器的概念，相信本文介绍一定会让你有所收获。

Flex渲染机制之外部Flex渲染器

这种Flex渲染器的MXML标记和ActionScript代码与使用该渲染器的列表位于同一文件中。代码与文件中的其余代码内联。您应该还记得我说过,应该将内联渲染器视作单独的类。事实上,Flex编译器提取这些内联代码并为您创建类。内联渲染器的优势在于代码与列表位于同一位置,但是如果渲染器变得复杂时,这又变成了劣势。本文中我将向您展示如何自己创建类。

将Flex渲染器提取到一个外部文件有几个优势:

◆渲染器可轻松用于多个列表中

◆代码更容易维护

◆可以使用FlexBuilder的“设计”视图草拟出最初的渲染器

MXML渲染器

在第1部分中,您看到有一个复杂的渲染器用于DataGrid:

<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Title"dataField="title"> 
<mx:itemRenderer> 
<mx:Component> 
<mx:HBoxpaddingLeftmx:HBoxpaddingLeft="2"> 
<mx:Script> 
<![CDATA[  
overridepublicfunctionsetdata(value:Object):void{  
super.data=value;  
vartoday:Number=(newDate()).time;  
varpubDate:Number=Date.parse(data.date);  
if(pubDate>today)setStyle("backgroundColor",0xff99ff);  
elsesetStyle("backgroundColor",0xffffff);  
}  
]]> 
 
</mx:Script> 
<mx:Imagesourcemx:Imagesource="{data.image}"width="50"height="50" 
scaleContent="true"/> 
<mx:Textwidthmx:Textwidth="100%"text="{data.title}"/> 
</mx:HBox> 
</mx:Component> 
 
</mx:itemRenderer> 
</mx:DataGridColumn>

◆Flex渲染器基于HBox,包含一个Image和一个Text,并且根据项目记录的pubDate字段设置背景色。可以使用以下步骤将同一Flex渲染器编写为一个外部文件:

如果您使用FlexBuilder,请新建一个MXMLComponent文件(我将我的文件命名为GridColumnSimpleRenderer,您可以随意命名),将根标记设置为HBox。不必担心大小。

如果您只使用SDK,请新建一个MXML文件(将它命名为GridColumnSimpleRenderer.mxml),将根标记设置为HBox。
在文件打开时,复制<mx:HBox>与</mx:HBox>之间的所有内容,但不要复制那些标记,因为文件中已有它们。结果应该如下:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:HBoxxmlns:mxmx:HBoxxmlns:mx="http://www.adobe.com/2006/mxml" 
width="400"height="300"> 
<mx:Script> 
<![CDATA[  
overridepublicfunctionsetdata(value:Object):void{  
super.data=value;  
vartoday:Number=(newDate()).time;  
varpubDate:Number=Date.parse(data.date);  
if(pubDate>today)setStyle("backgroundColor",0xff99ff);  
elsesetStyle("backgroundColor",0xffffff);  
}  
]]></mx:Script> 
<mx:Imagesourcemx:Imagesource="{data.image}"width="50"height="50" 
scaleContent="true"/> 
<mx:Textwidthmx:Textwidth="100%"text="{data.title}"/> 
</mx:HBox>

保存此文件。

现在修改DataGridColumn定义,方法是删除内联渲染器并将它替换为以下内容:

<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Title"dataField="title"  
itemRenderer="GridColumnSimpleRenderer">

现在运行这个应用程序。您会大吃一惊。因为行很高。这是因为渲染器上的height="300"。

◆决定Flex渲染器的宽度和高度

List控制始终设置渲染器的宽度。本例中将忽略明确的width="400"。您应当编写自己的渲染器,假设用户更改列或列表宽度是宽度会更改。

高度则是另一回事。如果列表设置了明确的rowHeight,它会将这个高度强加到各行,忽略您对渲染器设置的任何高度。但是,如果您将列表的variableRowHeight属性设置为true,则列表会慎重考虑渲染器的高度。在本例中,高度明确设置为300,所以各行为300像素高。

要修复它,请从渲染器文件中删除明确高度,应用程序即可正确运行。

【编辑推荐】