- 浏览: 1062409 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (695)
- 心情日记 (14)
- AS开发工具 (12)
- 文章转载 (99)
- AIR (5)
- 问题总结 (46)
- SWF格式 (7)
- 测试总结 (10)
- 外文资料 (9)
- 算法技术 (33)
- AS3常用开源库 (43)
- 源码范例 (102)
- FLEX (72)
- FLASH 优化 (33)
- 游戏开发 (49)
- 开发技术 (11)
- 工作应用 (34)
- AS3收集 (140)
- WebBase (0)
- 开发构想 (4)
- 设计模式 (2)
- 框架和框架范例 (19)
- RED5 (3)
- java开发 (3)
- JAVA (1)
- FLASH-3D (23)
- 3D (6)
- 书籍 (10)
- 业界信息资料 (3)
- C# (1)
- JavaScript (12)
- HTML5 (6)
- Flixel (1)
- D5Power RPG网页游戏引擎 (0)
- ColorMatrixFilter - 获得相应颜色的色调 函数 (0)
- Starling (0)
最新评论
-
老顽童203:
字体
水果忍者鼠标跟随特效制作[转载] -
hairball00:
[转] 放出超多的Flash组件源代码 -
he74552775:
flash AS3 RegExp简单功能用法(转) -
hanshuai1232000:
第四点,有利也有弊,等你做了大型的aprg,你就知道了
[转]位图数据内存优化 -
yangfantao:
太感谢
[转] 放出超多的Flash组件源代码
http://nianshi.iteye.com/blog/743826
在本系列的第 1 部分中, 我向您展示了如何创建内联 itemRenderer-这种 itemRenderer 的 MXML 标记和 ActionScript 代码与使用该 itemRenderer 的列表位于同一文件中。代码与文件中的其余代码内联。
您应该还记得我说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。
将 itemRenderer 提取到一个外部文件有几个优势:
•itemRenderer 可轻松用于多个列表中
•代码更容易维护
•可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
第一章说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。
将 itemRenderer 提取到一个外部文件有几个优势:
• itemRenderer 可轻松用于多个列表中
•代码更容易维护
•可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
MXML itemRenderer
在第 1 部分中, 您看到有一个复杂的 itemRenderer 用于 DataGrid:
Java代码
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。
3.在文件打开时, 复制 <mx:HBox> 与 </mx:HBox> 之间的所有内容, 但不要复制那些标记, 因为文件中已有它们。结果应该如下:
Java代码
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>
4.保存此文件。
现在修改 DataGridColumn 定义, 方法是删除内联 itemRenderer 并将它替换为以下内容:
Java代码
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 语句很有必要.
ActionScript itemRenderer
现在, 您将编写另一个 itemRenderer, 这次使用 ActionScript 类。在上一篇文章中, 有一个 TileList 包含这个内联 itemRenderer:
Java代码
1. <mx:itemRenderer>
2. <mx:Component>
3. <mx:HBox verticalAlign="top">
4. <mx:Image source="{data.image}" />
5. <mx:VBox height="115" verticalAlign="top" verticalGap="0">
6. <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
7.
8. <mx:Spacer height="20" />
9. <mx:Label text="{data.author}" />
10. <mx:Label text="Available {data.date}" />
11. <mx:Spacer height="100%" />
12. <mx:HBox width="100%" horizontalAlign="right">
13. <mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
14.
15. <mx:click>
16. <![CDATA[
17. var e:BuyBookEvent = new BuyBookEvent();
18. e.bookData = data;
19. dispatchEvent(e);
20. ]]>
21. </mx:click>
22. </mx:Button>
23.
24. </mx:HBox>
25. </mx:VBox>
26. </mx:HBox>
27. </mx:Component>
28. </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。您需要执行以下步骤:
1.新建一个 ActionScript 类。将它命名为 BookTileRenderer.as 并使它扩展 HBox, 就像内联 itemRenderer 那样。
Java代码
1. package
2. {
3. import flash.events.MouseEvent;
4.
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;
12.
13. public class BookTileRenderer extends HBox
14. {
15. public function BookTileRenderer()
16. {
17. super();
18. }
19.
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();
}
}
}
2.创建成员变量, 用于存放子组件的引用。
Java代码
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;
3.覆盖 createChildren() 函数以创建子组件, 并将它们添加到 HBox。
Java代码
1. override protected function createChildren():void
2. {
3. coverImage = new Image();
4. addChild(coverImage);
5.
6. var innerBox:VBox = new VBox();
7. innerBox.explicitHeight = 115;
8. innerBox.percentWidth = 100;
9. innerBox.setStyle("verticalAlign","top");
10. innerBox.setStyle("verticalGap", 0);
11. addChild(innerBox);
12.
13. titleText = new Text();
14. titleText.setStyle("fontWeight","bold");
15. titleText.percentWidth = 100;
16. innerBox.addChild(titleText);
17.
18. spacer1 = new Spacer();
19. spacer1.explicitHeight = 20;
20. innerBox.addChild(spacer1);
21.
22. authorLabel = new Label();
23. innerBox.addChild(authorLabel);
24.
25. pubdateLabel = new Label();
26. innerBox.addChild(pubdateLabel);
27.
28. spacer2 = new Spacer();
29. spacer2.percentHeight = 100;
30. innerBox.addChild(spacer2);
31.
32. var buttonBox:HBox = new HBox();
33. buttonBox.percentWidth = 100;
34. buttonBox.setStyle("horizontalAlign","right");
35. innerBox.addChild(buttonBox);
36.
37. buyButton = new Button();
38. buyButton.label = "Buy";
39. buyButton.setStyle("fillColors",[0x99ff99,0x99ff99]);
40. buyButton.addEventListener(MouseEvent.CLICK, handleBuyClick);
41. buttonBox.addChild(buyButton);
42. }
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 按钮中包含一个事件侦听器。
4.覆盖 commitProperties() 函数, 并从数据设置用户界面控制。
Java代码
1. override protected function commitProperties():void
2. {
3. super.commitProperties();
4.
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;
}
5.为 Buy 按钮添加单击事件处理函数
Java代码
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);
}
6.将主应用程序中的 TileList 修改为使用 itemRenderer ActionScript 类。只需删除 inlineItemRenderer 并将它替换为标记中的 itemRenderer 属性。
Java代码
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:
Java代码
1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml">
3.
4. <mx:Script>
5. <![CDATA[
6. import mx.controls.dataGridClasses.DataGridListData;
7.
8. [Bindable] private var formattedValue:String;
9.
10. override public function set data(value:Object):void
11. {
12. super.data = value;
13.
14. formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );
15.
16. }
17. ]]>
18. </mx:Script>
19.
20. <mx:CurrencyFormatter precision="2" id="cfmt" />
21.
22. <mx:text>{formattedValue}</mx:text>
23.
24. </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( ... )-它将值格式化为货币
实施 itemRenderer 时, 可使用您喜欢的任何语言。一些人只适用 ActionScript, 当然如果您具有 Flex 和 ActionScript 方面的经验, 这很棒。MXML 也可以快速创建出简单的 itemRenderer。
在本系列的第 1 部分中, 我向您展示了如何创建内联 itemRenderer-这种 itemRenderer 的 MXML 标记和 ActionScript 代码与使用该 itemRenderer 的列表位于同一文件中。代码与文件中的其余代码内联。
您应该还记得我说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。
将 itemRenderer 提取到一个外部文件有几个优势:
•itemRenderer 可轻松用于多个列表中
•代码更容易维护
•可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
第一章说过, 应该将内联 itemRenderer 视作单独的类。事实上, Flex 编译器提取这些内联代码并为您创建类。内联 itemRenderer 的优势在于代码与列表位于同一位置, 但是如果 itemRenderer 变得复杂时, 这又变成了劣势。本文中我将向您展示如何自己创建类。
将 itemRenderer 提取到一个外部文件有几个优势:
• itemRenderer 可轻松用于多个列表中
•代码更容易维护
•可以使用 Flex Builder 的“设计”视图草拟出最初的 itemRenderer
MXML itemRenderer
在第 1 部分中, 您看到有一个复杂的 itemRenderer 用于 DataGrid:
Java代码
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。
3.在文件打开时, 复制 <mx:HBox> 与 </mx:HBox> 之间的所有内容, 但不要复制那些标记, 因为文件中已有它们。结果应该如下:
Java代码
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>
4.保存此文件。
现在修改 DataGridColumn 定义, 方法是删除内联 itemRenderer 并将它替换为以下内容:
Java代码
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 语句很有必要.
ActionScript itemRenderer
现在, 您将编写另一个 itemRenderer, 这次使用 ActionScript 类。在上一篇文章中, 有一个 TileList 包含这个内联 itemRenderer:
Java代码
1. <mx:itemRenderer>
2. <mx:Component>
3. <mx:HBox verticalAlign="top">
4. <mx:Image source="{data.image}" />
5. <mx:VBox height="115" verticalAlign="top" verticalGap="0">
6. <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
7.
8. <mx:Spacer height="20" />
9. <mx:Label text="{data.author}" />
10. <mx:Label text="Available {data.date}" />
11. <mx:Spacer height="100%" />
12. <mx:HBox width="100%" horizontalAlign="right">
13. <mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
14.
15. <mx:click>
16. <![CDATA[
17. var e:BuyBookEvent = new BuyBookEvent();
18. e.bookData = data;
19. dispatchEvent(e);
20. ]]>
21. </mx:click>
22. </mx:Button>
23.
24. </mx:HBox>
25. </mx:VBox>
26. </mx:HBox>
27. </mx:Component>
28. </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。您需要执行以下步骤:
1.新建一个 ActionScript 类。将它命名为 BookTileRenderer.as 并使它扩展 HBox, 就像内联 itemRenderer 那样。
Java代码
1. package
2. {
3. import flash.events.MouseEvent;
4.
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;
12.
13. public class BookTileRenderer extends HBox
14. {
15. public function BookTileRenderer()
16. {
17. super();
18. }
19.
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();
}
}
}
2.创建成员变量, 用于存放子组件的引用。
Java代码
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;
3.覆盖 createChildren() 函数以创建子组件, 并将它们添加到 HBox。
Java代码
1. override protected function createChildren():void
2. {
3. coverImage = new Image();
4. addChild(coverImage);
5.
6. var innerBox:VBox = new VBox();
7. innerBox.explicitHeight = 115;
8. innerBox.percentWidth = 100;
9. innerBox.setStyle("verticalAlign","top");
10. innerBox.setStyle("verticalGap", 0);
11. addChild(innerBox);
12.
13. titleText = new Text();
14. titleText.setStyle("fontWeight","bold");
15. titleText.percentWidth = 100;
16. innerBox.addChild(titleText);
17.
18. spacer1 = new Spacer();
19. spacer1.explicitHeight = 20;
20. innerBox.addChild(spacer1);
21.
22. authorLabel = new Label();
23. innerBox.addChild(authorLabel);
24.
25. pubdateLabel = new Label();
26. innerBox.addChild(pubdateLabel);
27.
28. spacer2 = new Spacer();
29. spacer2.percentHeight = 100;
30. innerBox.addChild(spacer2);
31.
32. var buttonBox:HBox = new HBox();
33. buttonBox.percentWidth = 100;
34. buttonBox.setStyle("horizontalAlign","right");
35. innerBox.addChild(buttonBox);
36.
37. buyButton = new Button();
38. buyButton.label = "Buy";
39. buyButton.setStyle("fillColors",[0x99ff99,0x99ff99]);
40. buyButton.addEventListener(MouseEvent.CLICK, handleBuyClick);
41. buttonBox.addChild(buyButton);
42. }
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 按钮中包含一个事件侦听器。
4.覆盖 commitProperties() 函数, 并从数据设置用户界面控制。
Java代码
1. override protected function commitProperties():void
2. {
3. super.commitProperties();
4.
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;
}
5.为 Buy 按钮添加单击事件处理函数
Java代码
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);
}
6.将主应用程序中的 TileList 修改为使用 itemRenderer ActionScript 类。只需删除 inlineItemRenderer 并将它替换为标记中的 itemRenderer 属性。
Java代码
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:
Java代码
1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Text xmlns:mx="http://www.adobe.com/2006/mxml">
3.
4. <mx:Script>
5. <![CDATA[
6. import mx.controls.dataGridClasses.DataGridListData;
7.
8. [Bindable] private var formattedValue:String;
9.
10. override public function set data(value:Object):void
11. {
12. super.data = value;
13.
14. formattedValue = cfmt.format( Number(data[(listData as DataGridListData).dataField]) );
15.
16. }
17. ]]>
18. </mx:Script>
19.
20. <mx:CurrencyFormatter precision="2" id="cfmt" />
21.
22. <mx:text>{formattedValue}</mx:text>
23.
24. </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( ... )-它将值格式化为货币
实施 itemRenderer 时, 可使用您喜欢的任何语言。一些人只适用 ActionScript, 当然如果您具有 Flex 和 ActionScript 方面的经验, 这很棒。MXML 也可以快速创建出简单的 itemRenderer。
发表评论
-
Flex数据绑定及其使用频繁的几种情况
2011-10-20 03:39 1400http://developer.51cto.com/art/ ... -
揭开Flex正则表达式的神秘面纱
2011-10-20 03:38 1174http://developer.51cto.com/art/ ... -
Flex模块化开发优势及技巧解析
2011-10-20 03:38 1695http://developer.51cto.com/art/ ... -
Flex模块化应用程序开发
2011-10-20 03:38 1124http://developer.51cto.com/art/ ... -
[转]Flex模块化的目的及其步骤
2011-10-20 03:35 1157http://developer.51cto.co ... -
翻译: Flash文本引擎, 第三部分: 布局
2011-10-20 02:36 0http://www.riade ... -
翻译: Flash文本引擎, 第二部分: 交互
2011-10-20 02:34 0http://www.riadev.com/flex-thre ... -
翻译: Flash文本引擎, 第一部分: 概述
2011-10-20 02:33 0http://www.riadev.com/flex-thre ... -
[转]flex操作XML,强力总结帖
2011-08-16 01:10 1006http://qiqishou.iteye.com ... -
[转]用ActionScript 开发高级可视化组件
2011-08-14 04:37 0用ActionScript 开发高级可视化组件 -
[转]AIR2.0 NativeProcess in Flash Builder 4.0
2011-08-07 23:37 1420AIR2.0 NativeProcess in Fla ... -
[转] Actionscript项目嵌入图片(设置九宫格缩放)
2011-07-27 02:04 2323我们知道在Flex项目中,嵌入外部图片,可以使用 [E ... -
[转]NumericStepper添加百分号
2011-07-26 23:32 1096请问 NumericStepper组件中添加百分号 ... -
[新闻资讯] [Flash/Flex] 走自己的路:重写AIR移动应用程序中的BACK按键
2011-06-15 13:44 1196http://bbs.9ria.com/viewthread. ... -
[转]关于Spark List控件和Spark DataGrid控件的提示
2011-06-02 05:23 1401http://bbs.9ria.com/viewthread. ... -
flex 3 能使用openwithDefaultApplication吗
2011-06-02 05:05 0最近用到了 使用air 来开启外部的程序。 我知道flash ... -
[Flex]Flex编程注意之Flex Complier参数
2011-05-19 19:56 1046http://fykyx521.iteye.com/blog/ ... -
Aarry和AarryCollection
2011-05-18 00:06 1182在AS3里面,数组里面可以存储字符串、数字、布尔值、或引用的类 ... -
[Flash/Flex] 给一个TitleWindow添加按钮的方法
2011-05-07 01:38 1663资讯类型: 翻译 来源页面: http://userflex. ... -
[转][Android] Android桌面应用程序-交通灯游戏源码
2011-04-25 02:46 0http://bbs.9ria.com/viewthread. ...
相关推荐
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
flex itemRenderer 渲染机制的概念和使用
理解_Flex_itemRenderer 理解_Flex_itemRenderer 理解_Flex_itemRenderer
详细介绍Flex的项目呈现器的各种初级用法以及高级用法,相当实用。
flex中渲染器简介 本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。
关于flex的itemRenderer的介绍,还算比较详细。
NULL 博文链接:https://baiyejianxin.iteye.com/blog/823229
解决Flex内联itemRenderer的例子
提供: 内渲染器的使用方法。 通过2个List的 界面 自己看效果理解。
Flex项呈示器自定义及使用实例,展示用户信息,包括头像及等级信息。与博客Flex之旅--项呈示器ItemRenderer对应
通过两种方法继承List组件的IconItemRenderer,实现在每个item项中添加组件,如button等
用FLEX4做的项呈现器,仿雅虎聊天界面。 需要的字段为userId、nikeName、sex…… 你可以自行添加 声明,次呈现器只做模版使用。
NULL 博文链接:https://hcty31.iteye.com/blog/1190932
itemRenderer里面的内容 获取技巧。
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
本文为大家详细介绍下Flex4如何使用itemRenderer 为Tree加线,感兴趣的朋友可以参考下
NULL 博文链接:https://liugang-ok.iteye.com/blog/1135551
Flex中嵌入Google地图 - 菩提树 - ITeye技术网站 分享:Flex builder3执行Debug需要安装的Flash Player Debugger环境 百度空间_应用平台 flex4 的DataGrid里面加一列CheckBox并实现数据交互的试验 - 暖阳下的猫的...
<![CDATA[ import mx.controls.CheckBox; import mx.controls.Alert; ... Alert.show("行的数据分别是:"+o.idx+"/"+o.... </mx:itemRenderer> </mx:DataGridColumn> </mx:WindowedApplication>
Flex 中如何根据不同行的内容, 动态调整每行的颜色。完整代码