FLEX4实践—自定义皮肤2

最新推荐文章于 2024-09-24 12:38:59 发布

meteorlWJ

最新推荐文章于 2024-09-24 12:38:59 发布

阅读量2.7k

点赞数

分类专栏： Flex 文章标签： flex components function library application encoding

本文链接：https://blog.csdn.net/meteorlWJ/article/details/5390231

版权

Flex 专栏收录该内容

188 篇文章 0 订阅

订阅专栏

在上一篇中实现了自定义皮肤的基本操作
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>  </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>  </fx:Script> <fx:Declarations>  </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>