在本系列的第 1 部分中, 我向您展示了如何创建内联 itemRenderer-这种 itemRenderer 的 MXML 标记和 ActionScript 代码与使用该 itemRenderer 的列表位于同一文件中。代码与文件中的其余代码内联。
您应该还记得我说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。 将 itemRenderer 提取到一个外部文件有几个优势: itemRenderer 可轻松用于多个列表中 <mx:DataGridColumn headerText="Title" dataField="title"> </mx:Script> </mx:itemRenderer>
如果您使用 Flex Builder, 请新建一个 MXML Component 文件 (我将我的文件命名为 GridColumnSimpleRenderer, 您可以随意命名), 将根标记设置为 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> 保存此文件。 <mx:DataGridColumn headerText="Title" dataField="title"
itemRenderer="GridColumnSimpleRenderer"> 现在运行这个应用程序。您会大吃一惊。因为行很高。这是因为 itemRenderer 上的 height="300"。 高度则是另一回事。如果列表设置了明确的 rowHeight, 它会将这个高度强加到各行, 忽略您对 itemRenderer 设置的任何高度。但是, 如果您将列表的 variableRowHeight 属性设置为 true, 则列表会慎重考虑 itemRenderer 的高度。在本例中, 高度明确设置为 300, 所以各行为 300 像素高。 要修复它, 请从 itemRenderer 文件中删除明确高度, 应用程序即可正确运行。 动态更改 itemRenderer 常见错误为: 忘记调用 super.data = value;。这是致命错误-它会把 itemRenderer 弄乱。 <mx:itemRenderer> <mx:Spacer height="20" /> <mx:click> </mx:HBox> 您将把它转变为一个 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; override protected function createChildren():void 我准备通过这一代码显示父子关系。同时, 确保在 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 <?xml version="1.0" encoding="utf-8"?> <mx:Script> } 这个 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 |
|