Flex渲染機制中外部Flex渲染器怎么用

這篇文章主要為大家展示了“Flex渲染機制中外部Flex渲染器怎么用”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“Flex渲染機制中外部Flex渲染器怎么用”這篇文章吧。

Flex渲染機制之外部Flex渲染器

這種Flex渲染器的MXML標記和ActionScript代碼與使用該渲染器的列表位于同一文件中。代碼與文件中的其余代碼內聯。您應該還記得我說過,應該將內聯渲染器視作單獨的類。事實上,Flex編譯器提取這些內聯代碼并為您創建類。內聯渲染器的優勢在于代碼與列表位于同一位置,但是如果渲染器變得復雜時,這又變成了劣勢。本文中我將向您展示如何自己創建類。

將Flex渲染器提取到一個外部文件有幾個優勢:

◆渲染器可輕松用于多個列表中

◆代碼更容易維護

◆可以使用FlexBuilder的“設計”視圖草擬出最初的渲染器

MXML渲染器

在第1部分中,您看到有一個復雜的渲染器用于DataGrid:

<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Title"dataField="title"> <mx:itemRenderer> <mx:Component> <mx:HBoxpaddingLeftmx:HBoxpaddingLeft="2"> <mx:Script> <![CDATA[  overridepublicfunctionsetdata(value:Object):void{  super.data=value;  vartoday:Number=(newDate()).time;  varpubDate:Number=Date.parse(data.date);  if(pubDate>today)setStyle("backgroundColor",0xff99ff);  elsesetStyle("backgroundColor",0xffffff);  }  ]]>  </mx:Script> <mx:Imagesourcemx:Imagesource="{data.image}"width="50"height="50" scaleContent="true"/> <mx:Textwidthmx:Textwidth="100%"text="{data.title}"/> </mx:HBox> </mx:Component>  </mx:itemRenderer> </mx:DataGridColumn>

◆Flex渲染器基于HBox,包含一個Image和一個Text,并且根據項目記錄的pubDate字段設置背景色。可以使用以下步驟將同一Flex渲染器編寫為一個外部文件:

如果您使用FlexBuilder,請新建一個MXMLComponent文件(我將我的文件命名為GridColumnSimpleRenderer,您可以隨意命名),將根標記設置為HBox。不必擔心大小。

如果您只使用SDK,請新建一個MXML文件(將它命名為GridColumnSimpleRenderer.mxml),將根標記設置為HBox。
在文件打開時,復制<mx:HBox>與</mx:HBox>之間的所有內容,但不要復制那些標記,因為文件中已有它們。結果應該如下:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> <mx:HBoxxmlns:mxmx:HBoxxmlns:mx="http://www.adobe.com/2006/mxml" width="400"height="300"> <mx:Script> <![CDATA[  overridepublicfunctionsetdata(value:Object):void{  super.data=value;  vartoday:Number=(newDate()).time;  varpubDate:Number=Date.parse(data.date);  if(pubDate>today)setStyle("backgroundColor",0xff99ff);  elsesetStyle("backgroundColor",0xffffff);  }  ]]></mx:Script> <mx:Imagesourcemx:Imagesource="{data.image}"width="50"height="50" scaleContent="true"/> <mx:Textwidthmx:Textwidth="100%"text="{data.title}"/> </mx:HBox>

保存此文件。

現在修改DataGridColumn定義,方法是刪除內聯渲染器并將它替換為以下內容:

<mx:DataGridColumnheaderTextmx:DataGridColumnheaderText="Title"dataField="title"  itemRenderer="GridColumnSimpleRenderer">

現在運行這個應用程序。您會大吃一驚。因為行很高。這是因為渲染器上的height="300"。

◆決定Flex渲染器的寬度和高度

List控制始終設置渲染器的寬度。本例中將忽略明確的width="400"。您應當編寫自己的渲染器,假設用戶更改列或列表寬度是寬度會更改。

高度則是另一回事。如果列表設置了明確的rowHeight,它會將這個高度強加到各行,忽略您對渲染器設置的任何高度。但是,如果您將列表的variableRowHeight屬性設置為true,則列表會慎重考慮渲染器的高度。在本例中,高度明確設置為300,所以各行為300像素高。

要修復它,請從渲染器文件中刪除明確高度,應用程序即可正確運行。

以上是“Flex渲染機制中外部Flex渲染器怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！