理解Flex itemRenderer(2)--外部渲染器
在本系列的第 1 部分中, 我向您展示了如何创建内联 itemRenderer－这种 itemRenderer 的 MXML 标记和 ActionScript 代码与使用该 itemRenderer 的列表位于同一文件中。代码与文件中的其余代码内联。
您应该还记得我说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。
将 itemRenderer 提取到一个外部文件有几个优势:
- itemRenderer 可轻松用于多个列表中
- 代码更容易维护
- 可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
MXML itemRenderer
在第 1 部分中, 您看到有一个复杂的 itemRenderer 用于 DataGrid:
<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 编写为一个外部文件:
- 如果您使用 Flex Builder, 请新建一个 MXML Component 文件 (我将我的文件命名为 GridColumnSimpleRenderer, 您可以随意命名), 将根标记设置为
HBox。不必担心大小。 - 如果您只使用 SDK, 请新建一个 MXML 文件 (将它命名为 GridColumnSimpleRenderer.mxml), 将根标记设置为
HBox。 -
在文件打开时, 复制
<mx:HBox>与</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 并将它替换为以下内容:
<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语句很有必要。
ActionScript itemRenderer
现在, 您将编写另一个 itemRenderer, 这次使用 ActionScript 类。在上一篇文章中, 有一个 TileList 包含这个内联 itemRenderer:
<mx:itemRenderer>
<mx:Component>
<mx:HBox verticalAlign="top">
<mx:Image source="{data.image}" />
<mx:VBox height="115" verticalAlign="top" verticalGap="0">
<mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
<mx:Spacer height="20" />
<mx:Label text="{data.author}" />
<mx:Label text="Available {data.date}" />
<mx:Spacer height="100%" />
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
<mx:click>
<![CDATA[
var e:BuyBookEvent = new BuyBookEvent();
e.bookData = data;
dispatchEvent(e);
]]>
</mx:click>
</mx:Button>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
您将把它转变为一个 ActionScript 外部 itemRenderer。您需要执行以下步骤:
-
新建一个 ActionScript 类。将它命名为 BookTileRenderer.as 并使它扩展 HBox, 就像内联 itemRenderer 那样。
package { import flash.events.MouseEvent; import mx.containers.HBox; import mx.containers.VBox; import mx.controls.Button; import mx.controls.Image; import mx.controls.Label; import mx.controls.Spacer; import mx.controls.Text; public class BookTileRenderer extends HBox { public function BookTileRenderer() { super(); } } } -
创建成员变量, 用于存放子组件的引用。
private var coverImage:Image; private var titleText:Text; private var spacer1:Spacer; private var authorLabel:Label; private var pubdateLabel:Label; private var spacer2:Spacer; private var buyButton:Button;
-
覆盖
createChildren()函数以创建子组件, 并将它们添加到 HBox。override protected function createChildren():void { coverImage = new Image(); addChild(coverImage); var innerBox:VBox = new VBox(); innerBox.explicitHeight = 115; innerBox.percentWidth = 100; innerBox.setStyle("verticalAlign","top"); innerBox.setStyle("verticalGap", 0); addChild(innerBox); titleText = new Text(); titleText.setStyle("fontWeight","bold"); titleText.percentWidth = 100; innerBox.addChild(titleText); spacer1 = new Spacer(); spacer1.explicitHeight = 20; innerBox.addChild(spacer1); authorLabel = new Label(); innerBox.addChild(authorLabel); pubdateLabel = new Label(); innerBox.addChild(pubdateLabel); spacer2 = new Spacer(); spacer2.percentHeight = 100; innerBox.addChild(spacer2); var buttonBox:HBox = new HBox(); buttonBox.percentWidth = 100; buttonBox.setStyle("horizontalAlign","right"); innerBox.addChild(buttonBox); buyButton = new Button(); buyButton.label = "Buy"; buyButton.setStyle("fillColors",[0x99ff99,0x99ff99]); buyButton.addEventListener(MouseEvent.CLICK, handleBuyClick); buttonBox.addChild(buyButton); }
我准备通过这一代码显示父子关系。同时, 确保在 Buy 按钮中包含一个事件侦听器。
-
覆盖
commitProperties()函数, 并从数据设置用户界面控制。override protected function commitProperties():void { super.commitProperties(); coverImage.source = data.image; titleText.text = data.title; authorLabel.text = data.author; pubdateLabel.text = data.date; }
-
为 Buy 按钮添加单击事件处理函数。
private function handleBuyClick( event:MouseEvent ) : void { var e:BuyBookEvent = new BuyBookEvent(); e.bookData = data; dispatchEvent(e); }
-
将主应用程序中的 TileList 修改为使用 itemRenderer ActionScript 类。只需删除
inlineItemRenderer并将它替换为标记中的itemRenderer属性。<mx:TileList id="mylist" x="29" y="542" width="694" itemRenderer="BookTileRenderer" dataProvider="{testData.book}" height="232" columnWidth="275" rowHeight="135" >
如果要使用一个现有容器类, 如 HBox, 我不会使用 ActionScript 这样做。您会发现它比使用 MXML 文件复杂, 并且老实说, 性能方面几乎没有任何优势。
可重用的 itemRenderer
以下是一个 itemRenderer 示例, 它使用 CurrencyFormatter 显示一个数值。我称之为 PriceFormatter:
<?xml version="1.0" encoding="utf-8"?> <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.controls.dataGridClasses.DataGridListData; [Bindable] private var formattedValue:String; override public function set data(value:Object):void { super.data = value; formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) ); } ]]> </mx:Script> <mx:CurrencyFormatter precision="2" id="cfmt" /> <mx:text>{formattedValue}</mx:text> </mx:Text>
这个 itemRenderer 的关键部分以红色标出, 设置可绑定变量 formattedValue。首先, 您会发现 <mx:CurrentFormatter> 使用 id cfmt 定义为 MXML 标记 (如果您愿意, 也可以使用 ActionScript 这样做)。在上例中, formattedValue 设置为 CurrentFormatter 的 format() 函数的调用结果。
此函数将 Number 作为其参数类型, 所以值被转换为 Number－这是因为列表的 dataProvider 是 XML 并且 XML 中的所有内容是文本; 如果为数据使用 Object 并且您有实际数值, 执行 Number 转变将是无害的。
如您所知, 数据是存放 itemRenderer 所显示项目的属性。使用 [ ] 记号是访问数据项目字段的另一种方法。例如, data['price'] 是价格列。但是为了使这个 itemRenderer 可重用, 您不能为特定字段编码, 所以需要一种更普通的方法。
此时, listData 登台亮相。实施 IDropInListItemRenderer 接口的所有 Flex 组件都有一个 listData 属性。
注意: Text、Label、Button、CheckBox 等大多数控制都实施 IDropInListItemRenderer。HBox、Canvas 等大多数容器不实施此接口。如果要在扩展 Container 的 itemRenderer 中使用 listData, 您必须自己实施 IDropInListItemRenderer; 我将在下一篇文章中讨论这个问题。
除了其他内容, 提供给 itemRenderer 的 listData 还包含 rowIndex 和控制, 该控制拥有 itemRenderer－DataGrid、List 或 TileList。将 itemRenderer 用于 DataGrid 时, listData 实际上是一个 DataGridListData 对象－它包含 columnIndex 以及与 DataGridColumn 关联的 dataField。以下是上述语句的明细, 从内部开始:
listData as DataGridListData－它将 listData 转换为 DataGridListData 对象, 使您能访问它的 dataField.dataField－该字段用于渲染的列。它使这个 itemRenderer 变得一般。可以将这个 itemRenderer 用于多个列。在本例中, dataField 是“price”。data[ ... ]－它访问项目中特定字段的数据。在本例中, 它是价格列。Number( ... )－它将值转换为 Number, 因为 format() 函数需要一个 Number 参数。cfmt.format( ... )－它将值格式化为货币。
后续工作
实施 itemRenderer 时, 可使用您喜欢的任何语言。一些人只适用 ActionScript, 当然如果您具有 Flex 和 ActionScript 方面的经验, 这很棒。MXML 也可以快速创建出简单的 itemRenderer。
