FLEX4实践—自定义皮肤2

在上一篇中实现了自定义皮肤的基本操作
http://blog.csdn.net/meteorlWJ/archive/2010/03/17/5388251.aspx

 

在本文中将进一步完善自定义皮肤的实现—动态改变控件皮肤
1) CustomTextInput.as

package 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>