9.8.自定义组件样式属性
9.8.1.问题
你想嵌入地创造并展现那些组件中本身没有的自定义样式属性。
9.8.2.解决办法
给你的自定义组件增加样式元数据并用getStyle 方法返回属性值。
9.8.3.讨论
Flex 框架为组件提供了可用的默认样式属性,但你能利用[Style] 元数据标记为自定义组件声明附加样式属性。在<mx:Metadata>标记中列出样式定义使得你在MXML 中组件声明内嵌入地指定属性值。你同样能利用CSS 和setStyle 方法为自定义组件声明样式属性值。同设定默认属性值一样，所有的这些方法强制更新显示界面。
为自定义组件增添附加样式属性使得你能规定影响组件视觉构成的属性。下例中的自定义组件是mx.containers.Box 类的子类，并在<mx:Metadata>标记中列出了用于自定义显示的自定义样式：
本例中声明的开始Rotate tween 的角度与teeterAngle 样式属性相关,但VBox 子件的背景色的变化却与动画的状态无态。本组件中可利用的自定义样式均列在<mx:Metadata>标记中，同时可通过学习getStyle 方法访问他们相应的属性值。通过在<mx:Metadata>标记中声明自定义样式属性，你能够在用户组件的声明阶段嵌入地定义他们的值。
尽管你能为组件添加自定义样式属性， 固有的默认样式属性也可以用来自定义， 在声明用户组件设置textAlign 属性时可以看到这点。ChompBox 实例没有对textAlign 属性值做出操作，也不允许基础的mx.containers.Box 类为继承而来的任何子组件规则程序。
你想嵌入地创造并展现那些组件中本身没有的自定义样式属性。
9.8.2.解决办法
给你的自定义组件增加样式元数据并用getStyle 方法返回属性值。
9.8.3.讨论
Flex 框架为组件提供了可用的默认样式属性,但你能利用[Style] 元数据标记为自定义组件声明附加样式属性。在<mx:Metadata>标记中列出样式定义使得你在MXML 中组件声明内嵌入地指定属性值。你同样能利用CSS 和setStyle 方法为自定义组件声明样式属性值。同设定默认属性值一样，所有的这些方法强制更新显示界面。
为自定义组件增添附加样式属性使得你能规定影响组件视觉构成的属性。下例中的自定义组件是mx.containers.Box 类的子类，并在<mx:Metadata>标记中列出了用于自定义显示的自定义样式：
+展开
-XML
<mx:Box xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
horizontalAlign="center" verticalAlign="middle" creationComplete="creationHandler();">
<mx:Metadata>
[Style(name="teeterAngle", type="Number")]
[Style(name="activeColor", type="uint", format="Color")]
[Style(name="idleColor", type="uint", format="Color")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
[Embed("assets/fonts/verdana.TTF", fontName="MyFont")]
public var verdana_font:Class;
private function creationHandler():void { playAnim(); }
private function effectStartHandler():void {
holder.setStyle( "backgroundColor",getStyle( "activeColor") );
holder.enabled = false;
field.text = "Wheeeee!";
}
private function effectEndHandler():void {
holder.setStyle( "backgroundColor",getStyle( "idleColor") );
holder.enabled = true;
field.text = "Again! Click Me";
}
private function playAnim():void { rotater.play( [this], true);
}
]]>
</mx:Script>
<mx:Rotate id="rotater"
effectStart="effectStartHandler();"
effectEnd="effectEndHandler();"
originX="{width}" originY="{height}"
angleFrom="0" angleTo="{getStyle('teeterAngle')}"
easingFunction="{Bounce.easeIn}" duration="500"/>
<mx:VBox id="holder" width="60%" height="60%" horizontalAlign="center" verticalAlign="middle" click="playAnim();">
<mx:Text id="field" width="100%" selectable="false" fontFamily="MyFont"/>
</mx:VBox>
</mx:Box>
horizontalAlign="center" verticalAlign="middle" creationComplete="creationHandler();">
<mx:Metadata>
[Style(name="teeterAngle", type="Number")]
[Style(name="activeColor", type="uint", format="Color")]
[Style(name="idleColor", type="uint", format="Color")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
[Embed("assets/fonts/verdana.TTF", fontName="MyFont")]
public var verdana_font:Class;
private function creationHandler():void { playAnim(); }
private function effectStartHandler():void {
holder.setStyle( "backgroundColor",getStyle( "activeColor") );
holder.enabled = false;
field.text = "Wheeeee!";
}
private function effectEndHandler():void {
holder.setStyle( "backgroundColor",getStyle( "idleColor") );
holder.enabled = true;
field.text = "Again! Click Me";
}
private function playAnim():void { rotater.play( [this], true);
}
]]>
</mx:Script>
<mx:Rotate id="rotater"
effectStart="effectStartHandler();"
effectEnd="effectEndHandler();"
originX="{width}" originY="{height}"
angleFrom="0" angleTo="{getStyle('teeterAngle')}"
easingFunction="{Bounce.easeIn}" duration="500"/>
<mx:VBox id="holder" width="60%" height="60%" horizontalAlign="center" verticalAlign="middle" click="playAnim();">
<mx:Text id="field" width="100%" selectable="false" fontFamily="MyFont"/>
</mx:VBox>
</mx:Box>
本例中声明的开始Rotate tween 的角度与teeterAngle 样式属性相关,但VBox 子件的背景色的变化却与动画的状态无态。本组件中可利用的自定义样式均列在<mx:Metadata>标记中，同时可通过学习getStyle 方法访问他们相应的属性值。通过在<mx:Metadata>标记中声明自定义样式属性，你能够在用户组件的声明阶段嵌入地定义他们的值。
+展开
-XML
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cookbook="oreilly.cookbook.*"
layout="vertical">
<cookbook:ChompBox
width="200" height="200"
backgroundColor="#DDDDDD"
textAlign="center"
teeterAngle="45"
activeColor="#FFDD33" idleColor="#FFFFFF"/>
</mx:Application>
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cookbook="oreilly.cookbook.*"
layout="vertical">
<cookbook:ChompBox
width="200" height="200"
backgroundColor="#DDDDDD"
textAlign="center"
teeterAngle="45"
activeColor="#FFDD33" idleColor="#FFFFFF"/>
</mx:Application>
尽管你能为组件添加自定义样式属性， 固有的默认样式属性也可以用来自定义， 在声明用户组件设置textAlign 属性时可以看到这点。ChompBox 实例没有对textAlign 属性值做出操作，也不允许基础的mx.containers.Box 类为继承而来的任何子组件规则程序。
加支付宝好友偷能量挖...
