如果您要顯示大量 itemRenderer－無論在 DataGrid 還是在 AdvancedDataGrid 中－如果無法有效編寫這些 itemRenderer, 您的應(yīng)用程序性能可能受到負(fù)面影響。以下是一些可能有所幫助的提示:

• 限制使用 itemRenderer 的列數(shù)。是否真的需要將每個(gè)列作為自定 itemRenderer？有時(shí)需要這樣, 光芒太強(qiáng)是否會(huì)令用戶頭暈眼花？
• 嘗試不要過于頻繁地更改 itemRenderer 中元素的樣式。如果需要切換樣式 (例如, 綠色用于正值, 紅色用于負(fù)值) , 可考慮為這些樣式創(chuàng)建兩個(gè)控制預(yù)設(shè)并使其中一個(gè)可見。更改樣式 Flex 中比較費(fèi)時(shí)的任務(wù)之一。
• 不要將 Containers 用作 itemRenderer 的基礎(chǔ)。容器會(huì)占用大量資源。少量使用它們, 效果還不錯(cuò); 但是根據(jù) UIComponent 編寫 itemRenderer 效率更高。

切換樣式

以下 itemRenderer 根據(jù)數(shù)據(jù)字段的值切換組件。

<mx:Canvas><mx:Script><![CDATA private function lessThanZero() : Boolean {return data.price < 0; }]]></mx:Script><mx:Label text="{data.price}" color="#FF0000" visible="{lessThanZero()}" /><mx:Label text="{data.price}" color="#00FF00" visible="{!lessThanZero()}" /> </mx:Canvas>

這比設(shè)置樣式要快。要注意的其他事項(xiàng)包括：

• 避免數(shù)據(jù)綁定到樣式。更改樣式不僅比大多數(shù)操作要慢, 而且在它上面添加數(shù)據(jù)綁定代碼只會(huì)使它更糟。
• 使用 Canvas 或擴(kuò)展 ListItemRenderer 或作為 itemRenderer 的根。這允許您將控制放在各自上方。

擴(kuò)展 UIComponent

目前編寫 itemRenderer 最有效的方式是使用 ActionScript 類擴(kuò)展 UIComponent。您可以全面控制代碼, 并且渲染器也可以盡可能高效。

從上例切換樣式開始, 編寫一個(gè)擴(kuò)展 UIComponent 的簡單 itemRenderer。

package renderers {import mx.controls.listClasses.IListItemRenderer;import mx.core.UIComponent;public class PriceItemRenderer extends UIComponent implements IListItemRenderer{public function PriceItemRenderer(){super();}} }

您會(huì)發(fā)現(xiàn)我不僅編寫這個(gè)類來擴(kuò)展 UIComponent, 還由它實(shí)施 IListItemRenderer 接口。這樣做是有必要的, 因?yàn)?List 控制將需要任何渲染器實(shí)施該接口, 否則您會(huì)收到運(yùn)行時(shí)錯(cuò)誤, 因?yàn)榱斜韲L試將渲染器轉(zhuǎn)換為該接口。

如果閱讀 IListItemRenderer 的相關(guān)文檔, 您會(huì)發(fā)現(xiàn)這是一個(gè)許多其他接口的集合, UIComponent 會(huì)為您實(shí)施其中的大多數(shù)。但有一個(gè) IListItemRenderer 擴(kuò)展的接口是 UIComponent 不實(shí)施的：IDataRenderer。這需要您添加代碼, 為 itemRenderer 類提供您一直使用的 data 屬性。

如果您嘗試不實(shí)施 IDataRenderer 就使用這個(gè)類, 則編譯代碼時(shí)會(huì)收到以下錯(cuò)誤：

• 1044：類 renderers:PriceItemRenderer 未實(shí)施名稱空間 mx.core:IDataRenderer 中的接口方法 get data。

編輯這個(gè)類并將它更改為以下內(nèi)容：

