Flex itemReanderer(转)
Flex中提供了大量用于数据呈现的组件,这其中,以List系列组件最为常见,使用也最频繁,比如ComBoBox、List、Tree、 TileList、DataGrid等等。这些组件有一个共同的特性,那就是支持自定义itemRenderer,这个功能非常强大,能够帮助我们实现很 多实用的功能.
项目渲染器(ItemRenderer)是ListBase类列表控件的重要属性,我们在平常工作中会经常自定义项目渲染器以实现该类控件的特殊显示效果。
默认的项目渲染器取决于组件类。TileList 和 HorizontalList 类使用 TileListItemRenderer;List 类使用 ListItemRenderer。DataGrid 类使用 DataGridColumn 中的 DataGridItemRenderer。
什么是itemRenderer?
itemRenderer,可以理解为数据的表现方式,具体地说,是指显示每一条数据时采用的形式。在使用数据处理类组件时,我们只需要把数据按照一定的格式组织好,然后赋予给组件,剩下的事就不用费心了。
每一个组件都有默认的itemRenderer,比如List组件:
List组件默认的itemRenderer类似Label组件,只简单显示一行文本。如右图所示,红色方框选中的是一个itemRenderer。
本质上,itemRenderer和其它容器类组件没有区别,里面可以包括任意的可视化元素,包括文本、图片、视频等,只要是Flex支持的视觉元素,都可以。
自定义itemRenderer
组件默认的itemRenderer都过于简单,如果想加强表现力,就必须创建个性化的itemRenderer。
自定义itemRenderer有两种方式:一种是嵌入式,直接写在组件的标签中,所有的代码都集中在一个MXML文件中;另一种是把itemRenderer独立出来,形成一个MXML组件或ActionScript类。
看下面图片,我用TileList控件的自定义ItemRenderer实现的效果:
代码下载:
http://files.cnblogs.com/aierong/Air_TestWin.rar
代码说明:
先自定义一个名称为:itemh的MXML
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="145" height="41"
horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image click="this.parentDocument.imgclick(event)"
data="{data.label}" source="assets/tx.JPG" width="40"/>
</mx:VBox>
<mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Label text="{data.label}" toolTip="{data.label}" />
<mx:Image toolTip="点我查看视频" buttonMode="true"
source="assets/camera.JPG" width="16" height="20" />
</mx:VBox>
</mx:HBox>
主调用应用中:
<mx:ArrayCollection id="arrColl_keySetup">
<mx:source>
<mx:Array id="arr_keysetup">
<mx:Object data="00" sel="false" label="aaa"/>
<mx:Object data="11" sel="false" label="bbb"/>
<mx:Object data="22" sel="true" label="ccc"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tlist" maxColumns="1"
dataProvider="{arrColl_keySetup}"
itemRenderer="itemh"
x="34" y="10" width="148">
</mx:TileList>
给TileList的itemRenderer属性赋值itemh,并绑定数组集合类就可以了。
动态指定itemRenderer
利用ClassFactory类可以动态指定itemRenderer
代码如下:
private function initTileList():void
{
this.tlist.dataProvider=this.arrColl_keySetup;
this.tlist.itemRenderer = new ClassFactory(itemh);
}
<mx:TileList id="tlist" maxColumns="1" x="34" y="10" width="148"
creationComplete="initTileList()">
</mx:TileList>
至于怎样在项目渲染器访问主调用应用中的成员,可用parentDocument来引用;
反过来,主调用应用要访问项目渲染器中的成员,一般都是通过在项目渲染器先派发事件,然后在主调用应用中注册事件侦听器来实现。
例如:在项目渲染器中点击图片事件,然后通知主调用应用
<mx:Image click="this.parentDocument.imgclick(event)"
data="{data.label}" source="assets/tx.JPG" width="40"/>
在主调用应用中定义:
public function imgclick(evt:MouseEvent):void
{
var img:Image=evt.currentTarget as Image;
Alert.show(img.data.toString());
}
记住得是public的,不同类之间是无法访问私有方法的
图片点击后效果图片:
其实上面的功能也可以用dispatchEvent来实现
先定义一个事件类
package
{
import flash.events.Event;
public class myEvent extends Event
{
public var data:String;
public function myEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false,data:String="")
{
super(type, bubbles, cancelable);
this.data=data;
}
}
}
然后在itemh中将事件调度到事件流中
<mx:Image click="clickHandler(event)"
data="{data.label}" source="assets/tx.JPG" width="40"/>
private function clickHandler(evt:MouseEvent):void
{
var img:Image=evt.currentTarget as Image;
dispatchEvent(new myEvent("img_click",true,true,img.data.toString()));
}
最后在主调应用中监听事件
private function initTileList():void
{
this.tlist.addEventListener("img_click",onItemimg_click);
}
private function onItemimg_click(evt:myEvent):void
{
Alert.show(evt.data);
}
<mx:TileList id="tlist" maxColumns="1" x="34" y="10" width="148"
dataProvider="{arrColl_keySetup}" itemRenderer="itemh"
creationComplete="initTileList()">
</mx:TileList>
其实也可以用<mx:itemRenderer>和<mx:Component>标签来声明itemRenderer
例如以上代码可以改为:
<mx:Script>
<![CDATA[
import mx.controls.Image;
import mx.controls.Alert;
public function imgclick(evt:MouseEvent):void
{
var img:Image=evt.currentTarget as Image;
Alert.show(img.data.toString());
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl_keySetup">
<mx:source>
<mx:Array id="arr_keysetup">
<mx:Object data="00" sel="false" label="aaa"/>
<mx:Object data="11" sel="false" label="bbb"/>
<mx:Object data="22" sel="true" label="ccc"/>
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:TileList id="tlist" maxColumns="1"
dataProvider="{arrColl_keySetup}"
x="34" y="10" width="148">
<mx:itemRenderer>
<mx:Component>
<mx:HBox width="145" height="41" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:VBox width="40" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Image click="this.parentDocument.imgclick(event)"
data="{data.label}" buttonMode="true" source="assets/tx.JPG" width="40"/>
</mx:VBox>
<mx:VBox width="95" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:Label text="{data.label}" toolTip="{data.label}"/>
<mx:Image toolTip="点我查看视频" buttonMode="true"
source="assets/camera.JPG" width="16" height="20"/>
</mx:VBox>
</mx:HBox>
</mx:Component>
</mx:itemRenderer>
</mx:TileList>
再提供2个比较好的例题
http://blog.minidx.com/2008/10/03/1457.html
http://blog.minidx.com/2008/03/09/559.html
转载于:https://www.cnblogs.com/yangpigao/archive/2012/12/11/2812851.html
Flex itemReanderer(转)相关推荐
- CSS flex 用法
flex 用法: flex 可以在浏览器里点击就有~ 设置了 display: flex 的父元素被称之为 flex 容器(flex container),它的子元素都会以 flex 布局. flex ...
- flex java socket通信
引用:http://developer.51cto.com/art/201003/189791.htm Java socket通信如何进行相关问题的解答呢?还是需要我们不断的学习,在学习的过程中会遇到 ...
- flex和bison实例分析
最近在学习编译原理,利用flex和bison编写一个基于文本识别的简单计算器程序,参考<flex于bison>中内容,对程序进行一些简单的修改,加入Makefile.该计算器程序主要实现识 ...
- Adding a QR Code Reader in Flex on Android
<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="http://ns ...
- 改善FLEX/FLASH性能的小技巧(转)
使用下面的几个改善性能的技巧,如果你使用Flex Builder,那么可以使用调试窗口查看你的程序中关键的几步创建对象和内存回收的情况. 有时细小的调整会造成很大的不同.下面是一小部分能够改善你的程序 ...
- Flex实现页面多态--state对象
在Flex 程序中,引入了状态设计的概念.在一个程序中,按照功能的需求,将界面切分成相对独立的部分.运行过程中,随着用户交互,界面在各个部分之间切换.比如在购物车程序中,登录界面.选购商品界面.购物车 ...
- 【转】Flex Application 初始化顺序
转自:http://www.jexchen.com 大家都知道,我们在编写Flex应用程序时,通常是以<mx:Application>标签作为开头,实际上,Flex应用程序在启动运行的时候 ...
- Flex报错Error #2048: 安全沙箱冲突
Flex+JPA架构,JPA程序迁移,从A服务器到B.其他一切没变,唯一变的就是IP. 前端Flex也就是swf报错Error #2048: 安全沙箱冲突:http://xxx.swf 不能从 xxx ...
- java flex 图片上传_flex上传图片到java服务器
今天弄flex上传图片到java,现在弄成功,中间也经常一点小波折,现记录一下.重点在java侧的实现. flex侧:文件上载到在url参数中传递的URL.该URL必须是配置为接受上载的服务器脚本.F ...
最新文章
- lvs 负载均衡原理及其配置之 nat 模式
- vue 使用font-awesome 只需两步
- 机器学习原理与算法(六) 支持向量机
- 编译后没有taget文件夹_matconvnet安装、编译、配置
- 信息学奥赛一本通 1020:打印ASCII码 | OpenJudge NOI 1.2 07
- 朱啸虎:自己来说可以把一小部分资产购买比特币,作为资产配置是可以考虑的
- 【网络安全面试题】——如何渗透测试文件目录穿越
- axios 是如何封装 HTTP 请求的
- 两大方案,只为写出更安全的代码!
- chrome无法打开某些网页,但safari可以
- 如何解决jsp中文乱码的问题
- VS生成的C++项目常用目录设置
- 预测未来的神技---马尔科夫模型
- VMware View 5.0-10–远程图形工作站配置篇
- 苹果税务信息填写教程
- 如何制作资产编号标签
- 李国杰披露AMD技术转让 只能看不能吃(全文版)
- android 仿iphone多任务管理效果,别羡慕苹果了,安卓悬浮神器比 iPhone 好用太多!...
- MATLAB使用radon函数和iradon函数计算图像的投影并从投影中重构图像
- 谷歌百度脸书IBM,人工智能四巨头2014盘点
热门文章
- 读WAF与IPS的区别总结之摘抄
- CentOS下如何完全卸载MySQL?解决卸载不干净的问题
- 给大家推荐对Redis分析讲解比较详细的大牛
- 决策树数学原理(ID3,c4.5,cart算法)
- Spark Streaming 实战案例(二) Transformation操作
- dojo中的dojo/on
- 用一张白纸推导出 RAFT 算法
- MapReduce Job集群提交过程源码跟踪及分析
- 云南旅游市场整治呈压倒性态势 旅游人次及年收入双增长
- Player启动时提示 System.InvalidOperationException:无法加载计数器名称数据