0
点赞
收藏
分享

微信扫一扫

FLEX4实践—自定义皮肤2

在本文中将进一步完善自定义皮肤的实现—动态改变控件皮肤
1) CustomTextInput.aspackage com.custom.components
{	
	import mx.controls.Alert;	
	import spark.components.TextInput;
	
	public class CustomTextInput extends TextInput
	{
		public function CustomTextInput()   
		{    
			super();   
		}   
		
		
		private var _isRequired:Boolean;   
		
		public function get isRequired():Boolean   
		{   
			return _isRequired;   
		}   
		
		public function set isRequired(value:Boolean):void  
		{   
			_isRequired = value;   
			
			
		}   
		override protected function commitProperties() : void{
			super.commitProperties();
			super.skin.currentState = getCurrentSkinState();
		}
		
		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">
	<fx:Metadata>
		<!--[CDATA[ 
		/** 
		* @copy spark.skins.spark.ApplicationSkin#hostComponent
		*/
		[HostComponent("com.custom.components.CustomTextInput")]
		]]-->
	</fx:Metadata> 
	<spark:states>
		<s:State name="normal"/>
		<s:State name="require"/>
	</spark:states>
</spark:TextInputSkin>
 
3)主应用SkinTest.mxml
<?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.*;
			
			import mx.controls.Alert;
			[Bindable]
			private var flag:Boolean = true;
			private function changeTextInputState():void{
				this.flag = false;
			}
		]]-->
	</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="{flag}"/>     
    </mx:FormItem>      
    <s:Button x="335" y="126" label="Click" click="changeTextInputState()"/> 
</s:Application>

举报

相关推荐

0 条评论