在本文中将进一步完善自定义皮肤的实现—动态改变控件皮肤
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>