- 浏览: 407812 次
- 性别:
- 来自: 济南
最新评论
-
nianshi:
slideDown就是show的滑动效果版本, slideUp ...
Jquery零碎代码收藏 -
nianshi:
以后编写JS代码,少写<div onclick=&quo ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素相对父元素的偏移var p = $("p ...
Jquery零碎代码收藏 -
nianshi:
获取匹配元素在当前窗口的相对偏移var p = $(" ...
Jquery零碎代码收藏 -
wuchu:
谢谢
Flex 读取XML配置文件总结
在本系列的第 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-02-24 10:18 1262Flex读取XML: <mx:HTTPServic ... -
flex实现滑动显示隐藏效果
2010-12-30 15:30 1547鼠标划过的时候显示菜单栏 ,鼠标移开后隐藏菜单栏。比较常用 ... -
flex DataTimePicker时间控件
2010-12-27 11:54 1293两种DatatimePicker: 1.Datatim ... -
ActionScript 生成伪Guid
2010-12-24 09:52 1169在一个Flash制作的图片上传程序中(使用了FileRefer ... -
Flex中Image组件怎么才能非等比例拉伸图片
2010-12-23 15:49 1482Image组件怎么才能非等比例拉伸图片 设 ... -
Flex中Accordion用法
2010-12-23 11:45 3053<? xml version = & ... -
Flex(替代session过期)实现用户长时间不操作要求重新登录的处理
2010-12-23 11:08 1477flex(替代session过期)用户长时间不操作要求重新登录 ... -
ActionScript 3.0 Socket编程
2010-12-23 09:56 1138在使用ActionScript3.0进行编程 ... -
12个简单易用的flex函数
2010-12-21 10:10 11021.拷贝内容到剪贴板: ... -
Flex自定义控件——Pagebar分页控件
2010-12-20 09:41 5193开发时经常遇到用一个DataGrid分页显示 ... -
Flex资源,很全,很牛!
2010-12-20 09:30 14331、as3ebaylib http://code ... -
Flex 窗体 最大化、最小化实例
2010-12-20 09:28 2682---导入flexMdi.swc (http ... -
在Flex中复制文字到操作系统的剪贴板
2010-12-15 11:18 1206这个实例演示了怎么样使用System. ... -
Flex让Slider控件拖动时显示Tooltip
2010-12-14 16:10 1875格式化与自定义Slider中显示的Tooltip ... -
Flex给Alert加个Icon
2010-12-14 16:05 1259给Alert加个Icon 很简单只要先 Embed 一 ... -
在Flex中用Validator验证数字、字符串、Email、电话号码等
2010-12-14 09:54 4275mx.validators ... -
Flex中使用FileReference类下载文件
2010-12-14 09:47 1766下面的实例演示了Flex中的 File ... -
Flex使用ArrayCollection的filterFunction属性过滤DataGrid
2010-12-14 09:42 1770下面的实例演示了在Flex中怎样使用 ... -
Flex 树形控件(Tree )的使用
2010-12-13 16:24 3440一、树形控件的常用属性 1、dragMoveE ... -
FLEX3中应用CSS完全详解手册(下)
2010-12-13 11:40 847myTabs中的设置 cornerRadiusTab ...
相关推荐
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如何使用itemRenderer 为Tree加线,感兴趣的朋友可以参考下
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
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 中如何根据不同行的内容, 动态调整每行的颜色。完整代码