- 浏览: 7339248 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (1546)
- 企业中间件 (236)
- 企业应用面临的问题 (236)
- 小布Oracle学习笔记汇总 (36)
- Spring 开发应用 (54)
- IBatis开发应用 (16)
- Oracle基础学习 (23)
- struts2.0 (41)
- JVM&ClassLoader&GC (16)
- JQuery的开发应用 (17)
- WebService的开发应用 (21)
- Java&Socket (44)
- 开源组件的应用 (254)
- 常用Javascript的开发应用 (28)
- J2EE开发技术指南 (163)
- EJB3开发应用 (11)
- GIS&Mobile&MAP (36)
- SWT-GEF-RCP (52)
- 算法&数据结构 (6)
- Apache开源组件研究 (62)
- Hibernate 学习应用 (57)
- java并发编程 (59)
- MySQL&Mongodb&MS/SQL (15)
- Oracle数据库实验室 (55)
- 搜索引擎的开发应用 (34)
- 软件工程师笔试经典 (14)
- 其他杂项 (10)
- AndroidPn& MQTT&C2DM&推技术 (29)
- ActiveMQ学习和研究 (38)
- Google技术应用开发和API分析 (11)
- flex的学习总结 (59)
- 项目中一点总结 (20)
- java疑惑 java面向对象编程 (28)
- Android 开发学习 (133)
- linux和UNIX的总结 (37)
- Titanium学习总结 (20)
- JQueryMobile学习总结 (34)
- Phonegap学习总结 (32)
- HTML5学习总结 (41)
- JeeCMS研究和理解分析 (9)
最新评论
-
lgh1992314:
[u][i][b][flash=200,200][url][i ...
看看mybatis 源代码 -
尼古拉斯.fwp:
图片根本就不出来好吧。。。。。。
Android文件图片上传的详细讲解(一)HTTP multipart/form-data 上传报文格式实现手机端上传 -
ln94223:
第一个应该用排它网关吧 怎么是并行网关, 并行网关是所有exe ...
工作流Activiti的学习总结(八)Activiti自动执行的应用 -
ZY199266:
获取不到任何消息信息,请问这是什么原因呢?
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息 -
xiaoyao霄:
DestinationSourceMonitor 报错 应该导 ...
ActiveMQ 通过JMX监控Connection,Queue,Topic的信息
本系列讨论 Flex itemRenderer 以及如何高效、有效地使用它们。本系列的第一部分侧重于内联 itemRenderer, 它们写入描述 List 控制的 MXML 标记中。之后的文章讨论使用 MXML 和 ActionScript 且更为复杂的 itemRenderer。
循环使用渲染器
人们经常尝试从列表外访问 itemRenderer。例如, 由于您刚从服务器那里收到新数据, 您可能要将 DataGrid 中第五行的第四列变为绿色。获取那个 itemRenderer 实例并在外部修改它对于 Flex 框架和组件模型而言是一个大工程。
要理解 itemRenderer, 您必须理解它们为何变成现在这样以及我们当初设计它们时的目的。在此, 当我用到“我们”时, 我指的是 Adobe Flex 设计小组。我与它没有关系。言归正传, 假设您要显示 1,000 条记录。如果您认为列表控制会创建 1,000 个 itemRenderer, 您就错了。如果列表只显示 10 行, 它会创建约 12 个 itemRenderer-这些足以显示各个可见行, 多出的几个则用于缓冲和性能。列表最初显示行 1–10。当用户滚动这个列表时, 它现在可能显示行 3-12。但那 12 个 itemRenderer 仍在那里: 及时滚动列表后, 也不会新建任何 itemRenderer。
以下是 Flex 执行的操作。滚动列表时, 那些依然显示相同数据 (行 3-10) 的 itemRenderer 将向上移动。它们并未发生任何变化, 只是移到了新位置。之前显示行 1 和 行 2 数据的 itemRenderer 现在移到行 10 的 itemRendere 下。然后, 为那些 itemRenderer 提供行 11 和 行 12 的数据。换言之, 除非您调整列表大小, 否则将重用/循环使用那些相同的 itemRenderer-它们只是移到新位置并且现在显示新数据。
Flex 的这一行为在特定编程环境中使情况变得更复杂。例如, 如果要更改第五行的第四列中某个单元格的背景色, 请注意如果用户滚动了该列表, 则该单元格的 itemRenderer 现在可能显示第二十一行的内容。
那么怎样进行这类更改呢?
itemRenderer 必须根据给它们显示的数据更改自己。如果列表的 itemRenderer 要根据数据值更改其颜色, 它必须查看获得的数据并更改自己。
内联 itemRenderer
我在本文中使用内联 itemRenderer 说明如何解决这个问题。内联 itemRenderer 直接写入 MXML 文件中列表控制出现的位置。我在下一篇文章中将说明如何编写外部 itemRenderer。内联 itemRenderer 最简单, 一般用于十分简单的渲染器或用于为较大的应用程序构建原型。内联 itemRenderer 本身并没有问题, 但随着代码变得复杂, 最好将它提取到自己的类中。
我将在所有示例中使用相同的数据: 一组书籍相关信息-作者、书名、出版日期和缩览图图像等。每个记录是一段 XML 代码, 如下:
<author>Peter F. Hamilton</author>
<title>Pandora's Star</title>
<image>assets/pandoras_star_.jpg</image>
<date>Dec 3, 2004</date>
</book>
我将从使用 <mx:List> 控制的一个简单 itemRenderer 开始。这里将列出作者, 后跟书名。
<mx:itemRenderer>
<mx:Component>
<mx:Label text="{data.author}: {data.title}" />
</mx:Component>
</mx:itemRenderer>
</mx:List>
这个 itemRenderer 太简单了, 可能使用 labelFunction 会更好, 但它至少允许您专注于重要部分。首先, 内联 itemRenderer 使用 <mx:itemRenderer> 标记定义它。这个标记包含 <mx:Component> 标记。这个标记必须放在这里, 因为它会告诉 Flex 编译器您正在定义一个组件内联。我马上会说明这到底是什么意思。
您在 <mx:Component> 标记中定义 itemRenderer。对于本例, 它是一个 <mx:Label> 并且文本字段设置为一个数据绑定表达式: {data.author}: {data.title}。这点很重要。List 控制通过设置 itemRenderer 的 data 属性, 为每个 itemRenderer 实例提供 dataProvider 的记录。对于上述代码, 它意味着对于任何给定列表行, 内联 itemRenderer 实例将自己的 data 属性设置为 <book> XML 节点 (如以上节点)。当您滚动列表时, data 属性也会更改, 因为 itemRenderer 被循环用于新行。
换言之, 行 1 的 itemRenderer 实例现在可能将其 data.author 设置为“Peter F. Hamilton”, 但当它滚出视图时, itemRenderer 被循环使用并且 (该 itemRenderer) 的data 属性现在可能将其 data.author 设置为“J.K. Rowling”。滚动列表时, 所有这一切都会自动进行-您不必操心。
以下是复杂一些的内联 itemRenderer, 它还是使用 <mx:List> 控制:
<mx:itemRenderer>
<mx:Component>
<mx:HBox >
<mx:Image source="{data.image}" width="50" height="50" scaleContent="true" />
<mx:Label text="{data.author}" width="125" />
<mx:Text text="{data.title}" width="100%" />
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
确实区别不大。这次不是 <mx:Label>, itemRenderer 是一个 <mx:HBox> 并包含 <mx:Image>、<mx:Label> 和 <mx:Text> 控制。数据绑定依然将可视与记录关联在一起。
数据网格
也可以将内联 itemRenderer 用于 DataGrid。以下是应用于列的一个示例:
<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true">
<mx:columns>
<mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" />
<mx:DataGridColumn headerText="Author" dataField="author" width="125"/>
<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>
</mx:columns>
</mx:DataGrid>
如您所见, 这次比前两个要复杂得多, 但结构相同: <mx:itemRenderer> 包含一个 <mx:Component> 定义。
<mx:Component> 是为了提供一个 MXML 语法, 用于在代码中创建一个 ActionScript 类。想象一下, 剪切 <mx:Component> 块中出现的代码并将它放入一个单独文件中并提供一个类名称。当您查看内联 itemRenderer 时, 它看上去就像一个完整的 MXML 文件, 不是吗?有根标记 (本例中为 <mx:HBox>), 甚至 <mx:Script> 块。
本例中的 <mx:Script> 块用于覆盖 set data 函数, 使得 itemRenderer 的背景色可以更改。在本例中, 无论书籍的未来出版数据为何时, 背景将从白色更改为其他颜色。记住, itemRenderer 是循环使用的, 所以如果测试失败, 还必须将颜色设置回白色。否则, 当用户滚动列表时, 所有 itemRenderer 最终将变为紫色。
outerDocument
scope 也更改了。我的意思是, 从 <mx:Component> 中定义的变量仅作用于那个组件/内联 itemRenderer。同样, <mx:Component> 外的内容在不同的作用范围内, 就像这个组件是在另一个文件中定义的那样。例如, 假设您为这个 itemRenderer 添加了一个 Button, 允许用户从在线零售商那里购买书籍。Button 调用它们的 click 事件上的函数, 所以您可以如下定义这个按钮:
<mx:Button label="Buy" click="buyBook(data)" />
如果在文件的 <mx:Script> 块中定义 buyBook() 函数, 会显示一个错误, 指出 buyBook() 是一个未定义的方法。这是因为 buyBook() 是在文件的作用范围内而不是在 <mx:Component> 的作用范围内定义的。由于这是一个典型用例, 使用 outerDocument 标识符可以避开这个问题:
<mx:Button label="Buy" click="outerDocument.buyBook(data)" />
outerDocument 标识符将作用范围更改为查找文件或外部文档, 并引用 <mx:Component>。现在请注意: 这个函数必须是公共函数, 而不是受保护或私有函数。记住, <mx:Component> 被视为外部定义的类。
冒泡事件
现在我们来看另一个更复杂的示例。这是一个使用相同数据的 TileList。
dataProvider="{testData.book}" height="232" columnWidth="275"
rowHeight="135" >
<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="[0×99ff99,0×99ff99]">
<mx:click>
<mx:Script>
<![CDATA[
var e:BuyBookEvent = new BuyBookEvent();
e.bookData = data;
dispatchEvent(e);
]]>
</mx:Script>
</mx:click>
</mx:Button>
</mx:HBox>
</mx:VBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
当应用程序运行时, itemRenderer 看上去如图 1:
1.在 TileList 中实施一个 itemRenderer。
这个 itemRenderer 与 DataGrid 中使用的那个十分相似, 但“购买”按钮的 click 事件不使用 outerDocument 调用函数。在本例中, click 事件会创建一个自定事件, 后者通过 TileList 从 itemRenderer 中冒出, 并由可视链中的较高组件接收。
这是一个很常见的问题: 您有一个 itemRenderer, 而它包含一些交互控制, 通常是 Button、LinkButton 或其他单击时会导致发生特定动作的组件。可能是删除行或是本例中的购买书籍。
指望 itemRenderer 完成这个工作并不合理。毕竟, itemRenderer 只负责让列表看上去美观。事件 bubbling 允许 itemRenderer 将这个工作转交给他人。自定事件此时派上了用场, 因为这个事件与行中的数据相关;为何不将数据包含在事件中呢?如果那样, 事件接收方就不必苦苦搜寻它了。
结论
使用内联 itemRenderer 是一种快速自定列表外观的好方法。考虑将内联 itemRenderer 作为单独的 ActionScript 类-它们毕竟像有作用范围一样。如果必须引用包含文件中的函数或属性, 可使用 outerDocument 标识符更改作用范围。如果需要根据与 itemRenderer 的交互结果传达传递信息, 可使用自定冒泡事件。
并且记住: 不要试图抓住 itemRenderer 不放-它们将循环使用。它们只负责处理收到的数据。
评论
发表评论
-
flex 中As3Commons的使用學習
2009-10-15 12:53 3726學習Java的人,知道java中反射的强大, ... -
flex的国家化的应用
2009-09-23 08:59 2091在项目中需要使用发送短信模板的功能的,根据主题不同,模板不同, ... -
flex的沙箱问题
2009-09-14 17:14 5451在flex与google的地图整合中发现,点击了goog ... -
Flex 常用技巧
2009-09-04 13:00 2580flex是一种异步请求的技术,如果要实现同步必须在传递函 ... -
Flex 開發Google地圖
2009-08-24 13:16 24511 .获取googe的key 2.下载google的fle ... -
查询之order by,group by和having的使用
2009-08-08 15:48 4723在项目中查询常驻酒店的中住的次数最多的前10个酒店: 代码如 ... -
objectProxy的监控对象应用
2009-08-08 13:46 2679在项目中查询根据一个字段发生实现需要特殊的功能,作出相应的动作 ... -
Flex 依赖注入
2009-08-08 13:41 2095了解依赖注入 众所周 ... -
Flex 与外部的数据通信(HTTPService,URLLoader和URLRequest)
2009-08-08 13:36 7435ActionScript 3.0中提供的数据加载请求类主要是H ... -
flex 数据绑定
2009-08-08 13:31 24099.2.1 函数和类级别的绑定 [Bindable]标签打使 ... -
Flex中Entity对象与Display对象之间的数据双向动态绑定
2009-08-08 13:27 2455flex项目中对象的和组 ... -
学习ActionScript 3.0的新特点
2009-08-06 13:05 2012ActionScript3.0 是一种类型 ... -
flex 中类似Google的提示下拉菜单实现
2009-08-01 16:28 5415项目中使用类似Gooogle输入提示菜单的实现如下 ... -
针对Flex中组件的扩展的应用开发
2009-08-01 16:04 2869在项目中使用一个自定义的CheckboxGroup组件继承自C ... -
Flex类似Google搜索提示的两种做法思路
2009-08-01 15:52 2681做了个简单的搜索提示 ... -
Flex中直接获取某个组件的对象
2009-08-01 15:47 2456Flex中直接获取某个组件的对象方案1: 遍历这些butto ... -
flex 查看类的各种数据的权限
2009-08-01 15:18 1872查看类的一些属性的信息:可读,可写,可读可写。 ... -
flex中getDefinitionByName 函数的使用
2009-08-01 12:40 6742在项目中自定义一个CheckboxGroup,这个控件里面 ... -
Flex 学习中数据类型必须注意的几点
2009-08-01 12:36 2259在字符串转换为int类型必须使用 最好如下: var a:i ... -
flex BindUtils的扩展的样式表绑定工具类StyleBindingUtils
2009-07-30 13:06 2223项目中使用的样式表绑定类如下: package uti ...
相关推荐
### Flex ItemRenderer 的详细教程 #### 一、ItemRenderer 概述 在 Flex 开发中,ItemRenderer 是一种非常强大的工具,它允许开发者自定义列表(List)、数据网格(DataGrid)等控件中每一项的外观和行为。通过 ...
### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...
在Flex中,每个数据项都会被渲染成一个ItemRenderer实例,这样我们可以为每个项目定制不同的视觉效果。 在我们的相册例子中,ItemRenderer可能包含以下元素: 1. 图片显示:我们可能会使用mx.controls.Image或...
Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于自定义列表或数据网格组件中项的显示方式。在Flex开发中,我们经常会遇到需要个性化显示数据的情况,比如在一个列表中,我们希望每条数据不仅仅是一个简单的...
Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如ArrayCollection时,我们常常需要以不同的方式展示每个项目,例如图片、文本或者...
在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex框架中的重用机制。接着,会通过示例代码来展示如何创建和使用itemRenderer,以及如何根据数据动态地更改itemRenderer...
内渲染器(ItemRenderer)是Flex、Flash Builder或者ActionScript等富互联网应用程序开发中的一个重要概念,主要用于自定义组件列表项的显示方式。在基于Adobe Flex的项目中,它允许开发者根据需要为数据列表(如...
首先,我们了解一个基本概念:Flex的列表控件并不为每个数据项创建单独的渲染器实例。比如,如果你有一个包含1000条记录的列表,但只有10行在屏幕上可见,那么Flex只会创建足够的渲染器来展示当前和未来可能需要的...
本文将深入探讨Flex项呈示器(ItemRenderer)的概念、使用方法,以及如何根据需求定制它来展示用户信息,如头像和等级。 ## 一、Flex项呈示器(ItemRenderer)简介 Flex项呈示器是Adobe Flex框架中的一个组件,其...
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
1. **创建ItemRenderer**: 你可以通过Flex Builder或IntelliJ IDEA等IDE创建一个新的ActionScript类,继承自`mx.controls.listClasses.ItemRenderer`或`s.components.supportClasses.ListBaseItemRenderer`,然后在...
当DataGrid渲染数据项时,它会为每个数据项创建一个`itemRenderer`实例,并将其数据属性设置为数据项。这样,我们就可以在`itemRenderer`内部根据需要处理和显示数据。 接下来,我们来探讨如何创建一个简单的`...
在Flex4中,ItemRenderer是一种强大的工具,用于自定义数据Grid、List或其他数据绑定组件中的项显示方式。本文将深入探讨如何使用Flex4创建一个ItemRenderer,以实现类似雅虎聊天界面的效果,并介绍相关的核心概念和...
在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...
在Flex开发中,ItemRenderer是一种非常关键的组件,它允许我们自定义MX或者Spark列表类(如List、DataGrid等)中的数据项显示方式。ItemRenderer使得开发者能够以更个性化的方式展示数据,提升用户界面的视觉效果和...
在Flex和AS3开发中,项目渲染器(ItemRenderer)是一个关键的概念,它允许开发者自定义数据项在UI组件中的显示方式。项目渲染器通常用于数据网格、列表或其他可滚动的容器,使得数据显示更加丰富和交互性更强。下面...
3. **自定义ItemRenderer**:如果默认的ItemRenderer无法满足需求,可以创建自定义ItemRenderer,用于渲染总计行。在自定义ItemRenderer中,可以添加额外的逻辑来计算和显示总计。 4. **MXML与ActionScript**:Flex...
itemRenderer是自定义的树节点渲染器,负责在节点上显示复选框。 2. ActionScript类文件:这部分是Flex的编程语言,用于实现组件的逻辑。可能有一个自定义的CheckBoxTree类,继承自mx.controls.Tree,并添加复选框...
ItemRenderer是Flex框架中非常重要的组成部分,它为开发者提供了高度灵活的数据展示方式。通过理解ItemRenderer的工作原理及其生命周期,可以有效地提高应用程序的性能和用户体验。无论是简单的文本展示还是复杂的UI...
自定义渲染器是Flex组件定制的一部分,它可以让我们对UI元素的显示方式有更大的控制力。在这个场景中,我们创建了一个针对DataGrid的自定义Label渲染器,这个渲染器能够根据数据显示不同的颜色,以突出关键信息或者...