- 浏览: 316075 次
- 性别:
- 来自: 杭州
文章分类
最新评论
-
dsjt:
oracle(UTF-8) 某列类型是varchar2(400 ...
varchar2和nvarchar2和char最大长度 -
grofis:
你他妈真是个大傻逼啊。。。。这个东西写出来之后你也不看了吧
unable to bind to property on class (class is not an IEventDispatcher) -
continentlu:
this.getHibernateTemplate().exe ...
Cannot get a connection, pool error Timeout waiting for idle object -
a8928959:
我按照你的这样配置的,也是这个错误,请问有什么解决方法吗
fckeditor绝对路径的配置以及源文件的修改 -
红叶2012:
好
htmlparser
http://rss.9ria.com/?p=3640
DataGrid和AdvancedDataGrid应该是Flex企业项目中最常用的组件了,今天开始写一些优化技巧,这些技巧直接影响DataGrid的渲染效率。
ItemRenderer优化。
ItemRenderer是我们在扩展DataGrid单元格功能时需要扩展开发最多的东西,网络上有很多ItemRenderer的例子,但是大部分来说都是从方便开发的角度来使用的ItemRenderer而忽略了效率问题。那么到底何种情况是看似没问题,但实际上却牺牲了效率的呢?比如:
1. 我们需要显示一个图片Icon,然后紧接着显示一个label。也许我们会使用下面这样的代码(摘自Adobe开发者博客2008年的一篇文章, http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html)
这样写从正确与否的角度说完全没有问题,我们可以有两种写法,最简单的就是上面这样,在标签内直接写Itemrenderer。第二种的是创建一个新mxml文件继承于HBox取名叫XXXXRenderer,然后加入Image和Text控件,这种分离的写法也适合动态创建columns时使用。
但是不管是哪种,都已经忽略了效率问题 (咱们今天的重点)。在Itemrenderer里使用Container的子类是很消耗资源的做法,相反高效的做法是直接继承UIComponent,在UIComponent里加入Image和Text控件。效率问题在小数据量,只有几列Column的时候是不容易发现的。但是如果你需要一次显示千条甚至万条的数据的,多列column都包含复杂Itemrenderer的话,效率问题就不得不考虑的(你也可以考虑为每个客户购置牛逼的机器)。就这个例子使用UIComponent来说,你会感觉出来Flex在渲染Datagrid时“假死”的时间会缩短,如果你机器太好,感觉不是很明显的话,尝试滑动滚动条,滚动条的平滑程度很真实的反应了两种情况下grid每个Cell的创建时间。
下面是我用UIComponent创建同样ItemRenderer的代码
以上是第一种情况,咱们看第二种。
2. 习惯性的使用Label, Text, TextArea来作为ItemRenderer来方便改变样式,比如背景,HTML显示等。
比如这个例子http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/
非常正确的代码,但是却是影响效率的做法,不管是DataGridItemRenderer或者AdvancedDataGridItemRenderer. 它们是继承于UITextField. 相较于Label, Text或者TextArea来说。相当的轻量级,所以我们只需要继承于DataGridItemRenderer或者AdvancedDataGridItemRenderer,对它就行扩展同样可以实现样式改变,HTML显示的功能。
上面博客中是这么写的
而从优化效率的角度来说,可以有个简单的方法这么写,继承DataGridItemRenderer,覆盖validateProperties.(我没实际运行过,不过肯定是没问题的)
总结起来的话就简单的两句点
1. 不要使用Container做为ItemRenderer的父类,继承UIComponent. Container能做的,UIComponent也能做(多写一点代码)
2. 如果只作为数据显示效果而使用ItemRenderer。不必继承label, Text或者TextArea. 直接继承DataGridItemRenderer或AdvancedDataGridItemRenderer进行扩展。
下面的demo展示了我所说的第一种情况的AdvancedDataGrid的执行效率。左边是使用了UIComponent,右边使用了第一段代码的方式。为了使差别更明显,我在每个Renderer里放置了两张图片,并且显示了3列,1万条数据,虽然左边的滚动条滑动速度也不是很流畅,但是相对于右边来说差别已经很明显了。右键查看源代码
http://www.flextheworld.com/demo/grid-itemrenderer/Test.html (0)
DataGrid和AdvancedDataGrid应该是Flex企业项目中最常用的组件了,今天开始写一些优化技巧,这些技巧直接影响DataGrid的渲染效率。
ItemRenderer优化。
ItemRenderer是我们在扩展DataGrid单元格功能时需要扩展开发最多的东西,网络上有很多ItemRenderer的例子,但是大部分来说都是从方便开发的角度来使用的ItemRenderer而忽略了效率问题。那么到底何种情况是看似没问题,但实际上却牺牲了效率的呢?比如:
1. 我们需要显示一个图片Icon,然后紧接着显示一个label。也许我们会使用下面这样的代码(摘自Adobe开发者博客2008年的一篇文章, http://www.adobe.com/devnet/flex/articles/itemrenderers_pt1.html)
<mx:DataGrid x="29" y="303" width="694" height="190" dataProvider="{testData.book}" variableRowHeight="true"> <mx:columns> <mx:DataGridColumn headerText="Pub Date" dataField="date" width="85" /> <mx:DataGridColumn headerText="Author" dataField="author" width="125"/> <mx:DataGridColumn headerText="Title" dataField="title"> <mx:itemRenderer> <mx:Component> <mx:HBox paddingLeft="2"> <mx:Script> <![CDATA[ override public function set data( value:Object ) : void { super.data = value; var today:Number = (new Date()).time; var pubDate:Number = Date.parse(data.date); if( pubDate > today ) setStyle("backgroundColor",0xff99ff); else setStyle("backgroundColor",0xffffff); } ]]> </mx:Script> <mx:Image source="{data.image}" width="50" height="50" scaleContent="true" /> <mx:Text width="100%" text="{data.title}" /> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid>
这样写从正确与否的角度说完全没有问题,我们可以有两种写法,最简单的就是上面这样,在标签内直接写Itemrenderer。第二种的是创建一个新mxml文件继承于HBox取名叫XXXXRenderer,然后加入Image和Text控件,这种分离的写法也适合动态创建columns时使用。
但是不管是哪种,都已经忽略了效率问题 (咱们今天的重点)。在Itemrenderer里使用Container的子类是很消耗资源的做法,相反高效的做法是直接继承UIComponent,在UIComponent里加入Image和Text控件。效率问题在小数据量,只有几列Column的时候是不容易发现的。但是如果你需要一次显示千条甚至万条的数据的,多列column都包含复杂Itemrenderer的话,效率问题就不得不考虑的(你也可以考虑为每个客户购置牛逼的机器)。就这个例子使用UIComponent来说,你会感觉出来Flex在渲染Datagrid时“假死”的时间会缩短,如果你机器太好,感觉不是很明显的话,尝试滑动滚动条,滚动条的平滑程度很真实的反应了两种情况下grid每个Cell的创建时间。
下面是我用UIComponent创建同样ItemRenderer的代码
package renderer { import mx.controls.Label; import mx.controls.Text; import mx.controls.dataGridClasses.DataGridListData; import mx.controls.listClasses.BaseListData; import mx.controls.listClasses.IDropInListItemRenderer; import mx.controls.listClasses.IListItemRenderer; import mx.core.IDataRenderer; import mx.core.UIComponent; import mx.core.UIComponentGlobals; import mx.events.FlexEvent; import mx.managers.ILayoutManagerClient; import mx.styles.IStyleClient; import spark.components.Image; public class DataGridExampleRenderer extends UIComponent implements IListItemRenderer,IDropInListItemRenderer { private var _listData:DataGridListData; private var _data:Object; private var text:Text; private var img:Image; public function DataGridExampleRenderer() { super(); } override protected function createChildren():void{ super.createChildren(); text = new Text(); img = new Image(); this.addChild(text); this.addChild(img); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{ super.updateDisplayList(unscaledWidth,unscaledHeight); text.setActualSize(unscaledWidth/2,unscaledHeight); img.setActualSize(unscaledWidth/2,unscaledHeight); text.move(unscaledWidth/2,0); } override protected function commitProperties():void { super.commitProperties(); if(listData){ text.text = data[(listData as DataGridListData).dataField]; img.source = data.img; }else{ text.text = "" } } [Bindable("dataChange")] public function get data():Object { return _data; } public function set data(value:Object):void { _data = value; invalidateProperties(); dispatchEvent(new FlexEvent("dataChange")); } public function get listData():BaseListData { return _listData; } public function set listData(value:BaseListData):void { _listData = DataGridListData(value); } } }
以上是第一种情况,咱们看第二种。
2. 习惯性的使用Label, Text, TextArea来作为ItemRenderer来方便改变样式,比如背景,HTML显示等。
比如这个例子http://blog.flexexamples.com/2007/08/20/formatting-a-flex-datagrid-control-using-a-custom-item-renderer/
非常正确的代码,但是却是影响效率的做法,不管是DataGridItemRenderer或者AdvancedDataGridItemRenderer. 它们是继承于UITextField. 相较于Label, Text或者TextArea来说。相当的轻量级,所以我们只需要继承于DataGridItemRenderer或者AdvancedDataGridItemRenderer,对它就行扩展同样可以实现样式改变,HTML显示的功能。
上面博客中是这么写的
package { import mx.controls.Label; import mx.controls.listClasses.*; public class PriceLabel extends Label { private const POSITIVE_COLOR:uint = 0x000000; // Black private const NEGATIVE_COLOR:uint = 0xFF0000; // Red override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { super.updateDisplayList(unscaledWidth, unscaledHeight); /* Set the font color based on the item price. */ setStyle("color", (parseFloat(data.@price) <= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR); } } }
而从优化效率的角度来说,可以有个简单的方法这么写,继承DataGridItemRenderer,覆盖validateProperties.(我没实际运行过,不过肯定是没问题的)
override public function validateProperties():void { super.validateProperties(); if (listData) { var grid:DataGrid = DataGrid(listData.owner); var column:DataGridColumn = grid.columns[listData.columnIndex]; htmlText = parseFloat(data.@price) <= 0? "<font color='#ff0000'>"+data[column.dataField]+"</font>":data[column.dataField]; } }
总结起来的话就简单的两句点
1. 不要使用Container做为ItemRenderer的父类,继承UIComponent. Container能做的,UIComponent也能做(多写一点代码)
2. 如果只作为数据显示效果而使用ItemRenderer。不必继承label, Text或者TextArea. 直接继承DataGridItemRenderer或AdvancedDataGridItemRenderer进行扩展。
下面的demo展示了我所说的第一种情况的AdvancedDataGrid的执行效率。左边是使用了UIComponent,右边使用了第一段代码的方式。为了使差别更明显,我在每个Renderer里放置了两张图片,并且显示了3列,1万条数据,虽然左边的滚动条滑动速度也不是很流畅,但是相对于右边来说差别已经很明显了。右键查看源代码
http://www.flextheworld.com/demo/grid-itemrenderer/Test.html (0)
<mx:DataGridColumn dataField="atc" headerText="攻击" itemRenderer="OurItemRenderer" />
发表评论
-
关于log4j的日志文件保存位置解决方案
2013-11-25 14:43 557http://www.blogjava.net/freeman ... -
mysql 分片详解
2013-10-21 10:28 906一种以ID特征为依据的数据分片(Sharding)策略 ht ... -
flex 实现sql语句关键字高亮显示
2013-07-05 14:06 1645<?xml version="1.0" ... -
8种Nosql数据库系统对比
2013-06-07 11:24 677http://blog.jobbole.com/1344/ ... -
生成大量的测试数据的三种方法,1写sql,2工具plsql,3LoadRunner
2013-06-06 10:25 1021http://dolphin-ygj.iteye.com/bl ... -
AdvancedDataGrid自定义排序
2013-03-29 16:41 995AdvancedDataGrid自定义排序问题之前在DataG ... -
AdvancedDataGrid 自定义排序
2013-03-29 16:41 737AdvancedDataGrid自定义排序问题之前在DataG ... -
flex combox tooltip
2013-03-28 13:57 11181、显示提示 设置Prompt属性可以为Combobox添加一 ... -
循环删除ArrayCollection项
2013-03-15 15:29 698public function init():void{ ... -
TabNavigator tab标签修改颜色
2013-02-25 13:46 977TabNavigator有个方法 “getTabAt(inde ... -
出租房接wife
2013-01-14 09:08 7611:拿个网线插自己电脑和TPLINK上(LAN端口),输入ad ... -
在Eclipse中配置tomcat
2013-01-09 17:36 7351:下载tomcat插件 http://blog.csdn.n ... -
FLEX内存释放优化原则
2012-07-10 17:29 770FLEX内存释放优化原则: 1. 被删除对象在外部的所有引用一 ... -
flex tree 滚动条定位
2012-06-20 14:57 963滚动的点一定要确保处于打开状态 this.validateN ... -
flex label换行
2012-06-14 10:31 3286有时候在label上显示的内容太多,想换行,可以采用如下两种方 ... -
itemRenderer获取DataGrid对象
2012-05-24 15:52 923package com.hundsun.job.view.jo ... -
itemRenderer 渲染后导致拖拽失效
2012-04-17 17:03 706datagrid支持拖拽 dropEnabled=" ... -
Flex 递归删除XMLList中节点
2012-03-09 11:07 4831这个问题思考了很久,写个很多种递归,也走了很多弯路,为了让你们 ... -
Flex Object 属性遍历
2012-03-01 14:09 2661arr是包含object的数组 var str:String ... -
退出清空缓存flex shareObjects清除
2012-02-20 09:08 3464<?xml version="1.0&qu ...
相关推荐
flex中经常会使用到渲染器,这里简要介绍一下渲染器的一些知识
详细介绍Flex的项目呈现器的各种初级用法以及高级用法,相当实用。
关于flex的itemRenderer的介绍,还算比较详细。
理解_Flex_itemRenderer 理解_Flex_itemRenderer 理解_Flex_itemRenderer
用FLEX4做的项呈现器,仿雅虎聊天界面。 需要的字段为userId、nikeName、sex…… 你可以自行添加 声明,次呈现器只做模版使用。
提供: 内渲染器的使用方法。 通过2个List的 界面 自己看效果理解。
checkbox和combobox作为DataGrid的itemRenderer和headerRenderer 包括全选,多选,等。。。
通过两种方法继承List组件的IconItemRenderer,实现在每个item项中添加组件,如button等
flex itemRenderer 渲染机制的概念和使用
解决Flex内联itemRenderer的例子
Flex项呈示器自定义及使用实例,展示用户信息,包括头像及等级信息。与博客Flex之旅--项呈示器ItemRenderer对应
提供: ActionScript 自定义 ItemRenderer 渲染器的基本方法 与上一个例子 效果一样。
itemRenderer里面的内容 获取技巧。
FLEX4实践—动态生成DataGrid及应用客户化itemRenderer.doc
NULL 博文链接:https://taomujian.iteye.com/blog/316882
Flex provides a number of controls to display large amounts data in a variety of ways. There is the List control itself, the DataGrid, the Tree, and the visualization classes, which include the charts...
NULL 博文链接:https://iamcloo.iteye.com/blog/1164571
NULL 博文链接:https://liugang-ok.iteye.com/blog/1135551
NULL 博文链接:https://baiyejianxin.iteye.com/blog/823229
NULL 博文链接:https://hcty31.iteye.com/blog/1190932