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>

 

运行效果：
http://hi.csdn.net/space-202-do-album-picid-497866.html