- 浏览: 68474 次
- 性别:
- 来自: 北京
最新评论
-
_MyCould:
Flex Module基础 -
szlaptop:
这个正式我一直想的,楼主,能帖图上来看看吗?谢谢
最近完成的某系统的报表组件 -
wfzhanga:
楼主整理的不错,能不能把代码传上去啊。如果方便请帮我传一下啊, ...
flex ToolTip专题 -
bence:
总结的很好,谢谢分享
Flex Metadata Tag高级应用 -
fansfirst2008:
楼主太强了,不仅把东西讲解得深入浅出,而且写的文字表达很漂亮! ...
flex itemRenderer使用(一)内联渲染器
在本系列的第 2 部分中, 我向您展示了如何使用 MXML 和 ActionScript 创建外部 itemRenderer。在我用过的示例中, 有一个调度自定事件 BuyBookEvent 的 Button-这样应用程序可以对它作出响应。本文进一步讨论与 itemRenderer 的通信。
我坚信有一条规则是永远不能违背的: 不能抓住 itemRenderer 的实例不放, 更改它 (设置公共属性) 或调用它的公共方法。这对我而言是一个禁忌。itemRenderer 是很难弄清的, 我在第 1 部分中说到了其中的缘由: itemRenderer 是循环使用的。抓住一个会破坏 Flex 框架。
请将这条规则谨记在心, 您可以使用 itemRenderer 完成以下操作:
•itemRenderer 可以通过它的列表所有者调度事件。 (您已经看到过冒泡; 这个做法更好, 接下来您就会看到。)
•itemRenderer 可以使用静态类成员。其中包括 Application.application。如果您的值“全局”存储在应用程序对象中, 您可以通过这种方式获得它们。
•itemRenderer 可以使用拥有它的列表的公共成员。接下来您就会看到。
•itemRenderer 可以使用数据记录中的任何内容。例如, 记录中的某个项目不用于直接显示, 但它却影响 itemRenderer 的行为方式。
以下是上一篇文章中用于 TileList 的 MXML itemRenderer。我将使它对外部源 (我将这个文件称为 BookItemRenderer.mxml) 的更改作出反应, 从而使它更生动:
假设您在 TileList 中显示一个商品目录。您还有一个 Slider (不属于 itemRenderer), 它允许用户给出一个价格范围; 在此范围之外的所有商品应变灰 (itemRenderer 的 alpha 值应改变)。您需要告知所有 itemRenderer 标准已改变, 这样它们可以修改自己的 alpha 值。
覆盖 set data 可能如下:
问题是: 如何更改标准值?itemRenderer 的“最佳做法”是始终让它们处理为自己手头的数据。在本例中, 将测试标准作为数据的一部分不可能也不切实际。所以这在数据外留下了一个位置。您有两个选择:
•列表本身的一部分。即, 您的列表 (List、DataGrid、TileList 或其他) 可以是扩展列表控制并且将这个标准作为公共成员的类。
•作为全局数据的应用程序的一部分。
我选择第一个: 扩展一个类并将这个标准作为该类的一部分。毕竟, 这个类将用于显示数据, 而标准是显示内容的一部分。对于本例, 我将扩展 TileList 并将标准作为公共数据成员。
这个办法是, itemRenderer 外的控制可以通过更改列表控制上的这个属性来修改标准。
itemRenderer 可以访问另一块数据: 列表本身的相关信息以及它们渲染哪个行哪个列 (如果在面向列的控制中)。这称为 listData, 在 BookItemRenderer.mxml itemRenderer 示例中可以这样使用它:
将这个代码放入上述示例 BooktItemRenderer.mxml 代码的 <mx:Script> 块中。
itemRenderer 的 listData property 有一个 owner 字段, 它是 itemRenderer 所属的控制。在本例中, 所有者是 MyTileList 控制-我的 TileList 扩展。将所有者字段转换为 MyTileList 即可取走标准。
IDropInListItemRenderer
当 itemRenderer 类实施 IDropInListItemRenderer 接口时, 即可访问 listData。不幸的是, UI 容器组件不实施提供 listData 访问权的接口。Button 和 Label 等控制组件提供这一访问权, 但对于容器, 您必须自己实施接口。
实施这个接口很简单, 您可以在 Flex 文档中找到说明。您必须为 BookItemRenderer 类执行以下操作:
1.由类实施接口。
2.将 set 和 get 函数添加到 itemRenderer 文件的 <mx:Script> 块。
注意, 一旦设置 _criteria 值, 它会调用 invalidateList()。这将使用 dataProvider 的值重置所有 itemRenderer 并调用它们的 set data 函数。
随后的流程如下:
1.itemRenderer 在它的列表所有者中查找要使用的标准, 以帮助它决定如何渲染数据。
2.列表所有者类是某个 Flex 列表类的扩展, 它包含 itemRenderer 读取以及外部代码-另一个控制或 ActionScript 代码 (可能是从远程调用接收数据产生的) 设置的公共属性。
3.设置列表属性时, 它调用列表的 invalidateList() 方法。这触发了 itemRenderer 刷新, 使它们重置自己的数据 (并返回第 1 步)。
刚刚我向您展示了如何借助事件冒泡使 itemRenderer 与应用程序的其余部分通信。我认为这相当快。但我认为还有更好的方法, 它符合 itemRenderer 负责展示数据、控制负责处理数据的想法。
MyTileList 控制的构思是, 它是可售书籍目录的可见视图。当用户选中一本书籍并要购买它时, 列表控制应当将这个信息发送给应用程序。换言之:
万事俱备, 事件冒泡并跳过 MyTileList。冒泡方法没有将事件 (bookBuy) 与列表控制 (MyTileList) 关联在一起, 允许您将控制移到应用程序的其他部分。例如, 如果您在主 Application 中写入 bookBuy 的事件侦听器, 您无法将列表控制移到应用程序的其他部分。如果要移动, 您还得移动那个事件处理函数。另一方面, 如果您将事件与控制关联在一起, 只是移动控制。
我们这样看: 假设 Button 上的单击事件并不是 Button 调度的事件, 但由于按钮中的某个内容而冒泡。您将无法使用: <mx:Button click="doLogin()" label="Log in" />; 您必须将 doLogin() 函数放在其他位置, 这会使应用程序更难使用。
希望我已经说服您, 以下是如何将这个示例从冒泡更改为从列表控制调度。
1.将元数据添加到 CatalogList 控制, 告知编译器控制负责调度事件:
2.将一个函数添加到 CatalogList 进行事件调度。itemRenderer 实例将调用这个函数:
3.将 itemRenderer 中的 Buy 按钮代码更改为调用该函数:
现在, itemRenderer 中的 Button 可以使用记录数据 (或适合此操作的其他任何内容) 轻松调用列表控制中的函数, 并将与应用程序其余部分协调的职责转交给列表控制。
本例中的列表控制使用数据调度事件。应用程序可以使用 ActionScript 为这个事件添加事件侦听器, 也可以使用 MXML (因为 CatalogList.as 文件中的 [Event] 元数据) ; 使用 [Event] 元数据使开发人员能更轻松地使用您的代码。
总结:
itemRenderer 应使用事件进行任何操作通信。自定事件允许您将信息随事件传递, 这样事件使用者无需再通过 itemRenderer 获取数据。
itemRenderers 应通过覆盖它们的 set data 函数对数据更改作出“反应”。在该函数中, 它们可以访问其 listData.owner 中的值。它们还可以访问存储在静态类或通过 Application.application 存储在主应用程序中的数据
我坚信有一条规则是永远不能违背的: 不能抓住 itemRenderer 的实例不放, 更改它 (设置公共属性) 或调用它的公共方法。这对我而言是一个禁忌。itemRenderer 是很难弄清的, 我在第 1 部分中说到了其中的缘由: itemRenderer 是循环使用的。抓住一个会破坏 Flex 框架。
请将这条规则谨记在心, 您可以使用 itemRenderer 完成以下操作:
•itemRenderer 可以通过它的列表所有者调度事件。 (您已经看到过冒泡; 这个做法更好, 接下来您就会看到。)
•itemRenderer 可以使用静态类成员。其中包括 Application.application。如果您的值“全局”存储在应用程序对象中, 您可以通过这种方式获得它们。
•itemRenderer 可以使用拥有它的列表的公共成员。接下来您就会看到。
•itemRenderer 可以使用数据记录中的任何内容。例如, 记录中的某个项目不用于直接显示, 但它却影响 itemRenderer 的行为方式。
以下是上一篇文章中用于 TileList 的 MXML itemRenderer。我将使它对外部源 (我将这个文件称为 BookItemRenderer.mxml) 的更改作出反应, 从而使它更生动:
<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="115" > <mx:Script> <![CDATA[ ]]> </mx:Script> <mx:Image id="bookImage" 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>
假设您在 TileList 中显示一个商品目录。您还有一个 Slider (不属于 itemRenderer), 它允许用户给出一个价格范围; 在此范围之外的所有商品应变灰 (itemRenderer 的 alpha 值应改变)。您需要告知所有 itemRenderer 标准已改变, 这样它们可以修改自己的 alpha 值。
覆盖 set data 可能如下:
override public function set data( value:Object ) : void { super.data = value; if( data.price < criteria ) alpha = 0.4; else alpha = 1; }
问题是: 如何更改标准值?itemRenderer 的“最佳做法”是始终让它们处理为自己手头的数据。在本例中, 将测试标准作为数据的一部分不可能也不切实际。所以这在数据外留下了一个位置。您有两个选择:
•列表本身的一部分。即, 您的列表 (List、DataGrid、TileList 或其他) 可以是扩展列表控制并且将这个标准作为公共成员的类。
•作为全局数据的应用程序的一部分。
我选择第一个: 扩展一个类并将这个标准作为该类的一部分。毕竟, 这个类将用于显示数据, 而标准是显示内容的一部分。对于本例, 我将扩展 TileList 并将标准作为公共数据成员。
package { import mx.controls.TileList; public class CatalogList extends TileList { public function CatalogList() { super(); } private var _criteria:Number = 10; public function get critera() : Number { return _criteria; } public function set criteria( value:Number ) : void { _criteria = value; } } }
这个办法是, itemRenderer 外的控制可以通过更改列表控制上的这个属性来修改标准。
itemRenderer 可以访问另一块数据: 列表本身的相关信息以及它们渲染哪个行哪个列 (如果在面向列的控制中)。这称为 listData, 在 BookItemRenderer.mxml itemRenderer 示例中可以这样使用它:
override public function set data( value:Object ) : void { super.data = value; var criteria:Number = (listData.owner as MyTileList).criteria; if( data.price < criteria ) alpha = 0.4; else alpha = 1; }
将这个代码放入上述示例 BooktItemRenderer.mxml 代码的 <mx:Script> 块中。
itemRenderer 的 listData property 有一个 owner 字段, 它是 itemRenderer 所属的控制。在本例中, 所有者是 MyTileList 控制-我的 TileList 扩展。将所有者字段转换为 MyTileList 即可取走标准。
IDropInListItemRenderer
当 itemRenderer 类实施 IDropInListItemRenderer 接口时, 即可访问 listData。不幸的是, UI 容器组件不实施提供 listData 访问权的接口。Button 和 Label 等控制组件提供这一访问权, 但对于容器, 您必须自己实施接口。
实施这个接口很简单, 您可以在 Flex 文档中找到说明。您必须为 BookItemRenderer 类执行以下操作:
1.由类实施接口。
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" ... implements="mx.controls.listClasses.IDropInListItemRenderer">
2.将 set 和 get 函数添加到 itemRenderer 文件的 <mx:Script> 块。
import mx.controls.listClasses.BaseListData; private var _listData:BaseListData; public function get listData() : BaseListData { return _listData; } public function set listData( value:BaseListData ) : void { _listData = value; }
当列表控制看到 itemRenderer 实施 IDropInListItemRenderer 接口时, 它将创建一个 listData 项目并将它指派到每个 itemRenderer 实例。 invalidateList() 在我的类中设置这个标准并不像指派值这么简单。那样做无法告知 Flex 框架数据已更改。标准更改必须触发一个事件。以下是对 set criteria() 函数的修改内容:
public function set criteria( value:Number ) : void { _criteria = value; invalidateList(); }
注意, 一旦设置 _criteria 值, 它会调用 invalidateList()。这将使用 dataProvider 的值重置所有 itemRenderer 并调用它们的 set data 函数。
随后的流程如下:
1.itemRenderer 在它的列表所有者中查找要使用的标准, 以帮助它决定如何渲染数据。
2.列表所有者类是某个 Flex 列表类的扩展, 它包含 itemRenderer 读取以及外部代码-另一个控制或 ActionScript 代码 (可能是从远程调用接收数据产生的) 设置的公共属性。
3.设置列表属性时, 它调用列表的 invalidateList() 方法。这触发了 itemRenderer 刷新, 使它们重置自己的数据 (并返回第 1 步)。
刚刚我向您展示了如何借助事件冒泡使 itemRenderer 与应用程序的其余部分通信。我认为这相当快。但我认为还有更好的方法, 它符合 itemRenderer 负责展示数据、控制负责处理数据的想法。
MyTileList 控制的构思是, 它是可售书籍目录的可见视图。当用户选中一本书籍并要购买它时, 列表控制应当将这个信息发送给应用程序。换言之:
<CatalogList bookBuy="addToCart(event)" />
万事俱备, 事件冒泡并跳过 MyTileList。冒泡方法没有将事件 (bookBuy) 与列表控制 (MyTileList) 关联在一起, 允许您将控制移到应用程序的其他部分。例如, 如果您在主 Application 中写入 bookBuy 的事件侦听器, 您无法将列表控制移到应用程序的其他部分。如果要移动, 您还得移动那个事件处理函数。另一方面, 如果您将事件与控制关联在一起, 只是移动控制。
我们这样看: 假设 Button 上的单击事件并不是 Button 调度的事件, 但由于按钮中的某个内容而冒泡。您将无法使用: <mx:Button click="doLogin()" label="Log in" />; 您必须将 doLogin() 函数放在其他位置, 这会使应用程序更难使用。
希望我已经说服您, 以下是如何将这个示例从冒泡更改为从列表控制调度。
1.将元数据添加到 CatalogList 控制, 告知编译器控制负责调度事件:
import events.BuyBookEvent; import mx.controls.TileList; [Event(name="buyBook",type="events.BuyBookEvent")] public class CatalogList extends TileList {
2.将一个函数添加到 CatalogList 进行事件调度。itemRenderer 实例将调用这个函数:
public function dispatchBuyEvent( item:Object ) : void { var event:BuyBookEvent = new BuyBookEvent(); event.bookData = item; dispatchEvent( event ); } }
3.将 itemRenderer 中的 Buy 按钮代码更改为调用该函数:
<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]"> <mx:click> <![CDATA[ (listData.owner as CatalogList).dispatchBuyEvent(data); ]]> </mx:click> </mx:Button>
现在, itemRenderer 中的 Button 可以使用记录数据 (或适合此操作的其他任何内容) 轻松调用列表控制中的函数, 并将与应用程序其余部分协调的职责转交给列表控制。
本例中的列表控制使用数据调度事件。应用程序可以使用 ActionScript 为这个事件添加事件侦听器, 也可以使用 MXML (因为 CatalogList.as 文件中的 [Event] 元数据) ; 使用 [Event] 元数据使开发人员能更轻松地使用您的代码。
总结:
itemRenderer 应使用事件进行任何操作通信。自定事件允许您将信息随事件传递, 这样事件使用者无需再通过 itemRenderer 获取数据。
itemRenderers 应通过覆盖它们的 set data 函数对数据更改作出“反应”。在该函数中, 它们可以访问其 listData.owner 中的值。它们还可以访问存储在静态类或通过 Application.application 存储在主应用程序中的数据
发表评论
-
Flex States 视图状态
2010-08-30 23:06 2195Flex States可以为组件定义多个视图状态,每一 ... -
flex中使用链接报告优化Module大小的测试
2010-08-18 20:51 1711最近使用PuerMVC和Module机制构建了一个界面和操作类 ... -
flex ToolTip专题
2010-06-03 12:46 46881 创建ToolTips 每一个可视化的Flex组件 ... -
pureMVC使用经验和建议
2010-06-03 11:00 1498下面是有经验的朋友分 ... -
pureMVC框架及其开发
2010-06-03 10:46 1189PureMVC框架的目标很明确 ... -
HTML页面加载和解析流程
2010-04-21 11:38 28701.用户输入网址(假设是个html页面,并且是第一次访问),浏 ... -
CSS参考手册
2010-04-21 11:02 914颜色与背景 •color •background-colo ... -
HTML参考手册( 标签、属性和事件)
2010-04-20 17:17 1551HTML标签 标签 描述 DTD <!--...- ... -
flex itemRenderer使用(五):效率
2010-04-17 17:01 1239如果您要显示大量 itemRe ... -
flex itemRenderer使用(四):状态和过渡
2010-04-17 16:01 1788itemRenderer 最擅长与应用程序的用户通信。有时通信 ... -
flex处理XML(一)基础
2010-04-15 15:24 1343FLEX处理XML,ECMAScript For XML(e4 ... -
flex itemRenderer使用(二)外部渲染器
2010-04-09 18:18 1643在本系列的第 1 部分中, 我向您展示了如何创建内联 item ... -
flex itemRenderer使用(一)内联渲染器
2010-04-09 17:50 1501Flex 提供许多控制, 它们 ... -
Flex Metadata Tag高级应用
2010-04-01 14:42 2428原文地址:http://livedocs. ... -
Flex Metadata Tag归纳总结
2010-04-01 14:25 1080Flex引入了元数据标签的概念,它告诉编译器如何编译这段 ... -
Flex和JS通信
2010-03-06 18:42 1769flex提供了和JS通信的方法,使用flexSDK中的Exte ... -
最近完成的某系统的报表组件
2010-01-20 21:12 2602最近做完了一个flex+java的项目,其中项目的主要特 ... -
Flex Chart组件的阴影去除
2009-12-21 10:52 2161去除Flex Chart组件的阴影有多种方法,最简单最直接的方 ... -
flex中==和===的区别(和java的==和equals类似但也有不同之处)
2009-12-21 09:44 4758===用于测试两个表达式 ... -
Flex中的Dictionary
2009-12-20 23:04 2500Dictionary 类用于创建属性的动态集合,该集合 ...
相关推荐
#### 三、使用 MXML 和 ActionScript 定义 ItemRenderer 当需要更复杂的逻辑或交互时,仅依靠 MXML 来定义 ItemRenderer 可能不够。这时,可以结合 MXML 和 ActionScript 来定义更复杂的 ItemRenderer。 **示例...
在描述中提到的博客链接(由于实际无法访问,此处无法提供具体内容),通常会包含关于如何创建和使用Flex ItemRenderer的教程或技巧。通常,一个教程可能会涵盖以下几点: 1. **创建ItemRenderer**: 你可以通过Flex...
Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如ArrayCollection时,我们常常需要以不同的方式展示每个项目,例如图片、文本或者...
在深入学习Flex的ItemRenderer时,我们还可以探索更高级的主题,如使用States管理不同视图,或者利用Effects进行动态效果的实现。总的来说,熟练掌握ItemRenderer能帮助我们创建更具吸引力和交互性的Flex应用,特别...
本文将深入探讨Flex中ItemRenderer的使用方法。 首先,我们需要理解ItemRenderer的基本概念。ItemRenderer是一个轻量级组件,用于呈现数据列表中的单一数据项。当数据提供者中的每一项数据都需要不同的外观或行为时...
本文将深入探讨如何使用Flex4创建一个ItemRenderer,以实现类似雅虎聊天界面的效果,并介绍相关的核心概念和技术。 首先,让我们了解ItemRenderer的基本概念。ItemRenderer是Flex中的一种组件,它的主要任务是将...
### 理解 Flex_itemRenderer #### 一、Flex_itemRenderer 概述 Flex_itemRenderer 是 Flex 框架中的一个重要概念,它主要用于定义列表、数据网格等控件中的每一项是如何呈现的。通过自定义 itemRenderer,开发者...
在本文中,将首先介绍内联itemRenderer的概念和使用方法,然后探讨itemRenderer的设计目的和Flex框架中的重用机制。接着,会通过示例代码来展示如何创建和使用itemRenderer,以及如何根据数据动态地更改itemRenderer...
本文将深入探讨Flex项呈示器(ItemRenderer)的概念、使用方法,以及如何根据需求定制它来展示用户信息,如头像和等级。 ## 一、Flex项呈示器(ItemRenderer)简介 Flex项呈示器是Adobe Flex框架中的一个组件,其...
在Flex手机项目开发中,创建自定义的List组件ItemRenderer是一项常见的需求,目的是为了提供更加丰富和个性化的显示效果。本文将深入探讨如何利用IconItemRenderer来实现这一目标,同时结合具体的实例,介绍两种不同...
Flex内联itemRenderer是Adobe Flex框架中的一种技术,用于...总之,掌握Flex内联itemRenderer的使用,对于提升Flex应用的用户体验和视觉效果至关重要。通过实践和探索,你可以创造出更加生动、交互丰富的数据展示效果。
在Flex开发中,ItemRenderer是一种强大的机制,它允许开发者自定义数据列表或组合框等容器中每一项的显示方式。ItemRenderer是ActionScript类,它扩展了MX或Spark的基类,如mx.controls.listClasses.ItemRenderer或s...
综上所述,这个项目可能涉及到一个使用Flex DataGrid展示节目或课程播表的应用,播表数据存储在XML文件中,每个节目单元格通过自定义的ItemRenderer展现,可能包含Flash播放器,并且可以通过点击单元格触发页面跳转...
- **ListBase**:Flex 中所有列表控件的基类,提供了很多用于管理和操作列表项的功能。 #### 三、问题描述 具体来说,我们有一个名为 `MyHorizontalList` 的 HorizontalList 类型的组件,它具有以下特性: 1. **...
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
首先,我们需要创建一个自定义的ItemRenderer类,该类继承自`mx.controls.listClasses.ListItemRenderer`或`spark.components.supportClasses.ListItemRenderer`(根据你使用的Flex SDK版本)。在ItemRenderer中,...
在本文中,我们将深入探讨如何使用Flex技术来创建一个精美的相册,特别是利用HorizontalList组件。Flex是一种基于ActionScript的开发框架,广泛用于构建富互联网应用程序(RIA)。HorizontalList是Flex提供的一种...
4. **MXML与ActionScript**:Flex应用可以使用MXML(标记语言)或者ActionScript(面向对象的编程语言)编写。在这个示例中,可能既包含MXML文件(用于界面布局和组件声明),也包含ActionScript文件(用于业务逻辑...
#### 三、ItemRenderer的类型及应用 **1. Inline ItemRenderer** Inline ItemRenderer是在MXML中直接定义的,通常嵌入在List控件的标签内。这种方式适合于简单的数据展示需求,因为它易于编写和维护。 **示例代码...
2. **自定义ItemRenderer**:Flex中的ItemRenderer是用来渲染数据项的组件。为了实现行颜色的动态变化,我们需要为Datagrid创建一个自定义的ItemRenderer。在ItemRenderer类中,我们将监听数据源的`data`属性,当...