解析Flex渲染器的使用

在学习Flex的过程中,你可能会遇到Flex渲染器的概念,这里和大家分享一下Flex渲染器的使用,在Flex要显示特定的格式完全可以通过Flex渲染器来自定义。

网站的建设创新互联专注网站定制,经验丰富,不做模板,主营网站定制开发.小程序定制开发,H5页面制作!给你焕然一新的设计体验!已为成都宴会酒店设计等企业提供专业服务。

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常频繁,可以让用户自行定义数据的显示格式,做过.NET开发的朋友我想都知道数据控件中的ItemTemplate,我个人认为Flex中的Flex渲染器和.NET中的ItemTemplate从功能上来说相差不大,在Flex要显示特定的格式完全可以通过Flex渲染器来自定义。

在《使用TileList+TitleWindowt组件开发聊天表情功能》这文章里其实就已经用到了Flex渲染器,只是没有专们提出来介绍,这里使用的是内部ItemRenderer,除此之外我们还可以使用外部ItemRenderer。故名思意内部ItemRenderer就是直接嵌套在Flex内部的,外部Flex渲染器则是将要显示的效果通过外部组件或是外部类来进行定义开发。

 
 
 
  1. dataProvider="{faceArray}"itemClick="onItemClick(event)"> 
  2.  
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  

 如上则是使用的内部ItemRenderer,通过在Flex组件的内部定义项目渲染器(ItemRenderer)。如果想使用外部Flex渲染器的方式实现呢,则需要定义一个外部Flex渲染器,将Renderer的格式在自定义的类或组件中去实现,如下:

 
 
 
  1. package  
  2. {  
  3. importmx.core.UIComponent;  
  4.  
  5. publicclassFaceRendererextendsUIComponent  
  6. {  
  7. privatevarimageUrl:Image;  
  8.  
  9. publicfunctionFaceRenderer()  
  10. {  
  11. super();  
  12. }  
  13.  
  14. protectedoverridefunctioncreateChildren():void  
  15. {  
  16. imageUrl=newImage();  
  17. }  
  18.  
  19. protectedoverridefunctioncommitProperties():void  
  20. {  
  21. super.commitProperties();  
  22. imageUrl.source=data.ImageUrl;  
  23. }  
  24. }  
  25. }  
  26.  

 在Flex组件中通过Flex渲染器属性引用自定义的外部渲染器就OK了,最终效果就是《使用TileList+TitleWindowt组件开发聊天表情功能》这文章里的效果。

 
 
 
  1. dataProvider="{faceArray}" 
  2. itemClick="onItemClick(event)" 
  3. itemRenderer="FaceRenderer"> 
  4.  

【编辑推荐】

  1. 解析Flex组件中Label组件的用法
  2. Flex主题创建及支持的样式设置方式
  3. 全面认识Flex应用程序的六大元素
  4. 揭开Flex正则表达式的神秘面纱
  5. Flex数据绑定及其使用频繁的几种情况 

分享题目:解析Flex渲染器的使用
网站网址:http://www.shufengxianlan.com/qtweb/news41/261241.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联