package renderers {import mx.controls.listClasses.IListItemRenderer;import mx.core.UIComponent;import mx.events.FlexEvent;public class PriceItemRenderer extends UIComponent implements IListItemRenderer{public function PriceItemRenderer(){super();}// Internal variable for the property value.private var _data:Object;// Make the data property bindable.[Bindable("dataChange")]// Define the getter method.public function get data():Object {return _data;}// Define the setter method, and dispatch an event when the property// changes to support data binding.public function set data(value:Object):void {_data = value;dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));}} }

我直接使用 IDataRenderer 的 Flex 文檔中的代碼, 這樣您都不用自己鍵入它。

移除它后, 您可以加入兩個(gè)標(biāo)簽。

添加變量用于存放這兩個(gè)標(biāo)簽。

private var posLabel:Label; private var negLabel:Label;

將 set data 函數(shù)修改為調(diào)用 invalidateProperties()。這很重要, 因?yàn)楦臄?shù)據(jù)必須更改標(biāo)簽中的文本以及它們的可視性。

public function set data(value:Object):void {_data = value;invalidateProperties();dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));}

調(diào)用 invalidateProperties() 會(huì)告知 Flex 框架在適當(dāng)?shù)臅r(shí)間調(diào)用 commitProperties() 函數(shù)。

覆蓋 createChildren() 并創(chuàng)建標(biāo)簽, 添加它們以顯示組件列表。注意, 除了創(chuàng)建標(biāo)簽外, 還會(huì)設(shè)置它們的樣式和 visible 屬性。

override protected function createChildren() : void { super.createChildren();posLabel = new Label(); posLabel.visible = false; posLabel.setStyle("color", 0×00FF00); addChild(posLabel); negLabel = new Label(); negLabel.visible = false; negLabel.setStyle("color", 0xFF0000); addChild(negLabel); }

覆蓋 commitProperties() 以設(shè)置標(biāo)簽的文本和可視性。過去, 您一直通過覆蓋 set data 進(jìn)行這類更改, 如果您喜歡, 也可以在這個(gè)類中那樣做。

override protected function commitProperties():void { super.commitProperties();posLabel.text = data.price;negLabel.text = data.price; posLabel.visible = Number(data.price) > 0; negLabel.visible = Number(data.price) < 0; }

覆蓋 updateDisplayList() 以設(shè)置標(biāo)簽大小并進(jìn)行定位。您必須設(shè)置標(biāo)簽大小, 因?yàn)樗鼈兊哪J(rèn)大小為 0×0。這是 Container 類將為您做的另一件事。由于這個(gè) itemRenderer 十分簡單, 您只需將標(biāo)簽大小設(shè)置為與 itemRenderer 大小匹配即可。

override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ) : void { super.updateDisplayList(unscaledWidth, unscaledHeight); posLabel.move(0,0); posLabel.setActualSize(unscaledWidth,unscaledHeight); negLabel.move(0,0); negLabel.setActualSize(unscaledWidth, unscaledHeight); }

所有這些只能做到這點(diǎn)似乎有點(diǎn)復(fù)雜, 但是請(qǐng)記住一點(diǎn), 使用容器增加的代碼要比這多得多。

UIComponent 附注

UIComponent 類是所有可視 Flex 組件 (控制和容器) 的基礎(chǔ)。以下是將 UIComponent 用作 itemRenderer 的一些相關(guān)提示。

• UIComponent 對(duì)其子代 (如 Container) 沒有版面限制。您必須自己進(jìn)行子代定位并調(diào)整大小。
• 還可以超出 updateDisplayList() 中指定的大小繪制圖形和位置子代。
• 如果準(zhǔn)備在列表中使用 variableRowHeight, 您還應(yīng)覆蓋 measure() 函數(shù), 告知列表 itemRenderer 有多大。
• 要將 UIComponent 用作 itemRenderer, 您必須實(shí)施 IDataRenderer。
• 要使用 listData 屬性, 您必須實(shí)施 IDropInListItemRenderer; 本系列之前的文章中討論過這個(gè)操作。

后續(xù)工作

有關(guān) Flex itemRenderer 的系列到此結(jié)束。希望您通過這些文章了解到使用 itemRenderer 可以在 Flex 應(yīng)用程序中做些什么以及如何處理它們的數(shù)據(jù)、外觀和行為的最佳做法。您可以在 Adobe Flex 3 文檔*中找到 Flex itemRenderer 的更多相關(guān)信息。

轉(zhuǎn)載于:https://www.cnblogs.com/hainange/archive/2009/10/22/6153062.html

總結(jié)

以上是生活随笔為你收集整理的理解Flex itemRenderer(5)--效率的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。