Flex 外部渲染器（下）

最新推荐文章于 2025-06-25 15:24:29 发布

原创最新推荐文章于 2025-06-25 15:24:29 发布 · 117 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Flex #ActionScript #XML #Flash #Adobe

Flex 专栏收录该内容

197 篇文章

订阅专栏

ActionScript itemRenderer

现在, 您将编写另一个 itemRenderer, 这次使用 ActionScript 类。在上一篇文章中, 有一个 TileList 包含这个内联 itemRenderer:

Xml代码

< 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 >

<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 那样。
Xml代码
1. package
2. {
3. import flash.events.MouseEvent;
5. import mx.containers.HBox;
6. import mx.containers.VBox;
7. import mx.controls.Button;
8. import mx.controls.Image;
9. import mx.controls.Label;
10. import mx.controls.Spacer;
11. import mx.controls.Text;
13. public class BookTileRenderer extends HBox
14. {
15. public function BookTileRenderer()
16. {
17. super();
18. }
20. }
21. }
```
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();
		}
		
	}
}
```
创建成员变量, 用于存放子组件的引用。
Xml代码
1. private var coverImage:Image;
2. private var titleText:Text;
3. private var spacer1:Spacer;
4. private var authorLabel:Label;
5. private var pubdateLabel:Label;
6. private var spacer2:Spacer;
7. private var buyButton:Button;
```
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。

Xml代码

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);
}

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() 函数, 并从数据设置用户界面控制。
Xml代码
1. override protected function commitProperties():void
2. {
3. super.commitProperties();
5. coverImage.source = data .image;
6. titleText.text = data .title;
7. authorLabel.text = data .author;
8. pubdateLabel.text = data .date;
9. }
```
	override protected function commitProperties():void
		{
			super.commitProperties();
			
			coverImage.source = data.image;
			titleText.text = data.title;
			authorLabel.text = data.author;
			pubdateLabel.text = data.date;
		}
```
为 Buy 按钮添加单击事件处理函数。
Xml代码
1. private function handleBuyClick( event:MouseEvent ) : void
2. {
3. var e:BuyBookEvent = new BuyBookEvent();
4. e.bookData = data ;
5. dispatchEvent(e);
6. }
```
private function handleBuyClick( event:MouseEvent ) : void
		{
			var e:BuyBookEvent = new BuyBookEvent();
			e.bookData = data;
			dispatchEvent(e);
		}
```
将主应用程序中的 TileList 修改为使用 itemRenderer ActionScript 类。只需删除 inlineItemRenderer 并将它替换为标记中的 itemRenderer 属性。
Xml代码
1. < mx:TileList id = "mylist" x = "29" y = "542" width = "694" itemRenderer = "BookTileRenderer"
2. dataProvider = "{testData.book}" height = "232" columnWidth = "275" rowHeight = "135" >
```
<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代码

<? 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 >

<?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( ... ) －它将值格式化为货币。