Flex 4 项目渲染器

编程之家收集整理的这篇文章主要介绍了Flex 4 项目渲染器编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

     昨晚看了flex4中项目渲染器itemRenderer的知识,今天自己动手写一个,增强记忆,做一个简单类似 网易视频 http://v.163.com/video/2011/1/1/6/V6ORP1516.html#ld=V5NV96K0F   "纵横天下"版块里的那个貌似是用List控件做的东东。

    打开 flash builder ,建一个名为 List 的项目,主文件 List.mxml,建一个类型为 ArrayCollection 的变量 datas,变量中的每一组值都保存了一个图片和对应标题的信息。建一个 List控件,属性 dataProvider 绑定之前建的变量datas。属性 itemRenderer 的值可以是系统现有的两个渲染器(DefaultItemRenderer和DefaultComplexItemRenderer)或者是自定义的渲染器,值得一提的是,DefaultItemRenderer 只能显示一些简单的东西,例如:字符串,DefaultComplexItemRenderer 只能显示一些UI控件。也就是说不可以同时显示 字符串和图片。这时,可以使用 属性 itemRendererFunction值等于一个函数,在函数中对字符串和图片进行判断,然后分别返回对应的 渲染器(DefaultItemRenderer OR DefaultComplexItemRenderer)就可以了,如下:

渲染器每次循环都会调用这个函数函数参数 item 里面保存着每次迭代的当前元素,我的变量datas里面保存的都是字符串的信息,所以这个用不着,只是提一下。

     另一种方法是使用自定义的渲染器,在List控件里面加入如下的代码:

上面的代码在List控件里设置了 itemRenderer 属性属性的值为一个 ItemRenderer 的实例,实例里面包含了 Label 和 Image 两个控件,在ItemRenderer里面的 data 变量,保存着每次迭代的当前元素,设置 Label 的属性 text 等于 data.name , Image 的属性 source 等于 data.image 。从而设置了每个元素的 标题图片,以下是全部的代码

 

 执行后的效果图:

代码算是基本完成了,但是想想...,如果其它页面也有需要列出类似这种List,是不是需要复制上面的自定义的渲染器那段代码。所以,应该考虑代码重用的问题,把自定义的渲染器做成一个自定义的组件,新建一个基于 spark.components.supportClasses.ItemRenderer 的mxml组件文件ListItemRenderer.mxml,把代码

从List.mxml文件里面剪切到新建的ListItemRenderer.mxml文件

修改List.mxml文件里的List控件代码如下:

设置List 的属性 itemRenderer 等于自定义的渲染器,执行List.mxml文件显示结果和之前的一样。 = =!

总结

以上是编程之家为你收集整理的Flex 4 项目渲染器全部内容,希望文章能够帮你解决Flex 4 项目渲染器所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的Flex相关文章

获取网络发布的webservice wsdl: http://www.flash-mx.com/ws/months.cfc?wsdl   GetMonths.mxml   <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"         layout="
在开发四国军棋的游戏中,通过 flex联机游戏开发- 四国军棋游戏(五)-提炼棋类开发api,我们提炼出了第一个关于棋类游戏开发的api-FlexChessAPI,这个api设计的方针就是基于状态机与事件驱动的flex主要机制,使开发工作简洁易行。现在,我们第一次使用这个api来开发一款中国象棋游戏,对一个成熟的开发工作者来说,我相信,你大概只需要半天时间就可以让这个象棋游戏运作起来。 现在,我们
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#FFFFFF" applicationComplete="registerGlobalKeyHandler()">
flex4 beta发布了,它是自flex3以来的重大改革。flex4 beta 提供了一种新的组件和皮肤的架构。作为一个flex3的开发者,当你用flex4 beta编译你的flex3应用时你应该不会遇到太大的挑战,因为flex4 beta的一个目标就是保持与flex3的兼容。在这篇文章里我会提供关于flex4 beta主体带的一个大概的浏览,介绍一下Flex3到Flex4架构上的区别,以及在组
一 超酷皮肤主题推荐: 1. kingnarestyle: 下载地址:http://code.google.com/p/kingnarestyle/ 2.Carbon: 下载地址:http://www.fillcolors.com/post.cfm/carbon 3.Aqua: 下载地址:http://www.fillcolors.com/post.cfm/aqua 4.Rainbow: 下载地址
      昨天下载了一个新版本flex 4.1 sdk 包含升级adobe air 2.0 的版本的sdk ,当我换成了这个版本sdk 发现当存在文本的时候,垂直的布局方式存在一些差异。4.0版本则没有事情。不知道究竟发生了什么事情?做了一个简单的实验。看看差别究竟在哪里?    但是反而在同学间又没有这样的问题存在,十分究竟。记录一下。   <s:Group> <s:Grou
     类成员有四种修饰符: public  internal  dynamic(实现运行时添加类和属性的方法  dynamic class Foo)和final。 类成员可以有:public ,private, internal, protected     as文件的组织结构: package 中包含一个和文件名相同的public类,在package外有几个不是public的类,作为辅助类
还原问题:   request.setCharacterEncoding("UTF-8");   response.setContentType("text/html;charset=UTF-8");   request.setCharacterEncoding("UTF-8");       response.getOutputStream().println("中文");     java.i
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注