2017年网站设计,北京SEO网站优化公司,企业网站建设选择兴田德润,前端需要掌握哪些知识在上一篇 中#xff0c;定义了一个最简单的SkinnableComponent并为其定义了两个Skin。 对于TransitionSkin#xff0c;需要在enable时有不同的展现方式#xff0c;这可以通过Skin State实现。 对自定义的SkinnableComponent的修改 首先在组件中定义isEnabled属性#xff1a… 在上一篇 中定义了一个最简单的SkinnableComponent并为其定义了两个Skin。 对于TransitionSkin需要在enable时有不同的展现方式这可以通过Skin State实现。 对自定义的SkinnableComponent的修改 首先在组件中定义isEnabled属性 private var _isEnabled:Boolean false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled value; } 然后定义SkinState元标签 [SkinState(normal)] [SkinState(enable)] 最后需要将属性值和组件状态关联起来这是通过覆盖SkinnableComponent的getCurrentSkinState方法实现的。 该方法的最初定义如下 /** * Returns the name of the state to be applied to the skin. For example, a * Button component could return the String up, down, over, or disabled * to specify the state. * * pA subclass of SkinnableComponent must override this method to return a value./p * * return A string specifying the name of the state to apply to the skin. * * langversion 3.0 * playerversion Flash 10 * playerversion AIR 1.5 * productversion Flex 4 */ protected function getCurrentSkinState():String { return null; } 在Node中需要覆盖该方法 override protected function getCurrentSkinState():String { if(isEnabled) return enable; return normal; } 完整的Node代码如下 Node.as package skinsample { [SkinState(normal)] [SkinState(enable)] import spark.components.supportClasses.SkinnableComponent; public class Node extends SkinnableComponent { public function Node() { super(); } private var _isEnabled:Boolean false; public function get isEnabled():Boolean { return _isEnabled; } public function set isEnabled(value:Boolean):void { _isEnabled value; } override protected function getCurrentSkinState():String { if(isEnabled) return enable; return normal; } } } 对Skin的修改 Skin中首先需要增加状态的声明 s:states s:State namenormal / s:State nameenable / /s:states 接下来可以指定Skin元素在哪个状态中出现默认是在所有状态中出现。XML节点和属性都可以进行指定。 对于XML节点增加includeIn属性如 s:Button top0 right0 bottom0 left0 alpha0 includeInenable,normal / 对于XML属性增加 属性名称.状态名称 指定特定状态下的属性值如 s:SolidColor color0x131313 color.enable0xff0000 / 完整的Skin代码如下 TransitionSkin.mxml ?xml version1.0 encodingutf-8? s:Skin xmlns:fxhttp://ns.adobe.com/mxml/2009 xmlns:slibrary://ns.adobe.com/flex/spark xmlns:mxlibrary://ns.adobe.com/flex/halo width400 height300 s:states s:State namenormal / s:State nameenable / /s:states s:Rect idrect radiusX4 radiusY4 top0 right0 bottom0 left0 s:fill s:SolidColor color0x131313 color.enable0xff0000 / /s:fill s:stroke s:SolidColorStroke color0x131313 weight2/ /s:stroke /s:Rect s:Button top0 right0 bottom0 left0 alpha0 includeInenable,normal/ /s:Skin PlaceSkin.mxml ?xml version1.0 encodingutf-8? s:Skin xmlns:fxhttp://ns.adobe.com/mxml/2009 xmlns:slibrary://ns.adobe.com/flex/spark xmlns:mxlibrary://ns.adobe.com/flex/halo width400 height300 s:states s:State namenormal / s:State nameenable / /s:states s:Ellipse idellipse top0 right0 bottom0 left0 s:fill s:SolidColor color0x77CC22 / /s:fill s:stroke s:SolidColorStroke color0x131313 weight2/ /s:stroke /s:Ellipse /s:Skin 使用具有状态的组件和Skin 定义好组件和Skin后就可以使用了 NodeSample.mxml ?xml version1.0 encodingutf-8? s:WindowedApplication xmlns:fxhttp://ns.adobe.com/mxml/2009 xmlns:slibrary://ns.adobe.com/flex/spark xmlns:mxlibrary://ns.adobe.com/flex/halo xmlns:skinsampleskinsample.* fx:Script !--[CDATA[ import skinsample.TransitionSkin; ]]-- /fx:Script skinsample:Node skinClassskinsample.TransitionSkin x10 y30 width50 height50/ skinsample:Node skinClassskinsample.PlaceSkin x80 y30 width50 height50/ skinsample:Node skinClassskinsample.TransitionSkin x150 y30 width50 height50 isEnabledtrue/ /s:WindowedApplication 运行效果 转载于:https://www.cnblogs.com/holbrook/archive/2009/10/06/2357375.html
