自定义Spark组件

Flex3里面如果要自定义组件，一般首先继承一个flex3中的已有组件，然后覆盖createChildren方法，并在里面实例化你自己的东西。但是Flex4中的spark组件就有些不同了，因为spark组件把逻辑和皮肤分别放在不同的类里面，如Panel，你会发现有一个PanelSkin与之对应。

那么在Flex4中如何自定义自己的组件呢？　按如下步骤：
1)New 一个Mx Skin类并继承你需要的类，比如我的为MyPanelSkin继承自PanelSkin,Flash builder里面提供了new Mx Skin的选项，完成本步骤后，你会发行MyPanelSkin里面已经有PanelSkin里的所有代码了，现在你可以通过可视化或这代码来修改你的皮肤，比如给panel的顶部的右边加上一个最大化按钮，等等，你可以加你所需要的东西

2)在MyPanelSkin里给你的组件添加一个id
比如我将Spark　Panel 里原来的titleDisplay改成了如下形式，即添加了自定义的东西

                <!-- layer 3: text -->
                <!--- @copy spark.components.Panel#titleDisplay -->
				<s:VGroup height="100%" width="100%">
					<s:HGroup width="100%" horizontalAlign="center">
						<s:Label id="titleDisplay" maxDisplayedLines="1" fontSize="18" fontFamily="宋体"
								 left="9" right="3" top="1" bottom="0" minHeight="30"
								 verticalAlign="middle" textAlign="start" fontWeight="bold">
						</s:Label>
					</s:HGroup>
					<s:Spacer height="5"/>
					<s:HGroup width="100%" verticalAlign="middle">
						<mx:LinkButton id="btnPreviousDay" label="前一天" fontFamily="宋体"/>
						<s:HGroup width="100%" horizontalAlign="center">
							<s:ComboBox id="comboBoxMonth" width="60"/>
							<s:VGroup paddingTop="3">
								<mx:Label text="月" fontFamily="宋体"/>
							</s:VGroup>
							<s:ComboBox id="comboBoxDay"  width="60"/>
							<s:VGroup paddingTop="3">
								<mx:Label text="日" fontFamily="宋体"/>
							</s:VGroup>
							<s:Spacer width="3"/>
							<s:Button id="searchBtn" label="查看" fontFamily="宋体"/>
							<s:Button id="backBtn" label="返回" fontFamily="宋体"/>
						</s:HGroup>
						<mx:LinkButton id="btnNextDay" label="后一天" fontFamily="宋体"/>
					</s:HGroup>
					<s:Spacer height="2"/>
				</s:VGroup>

3)new 一个MyPanel继承自Spark Panel，并且在里面添加属性， 属性名字与MyPanelSkin的id的值保持一致，这一点非常重要，一定要取一样的名字，
并且要给这些变量加上元数据，[SkinPart (required="false or true")]，通过这些变量你就可以访问MyPanelSkin里面的元素了，当然必须完成第4步后，你才能访问。

4)按如下方式覆盖partAdd，在partAdd里面操作你的属性，你可以为这些属性所代表的组件添加事件监听器，或者赋初始值。

package view.component
{
	import mx.collections.ArrayCollection;
	
	import spark.components.ComboBox;
	import spark.components.Panel;
	
	public class MyPanel extends Panel
	{
		public function MyPanel()
		{
			super();
		}
		
		[SkinPart (required="false")]
		public var comboBoxMonth:ComboBox
		
		[SkinPart (required="false")]
		public var comboBoxDay:ComboBox
		
		override protected function partAdded(partName:String, instance:Object):void {
			super.partAdded(partName, instance);
			var monthProvider:ArrayCollection=new ArrayCollection();
			var dayProvider:ArrayCollection=new ArrayCollection();
			
			for(var i:int=1;i<=12;i++){
				monthProvider.addItem(i);
			}
			
			for(var j:int=1;j<=31;j++){
				dayProvider.addItem(j);
			}
			if (instance == comboBoxMonth) {
				comboBoxMonth.dataProvider=monthProvider;
				
			}else if(instance==comboBoxDay){
				comboBoxDay.dataProvider=dayProvider;
			}
		}
		
	}
}