Flex 外部渲染器（上）

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

将 itemRenderer 提取到一个外部文件有几个优势:

• itemRenderer 可轻松用于多个列表中
• 代码更容易维护
• 可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer

MXML itemRenderer

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

Xml代码

1. < mx:DataGridColumn   headerText = "Title"   dataField = "title" >   
2.         < mx:itemRenderer >   
3.             < mx:Component >   
4.                 < mx:HBox   paddingLeft = "2" >   
5.                     < mx:Script >   
6.                     <![CDATA[  
7.                         override public function set data( value:Object ) : void {  
8.                             super.data = value;  
9.                             var today:Number = (new Date()).time;  
10.                             var pubDate:Number = Date.parse(data.date);  
11.                             if( pubDate > today ) setStyle("backgroundColor",0xff99ff);  
12.                             else setStyle("backgroundColor",0xffffff);  
13.                         }  
14.                     ]]>   
15.   
16.                     </ mx:Script >   
17.                     < mx:Image   source = "{data.image}"   width = "50"   height = "50"   scaleContent = "true"   />   
18.                     < mx:Text   width = "100%"   text = "{data.title}"   />   
19.                 </ mx:HBox >   
20.             </ mx:Component >   
21.   
22.         </ mx:itemRenderer >   
23.     </ mx:DataGridColumn >   

<mx:DataGridColumn headerText="Title" dataField="title">
		<mx:itemRenderer>
			<mx:Component>
				<mx:HBox paddingLeft="2">
					<mx:Script>
					<![CDATA[
						override public function set data( value:Object ) : void {
							super.data = value;
							var today:Number = (new Date()).time;
							var pubDate:Number = Date.parse(data.date);
							if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
							else setStyle("backgroundColor",0xffffff);
						}
					]]>

					</mx:Script>
					<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
					<mx:Text width="100%" text="{data.title}" />
				</mx:HBox>
			</mx:Component>

		</mx:itemRenderer>
	</mx:DataGridColumn>

 

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

1. 如果您使用 Flex Builder, 请新建一个 MXML Component 文件 (我将我的文件命名为 GridColumnSimpleRenderer , 您可以随意命名), 将根标记设置为 HBox 。不必担心大小。
2. 如果您只使用 SDK, 请新建一个 MXML 文件 (将它命名为 GridColumnSimpleRenderer.mxml ), 将根标记设置为 HBox 。

在文件打开时, 复制 <mx:HBox> 与 </mx:HBox> 之间的所有内容, 但不要复制那些标记, 因为文件中已有它们。结果应该如下:

Xml代码

1. <? xml   version = "1.0"   encoding = "utf-8" ?>   
2. < mx:HBox   xmlns:mx = "http://www.adobe.com/2006/mxml"   width = "400"   height = "300" >   
3.     < mx:Script >   
4.     <![CDATA[  
5.         override public function set data( value:Object ) : void {  
6.             super.data = value;  
7.             var today:Number = (new Date()).time;  
8.             var pubDate:Number = Date.parse(data.date);  
9.             if( pubDate > today ) setStyle("backgroundColor",0xff99ff);  
10.             else setStyle("backgroundColor",0xffffff);  
11.         }  
12.     ]]>   
13.   
14.     </ mx:Script >   
15.     < mx:Image   source = "{data.image}"   width = "50"   height = "50"   scaleContent = "true"   />   
16.     < mx:Text   width = "100%"   text = "{data.title}"   />   
17. </ mx:HBox >   

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300">
	<mx:Script>
	<![CDATA[
		override public function set data( value:Object ) : void {
			super.data = value;
			var today:Number = (new Date()).time;
			var pubDate:Number = Date.parse(data.date);
			if( pubDate > today ) setStyle("backgroundColor",0xff99ff);
			else setStyle("backgroundColor",0xffffff);
		}
	]]>

	</mx:Script>
	<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
	<mx:Text width="100%" text="{data.title}" />
</mx:HBox>

 

保存此文件。

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

Xml代码

1. < mx:DataGridColumn   headerText = "Title"   dataField = "title"   
2. itemRenderer = "GridColumnSimpleRenderer" >   

<mx:DataGridColumn headerText="Title" dataField="title"
itemRenderer="GridColumnSimpleRenderer">

 

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

决定 itemRenderer 的宽度和高度

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

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

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

动态更改 itemRenderer

本例覆盖了 set data() 函数以检查数据并设置 itemRenderer 的 backgroundColor 。这十分常见。覆盖 set data() 使您能截取为新行更改数据的时间, 并且您可以作出样式更改。

常见错误为:

• 忘记调用 super.data = value; 。这是致命错误－它会把 itemRenderer 弄乱。
• 忘记重置样式 (如果任何测试失败)。当 pubDate 是将来时, 可能只设置颜色会比较诱人, 但您必须记住, itemRenderer 是循环使用的, 所以 else 语句很有必要。