Flex之旅--项呈示器ItemRenderer

? ? ? ? 本文只讨论DataGrid的项呈示器，其他的没有细看，应该是类似的，可能只是实现的接口不同而已，以后用到这部分内容的话再补充进来。每次前面都说这么些废话，只是为了说明文章内容的适应范围，否则可能会引起误解。

? ? ? ??Flex4.0 API里面有这么一句话：列表组件的项呈示器和项目编辑器必须实现 IListItemRenderer 接口。至于IListItemRenderer 接口定义了哪些内容对于我们应用的人来说并不是很重要，有兴趣的可以研究一下。IListItemRenderer 接口有一个实现类MXItemRenderer，MXItemRenderer 类是在基于 MX 列表的控件中使用的 Spark 项呈示器和项编辑器的基类。所以我们在自定义DataGrid的项呈示器时可以直接继承MXItemRenderer即可，不过Flex4.0 API给提供了一个MXDataGridItemRenderer类，通过该类，可以将 Spark 项呈示器体系结构与 MX DataGrid 控件一起使用。

? ? ? ? 怎样自定义和使用项呈示器呢？下面介绍几种方法，具体使用哪种方法视情况而定。

? ? ? ? 对于简单的情况可直接在DataGridColumn标签下写itemRenderer，比如要在某一列添加图片，按钮，复选框等常用的一些控件（这些控件要使用MX的，不能使用Spark下的，因为MX下的控件容器等都实现了IListItemRenderer 接口）。我的测试代码是使用的图片，显示用户的头像，代码如下：

			<mx:DataGridColumn id="head" headerText="头像" width="100">
				<mx:itemRenderer>
					<fx:Component >
						<mx:Image source="{data.headImg}" width="50" height="50"/>	
					</fx:Component>
				</mx:itemRenderer>
			</mx:DataGridColumn>

? ? ? ? 对于一些功能复杂的情况，可以自己定义项呈示器，如上面提到的继承MXDataGridItemRenderer，MXDataGridItemRenderer是Group的子孙类，可以直接在其中加入各种组件。当然也可以直接继承MX的容器类如HBox等，这些容器都实现了IListItemRenderer 接口。

<?xml version="1.0" encoding="utf-8"?>  
<s:MXDataGridItemRenderer  xmlns:fx="http://ns.adobe.com/mxml/2009"   
				xmlns:s="library://ns.adobe.com/flex/spark"   
				xmlns:mx="library://ns.adobe.com/flex/mx" >  
	<s:layout>
		<s:HorizontalLayout/>
	</s:layout>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Image;
			
			[Embed(source="images/lev1.jpg")]  
			private const imgsource:Class;
			
			private function getImage(data:Object):Object {
				this.removeAllElements();
				for (var i:int = 0; i < data.level; i++) {
					var img:Image = new Image();
					img.source = imgsource;
					this.addElement(img);
				}
				return null;
			}
		]]>
	</fx:Script>
	<mx:Image id="levImage" source="{getImage(this.data)}"/> 
</s:MXDataGridItemRenderer >

? ? ? ? 上面是我自定义的用于显示用户等级的呈示器LevelItemRenderer，至于使用方式有以下3种：

			<mx:DataGridColumn dataField="level" headerText="等级1" width="150" itemRenderer="my.LevelItemRenderer"/>
			<mx:DataGridColumn id="level" dataField="level" headerText="等级2" width="150"/>
			<mx:DataGridColumn dataField="level" headerText="等级3" width="150" >
				<mx:itemRenderer>
					<fx:Component >
						<my:LevelItemRenderer/>	
					</fx:Component>
				</mx:itemRenderer>	
			</mx:DataGridColumn>

1.第一种应该是最直接，最简单的，直接在itemRenderer属性中写定义的呈示器的名称，my是我定义的包名。

2.第二种需要用as脚本，代码如下：

				//var myRender:IFactory = new render();
				//level.itemRenderer = myRender;
				
				var myRender:IFactory = new ClassFactory(LevelItemRenderer);
				level.itemRenderer = myRender;

看一下API就会知道itemRenderer参数类型会IFactory，所以在代码中通过ClassFactory新定义了一个myRender。上面注释的部分也可以作为一种方法，不过又得加入render.as这个自定义的文件，不过可以在newInstance()方法中加入其他处理代码（好像越来越乱了....）：

package my
{
	import mx.core.IFactory;
	public class render implements IFactory
	{
		public function render(){}
		
		public function newInstance():*
		{
			return new LevelItemRenderer();
		}
	}
}

3.第三种方法，把自定义的项呈示器当做一个组件引入进来，不过引入自定义组件需要在前面加点东西(xmlns:my="my.*")：

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx" 
		  xmlns:my="my.*" width="80%" 

? ? ? ? 由于写的比较乱，所以最后把代码发布上来，如果需要可到http://download.csdn.net/detail/sjepy/4355992下载（需要一个积分，没钱花了。。。），最后另附测试截图。