Flex手机项目继承IconItemRenderer自定义List组件

在学习Flex手机项目的过程中，用到了List组件。系统默认的List有两种形式，一种是只显示一行文件的LabelItemRenderer简单样式，另一种为继承了LabelItemRenderer样式的IconItemRenderer样式。后一种相对比较复杂，在每个item中可以添加图片，图标，多行文件等内容。但是如果认真可以发现，后一种还是不能满足各种项目需求，例如想在每个item里添加一个"修改"或“删除”按钮，就不能做到了。本人花了不少时间查找相关资料，以为可以简单通过设置其属性的方法来添加按钮，但是没有找到，想到就来火，看来网络也不是万能的。写下一笔，以填空白。




认真可以发现，其实第二种就是继承了第一种的LabelItemRenderer重新的定义的组件。既然可以通过继承LabelItemRenderer重写，那么也就可以通过继承IconItemRenderer来自定义自己的组件了。好，行动。在FB4.6里，可以通过两种方法来处定义组件，一种是mxml的设计模式，另一种为as的代码模式。这里讲通过写一个as类来继承。新建一种as类，新建类的时候要继承IconItemRenderer，新建createChildren方法，在createChildren方法里动态添加一个button，设置这个button的各个属性，例如x,y,label等，最后利用this.addChild（）方法把这个自定义组件添加到父类中去。

代码如下：

[java] view plain copy print ?

1. package common 
2. { 
3.     import flash.events.MouseEvent; 
4.      
5.     import spark.components.Button; 
6.     import spark.components.IconItemRenderer; 
7.      
8.     public class MyItem2 extends IconItemRenderer 
9.     { 
10.         private var delButton:Button; 
11.         private var editButton:Button; 
12.         public function MyItem2() 
13.         { 
14.             super(); 
15.         } 
16.         /**
17.          * @private
18.          *
19.          * Override this method to create children for your item renderer
20.          */  
21.         override protected function createChildren():void 
22.         { 
23.             super.createChildren(); 
24.             // create any additional children for your item renderer here 
25.             delButton=new Button(); 
26.             delButton.x=this.parent.width-100; 
27.             delButton.y=25; 
28.             delButton.label="删除"; 
29.             delButton.scaleX=0.6; 
30.             delButton.scaleY=0.6; 
31.             delButton.height=35; 
32.             delButton.width=70; 
33.             delButton.addEventListener(MouseEvent.CLICK,delHandleClick); 
34.             this.addChild(delButton); 
35.              
36.             editButton=new Button(); 
37.             editButton.x=this.parent.width-50; 
38.             editButton.y=25; 
39.             editButton.label="修改"; 
40.             editButton.scaleX=0.6; 
41.             editButton.scaleY=0.6; 
42.             editButton.height=35; 
43.             editButton.width=70; 
44.             editButton.addEventListener(MouseEvent.CLICK,editHandleClick); 
45.             this.addChild(editButton); 
46.         } 
47.         private function delHandleClick(event:MouseEvent):void{ 
48.              
49.         } 
50.         private function editHandleClick(event:MouseEvent):void{ 
51.              
52.         } 
53.     } 
54. } 

package common
{
	import flash.events.MouseEvent;
	
	import spark.components.Button;
	import spark.components.IconItemRenderer;
	
	public class MyItem2 extends IconItemRenderer
	{
		private var delButton:Button;
		private var editButton:Button;
		public function MyItem2()
		{
			super();
		}
		/**
		 * @private
		 * 
		 * Override this method to create children for your item renderer 
		 */	
		override protected function createChildren():void
		{
			super.createChildren();
			// create any additional children for your item renderer here
			delButton=new Button();
			delButton.x=this.parent.width-100;
			delButton.y=25;
			delButton.label="删除";
			delButton.scaleX=0.6;
			delButton.scaleY=0.6;
			delButton.height=35;
			delButton.width=70;
			delButton.addEventListener(MouseEvent.CLICK,delHandleClick);
			this.addChild(delButton);
			
			editButton=new Button();
			editButton.x=this.parent.width-50;
			editButton.y=25;
			editButton.label="修改";
			editButton.scaleX=0.6;
			editButton.scaleY=0.6;
			editButton.height=35;
			editButton.width=70;
			editButton.addEventListener(MouseEvent.CLICK,editHandleClick);
			this.addChild(editButton);
		}
		private function delHandleClick(event:MouseEvent):void{
			
		}
		private function editHandleClick(event:MouseEvent):void{
			
		}
	}
}

