Flex中定義和使用渲染器的方式

這篇文章主要講解了“Flex中定義和使用渲染器的方式”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“Flex中定義和使用渲染器的方式”吧！

Flex中使用渲染器(ItemRenderer)

Flex渲染器使用非常頻繁，可以讓用戶(hù)自行定義數(shù)據(jù)的顯示格式，做過(guò).NET開(kāi)發(fā)的朋友我想都知道數(shù)據(jù)控件中的ItemTemplate，我個(gè)人認(rèn)為Flex中的Flex渲染器和.NET中的ItemTemplate從功能上來(lái)說(shuō)相差不大，在Flex要顯示特定的格式完全可以通過(guò)Flex渲染器來(lái)自定義。

在《使用TileList+TitleWindowt組件開(kāi)發(fā)聊天表情功能》這文章里其實(shí)就已經(jīng)用到了Flex渲染器，只是沒(méi)有專(zhuān)們提出來(lái)介紹，這里使用的是內(nèi)部ItemRenderer，除此之外我們還可以使用外部ItemRenderer。故名思意內(nèi)部ItemRenderer就是直接嵌套在Flex內(nèi)部的，外部Flex渲染器則是將要顯示的效果通過(guò)外部組件或是外部類(lèi)來(lái)進(jìn)行定義開(kāi)發(fā)。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" dataProvider="{faceArray}"itemClick="onItemClick(event)"> <mx:itemRenderer> <mx:Component> <mx:Imagesourcemx:Imagesource="{data.ImageUrl}"/> </mx:Component> </mx:itemRenderer> </mx:TileList>

如上則是使用的內(nèi)部ItemRenderer，通過(guò)<mx:itemRenderer>和<mx:Component>在Flex組件的內(nèi)部定義項(xiàng)目渲染器（ItemRenderer）。如果想使用外部Flex渲染器的方式實(shí)現(xiàn)呢，則需要定義一個(gè)外部Flex渲染器,將Renderer的格式在自定義的類(lèi)或組件中去實(shí)現(xiàn)，如下：

package  {  importmx.core.UIComponent;   publicclassFaceRendererextendsUIComponent  {  privatevarimageUrl:Image;   publicfunctionFaceRenderer()  {  super();  }   protectedoverridefunctioncreateChildren():void  {  imageUrl=newImage();  }   protectedoverridefunctioncommitProperties():void  {  super.commitProperties();  imageUrl.source=data.ImageUrl;  }  }  }

在Flex組件中通過(guò)Flex渲染器屬性引用自定義的外部渲染器就OK了。

<mx:TileListxmx:TileListx="0"y="0"width="100%"height="100%"id="faceList" dataProvider="{faceArray}" itemClick="onItemClick(event)" itemRenderer="FaceRenderer"> </mx:TileList>

感謝各位的閱讀，以上就是“Flex中定義和使用渲染器的方式”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)Flex中定義和使用渲染器的方式這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！