9.16.编程实现状态控件的皮肤

2023-07-29 15:25:33

字体：大中小

来源：转载

供稿：网友

9.16.1. 问题
你想编程实现皮肤，该皮肤能够解决控件显示不同状态的问题。
9.16.2. 解决办法
生成mx.skins.ProgrammaticSkin 的子类，然后利用updateDisplayList 方法依据name 属性值更新其显示内容。可以嵌入地利用skin 样式属性，或者利用setStyle 方法，再或者利用CSS 三种方法应用编程实现的自定义皮肤。
9.16.3. 讨论
通常控件都有状态或包含有状态的子元素。将编程实现的皮肤做为样式来显示控件状态与用其来显示容器背景是一样的原理：样式属性值用编程实现的皮肤类的名称定义。控件皮肤视觉元素的更新与容器的更新不同，但是大多数控件基于一个状态显示其内容。

为状态组件编程生成皮肤类的过程中，你生成ProgrammaticSkin 的一个子类同时重载保护类型的updateDisplayList 方法。在重载updateDisplayList 过程内，你能利用switch case 语句响应状态名称值。每个皮肤片段的name 属性值与控件的样式属性是同一字符串值，而且嵌入地应用于你待处理的控件。

下面的例子编程生成能依据以下状态更新显示的皮肤，upSkin、overSkin、downSkin 和disabledSkin：
查看代码：

-ActionScript

package oreilly.cookbook {
import flash.filters.BevelFilter;
import mx.skins.ProgrammaticSkin;
public class CustomButtonSkin extends
ProgrammaticSkin {
private var _measuredWidth:Number = 100;
private var _measuredHeight:Number = 100;
// override measuredWidth and measuredHeight sets default size.
override public function get measuredWidth():Number { return _measuredWidth; }
override public function get measuredHeight():Number { return _measuredHeight; }
// update display based on state phase name.
override protected function updateDisplayList( unscaledWidth:Number,unscaledHeight:Number ):void{
var backgroundAlpha:Number = 1.0;
var bevelAngle:Number = 45;
var backgroundColor:uint;
// assign property values based on state name
switch ( name ) {
case "upSkin":backgroundColor = 0xEEEEEE;break;
case "overSkin":backgroundColor = 0xDDDDDD;break;
case "downSkin":backgroundColor = 0xDDDDDD;bevelAngle = 245;break;
case "disabledSkin":backgroundColor = 0xFFFFFF;backgroundAlpha = 0.5;break;
}
// clear the display and redraw with values assigned in switch 
graphics.clear();
drawRoundRect( 0, 0, unscaledWidth, unscaledHeight,null, backgroundColor, backgroundAlpha );
// apply bevel filter
var bevel:BevelFilter = new BevelFilter(2, bevelAngle );
this.filters = [bevel];
}
}
}

若要应用编程实现的响应组件状态阶段的皮肤，你需将类名做为skin 样式属性值。下例利用CSS 在一个ClassReference 指令中提供CustomButtonSkin 类的完整合法的类名：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Style>
.customButton {
skin:ClassReference( "oreilly.cookbook.CustomButtonSkin" );
}
</mx:Style>
<mx:Button id="skinnedBtn"
styleName="customButton"
label="click me" />
<mx:Button label="toggle enabled"
click="{skinnedBtn.enabled = !skinnedBtn.enabled;}"/>
</mx:Application>

skin 样式属性是Flex 3 SDK 中的新增功能。在Flex 2 中即使每个值都是同样的ClassReference 值，每个皮肤状态也需要重新定义。在Flex 中，你能指定单一的skin 属性应用于每个状态。定义完skin 属性后，你仍然可以重载特定的状态皮肤属性，例如overSkin，以对状态组件的自定义拥有更多控制。

上一篇：12.5.创建自定义Effect触发器

下一篇：9.17.从SWF 文件中生成动态皮肤