在上面的类中，每个item添加了一个“修改”及“删除”按钮，接下来，在mxml里引用这个自定义的组件
如下：

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <s:View xmlns:fx="http://ns.adobe.com/mxml/2009"  
3.         xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*"> 
4.     <fx:Declarations> 
5.         <!-- 将非可视元素（例如服务、值对象）放在此处 --> 
6.     </fx:Declarations> 
7.      
8.     <s:List width="100%"  
9.             height="100%" 
10.             alternatingItemColors="0xE3E3E3" 
11.             contentBackgroundColor="0xF9F9F9" 
12.             downColor="0x70B2EE" 
13.             selectionColor="0x70B2EE" 
14.             labelField="productName" focusEnabled="false" 
15.             > 
16.         <s:itemRenderer> 
17.             <fx:Component> 
18.                 <common:MyItem2 iconPlaceholder="@Embed('assets/home.png')" 
19.                                 iconField="productIcon" 
20.                                 iconWidth="50"  
21.                                 iconHeight="50"> 
22.                      
23.                 </common:MyItem2> 
24.             </fx:Component> 
25.         </s:itemRenderer> 
26.         <s:dataProvider> 
27.             <s:ArrayList> 
28.                 <fx:Object productIcon="assets/fx.jpg" productName="Flex SDK"  
29.                            productDesc="A highly productive, free, open source framework."/> 
30.                 <fx:Object productIcon="assets/fb.jpg" productName="Flash Builder"  
31.                            productDesc="Designed to help developers rapidly develop RIAs."/> 
32.                 <fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst"  
33.                            productDesc="An approachable new interaction design tool."/> 
34.             </s:ArrayList> 
35.         </s:dataProvider> 
36.     </s:List> 
37. </s:View> 

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图" xmlns:common="common.*">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<s:List width="100%" 
			height="100%"
			alternatingItemColors="0xE3E3E3"
			contentBackgroundColor="0xF9F9F9"
			downColor="0x70B2EE"
			selectionColor="0x70B2EE"
			labelField="productName" focusEnabled="false"
			>
		<s:itemRenderer>
			<fx:Component>
				<common:MyItem2 iconPlaceholder="@Embed('assets/home.png')"
								iconField="productIcon"
								iconWidth="50" 
								iconHeight="50">
					
				</common:MyItem2>
			</fx:Component>
		</s:itemRenderer>
		<s:dataProvider>
			<s:ArrayList>
				<fx:Object productIcon="assets/fx.jpg" productName="Flex SDK" 
						   productDesc="A highly productive, free, open source framework."/>
				<fx:Object productIcon="assets/fb.jpg" productName="Flash Builder" 
						   productDesc="Designed to help developers rapidly develop RIAs."/>
				<fx:Object productIcon="assets/fc.jpg" productName="Flash Catalyst" 
						   productDesc="An approachable new interaction design tool."/>
			</s:ArrayList>
		</s:dataProvider>
	</s:List>
</s:View>

效果如下：


怎样，效果还行吧？纠结了两个多星期，终于发现了这个方法，分享下。其实还有另一种方法可以实现，就是添加一个mxml组件，新建的时候要基于IconItemRenderer，然后添加以下代码：

[java] view plain copy print ?

1. <?xml version="1.0" encoding="utf-8"?> 
2. <s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"  
3.                     xmlns:s="library://ns.adobe.com/flex/spark"   
4.                     labelField="title"  
5.                     messageField="message"  
6.                     iconField="ico"  
7.                     iconWidth="64"  
8.                     iconHeight="64" 
9.                     initialize="init()"> 
10.     <fx:Script> 
11.         <![CDATA[ 
12.             import spark.components.Button; 
13.             private var delButton:Button; 
14.             private function init():void{ 
15.                 if(!delButton){ 
16.                     delButton=new Button(); 
17.                     delButton.addEventListener(MouseEvent.CLICK,handleClick); 
18.                     delButton.x=this.parent.width-70; 
19.                     delButton.y=20; 
20.                     delButton.height=30; 
21.                     delButton.width=50; 
22.                     delButton.label="aa"; 
23.                     this.addChild(delButton); 
24.                 } 
25.             } 
26.             private function handleClick(event:MouseEvent):void{ 
27.                  
28.             } 
29.         ]]> 
30.     </fx:Script> 
31. </s:IconItemRenderer> 

<?xml version="1.0" encoding="utf-8"?>
<s:IconItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
					xmlns:s="library://ns.adobe.com/flex/spark"  
					labelField="title" 
					messageField="message" 
					iconField="ico" 
					iconWidth="64" 
					iconHeight="64"
					initialize="init()">
	<fx:Script>
		<![CDATA[
			import spark.components.Button;
			private var delButton:Button;
			private function init():void{
				if(!delButton){
					delButton=new Button();
					delButton.addEventListener(MouseEvent.CLICK,handleClick);
					delButton.x=this.parent.width-70;
					delButton.y=20;
					delButton.height=30;
					delButton.width=50;
					delButton.label="aa";
					this.addChild(delButton);
				}
			}
			private function handleClick(event:MouseEvent):void{
				
			}
		]]>
	</fx:Script>
</s:IconItemRenderer>

这样同样可以在item里添加一个button按钮。触类旁通，如果想自定义添加一个图片或其它组件，可以通过这两种方法来实现。