注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

 
 
 

日志

 
 
关于我

风流茶说合,酒是色媒人,古往今来,浪涛依旧,我辈今朝,叱咤风云,

网易考拉推荐

Flex3.0之itemRenderer  

2009-12-16 12:09:59|  分类: flex |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
                                             

Flex中提供了大量用于数据呈现的组件,这其中,以List系列组件最为常见,使用也最频繁,比如ComBoBox、List、Tree、TileList、DataGrid等等。这些组件有一个共同的特性,那就是支持自定义itemRenderer,这个功能非常强大,能够帮助我们实现很多实用的功能,本文将介绍itemRenderer的相关知识和具体应用。

什么是itemRenderer?

itemRenderer,可以理解为数据的表现方式,具体地说,是指显示每一条数据时采用的形式。在使用数据处理类组件时,我们只需要把数据按照一定的格式组织好,然后赋予给组件,剩下的事就不用费心了。

每一个组件都有默认的itemRenderer,比如List组件:

List组件默认的itemRenderer类似Label组件,只简单显示一行文本。如右图所示,红色方框选中的是一个itemRenderer。

本质上,itemRenderer和其它容器类组件没有区别,里面可以包括任意的可视化元素,包括文本、图片、视频等,只要是Flex支持的视觉元素,都可以。

自定义itemRenderer

组件默认的itemRenderer都过于简单,如果想加强表现力,就必须创建个性化的itemRenderer。

自定义itemRenderer有两种方式:一种是嵌入式,直接写在组件的标签中,所有的代码都集中在一个MXML文件中;另一种是把itemRenderer独立出来,形成一个MXML组件或ActionScript类。

下面我们还是以List组件为例,这里为了方便测试,重新定义了数据结构。每条数据都是一个XML节点,包含了下面的这些信息:

然后创建一个新的MXML组件ProductltemRenderer.mxml,扩展了Canvas容器,内容如下:

请注意看上面的代码:两个组件Image和Label的关键属性都和data对象的属性值绑定起来。“data”对象从何而来?它正是itemRenderer能够和组件保持独立的关键点,是List组件和itemRenderer进行数据交换的途径。

Canvas容器和其它所有的容器类组件一样,都定义了名为“data”的存取器,也就是setter和getter函数:

组件通过这个接口将数据传给itemRenderer,从而实现了数据表现形式和逻辑处理的分离。同时,data存取器添加了数据绑定的支持,可以直接拿来操作。为了适应所有的数据类型,getter的返回类型被设为Object,保证数据的统一。比如这里,通过data可以获取三个属性:title、version和logo。 

  评论这张
 
阅读(492)| 评论(2)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017