9.8.自定義組件樣式屬性

2024-04-27 13:52:07

字體：大中小

來源：轉載

供稿：網友

9.8.1.問題
你想嵌入地創造并展現那些組件中本身沒有的自定義樣式屬性。
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>