FLEX4实践—自定义控件皮肤

  设计需求：
  1）对于界面上的TextInput控件，需要设置‘必填’与‘非必填’两种状态

  2）对于‘必填’状态希望给与控件特殊的显示样式

  3）希望能简化代码，不需要每次使用TextInput控件都要对其置样式

  方案1：将样式控制写入css文件，通过Style属性控制TextInput的显示

  方案2：利用Flex4的新特性，自定义控件皮肤

本文将通过方案2实现皮肤的自定义
1）重写TextInput控件

package com.custom.components
{
	
	import spark.components.TextInput;
	
	public class CustomTextInput extends TextInput
	{
		public function CustomTextInput()   
		{    
			super();   
		}   
		
		
		private var _isRequired:Boolean = true;   
		
		public function get isRequired():Boolean   
		{   
			return _isRequired;   
		}   
		
		public function set isRequired(value:Boolean):void  
		{   
			_isRequired = value;   
		}   
		
		override protected function getCurrentSkinState():String   
		{   
			if(isRequired)   
				return "require";   
			return "normal";   
		}   
	}   
}

2）编写皮肤文件CustomTextInputSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<spark:TextInputSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
					 xmlns:s="library://ns.adobe.com/flex/spark" 
					 xmlns:mx="library://ns.adobe.com/flex/halo" xmlns:spark="spark.skins.spark.*" width="400" height="300" 
					 contentBackgroundColor.normal="#FCFCFC" 
					 contentBackgroundColor.require="#F9EF84">
	<spark:states>
		<s:State name="normal"/>
		<s:State name="require"/>
	</spark:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
</spark:TextInputSkin>

3)主应用程序

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/halo" minWidth="1024" minHeight="768"
			   xmlns:components="com.custom.components.*">  
	<fx:Style source="SkinProject.css"/>
	<fx:Script>
		<!--[CDATA[
			import com.custom.skin.*;
		]]-->
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<mx:FormItem required="true" label="name: " labelWidth="80" y="30" x="80">
		<components:Node skinClass="com.custom.skin.CustomTextInputSkin" width="200" height="20"/>
	</mx:FormItem>
	<mx:FormItem  label="description: " labelWidth="80" y="70" x="80">
		<components:Node skinClass="com.custom.skin.CustomTextInputSkin" width="200" height="20" isRequired="false"/>  
	</mx:FormItem>	
</s:Application>

运行效果：