Flex渲染机制中外部Flex渲染器怎么用

这篇文章主要为大家展示了“Flex渲染机制中外部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像素高。

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

以上是“Flex渲染机制中外部Flex渲染器怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！