9.7.運行時聲明樣式

2024-04-27 13:52:06

字體：大中小

來源：轉載

供稿：網友

9.7.1.問題
你想在運行時利用ActionScript 為Flex 組件聲明和用戶化樣式。
9.7.2.解決辦法
創造mx.styles.CSSStyleDeclaration 對象，并將和mx.styles.StyleManager 存儲的選擇器名聯系起來。
9.7.3.討論
CSSStyleDeclaration 對象擁有能在運行時被設置且用戶化的樣式屬性及值。當你通過<mx:Style>標記在本地或外部文件中定義CSS 規則， Flex 在編譯時自動地為每個聲明的選擇器生成CSSStyleDeclaration 對象。若要在運行時生成樣式聲明，你需調用StyleManager.setStyleDeclaration 方法，這個方法以選擇器標識字符串和
CSSStyleDeclaration 對象作為其構造參數。你能通過StyleManager.getStyleDeclaration 方法訪問在運行或編譯時生成的CSSStyleDeclaration 對象。

用選擇器名稱去關聯運行時生成的CSSStyleDeclaration 所遵守的規則同關聯運行時嵌入的樣式聲明時遵守的規則一致。一個類的每個實例都是通過類型選擇器來應用樣式規則，類型選擇器就是類名的字符串表示。例如：

-ActionScript

var vboxStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
vboxStyle.setStyle( "backgroundColor", 0xFF0000 );
StyleManager.setStyleDeclaration( "VBox", vboxStyle, false );

你同樣也能利用類選擇器去關聯一個樣式聲明。類選擇器以句號（或點）開頭，并通過嵌入地將styleName 屬性設置為相應值以應用于任意組件：

-ActionScript

var redBoxStyle:CSSStyleDeclaration = new CSSStyleDeclaration();
redBoxStyle.setStyle( "backgroundColor", 0xFF0000 );
StyleManager.setStyleDeclaration( ".redBox", redBoxStyle, false );

盡管運行時在StyleManager 中設置聲明同編譯時CSS 轉換遵守同樣的規則，樣式屬性不能通過調用CSSStyleDeclaration 實例的setStyle 方法引用帶連字符的參數(如font-family)生成, 這些參數只允許出現在外部文件的聲明或者在<mx:Style> 標記中間。

注意
運行時利用StyleManager 設置樣式聲明會替換掉先前生成且以同一選擇器存儲的任何聲明。

接下來的例子中，程序在初始化過程中生成CSSStyleDeclaration 對象，然后其子組件的樣式發生變化。

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init();">
<mx:Script>
<![CDATA[
// create and store new style declarations.
private function init():void {
StyleManager.registerColorName( "cookbookBlue",0x339966 );
var headerStyleDeclaration:CSSStyleDeclaration =new CSSStyleDeclaration();
headerStyleDeclaration.setStyle( "fontWeight","bold");
headerStyleDeclaration.setStyle( "fontSize", 15 );
headerStyleDeclaration.setStyle( "color",StyleManager.getColorName( "cookbookBlue") );
var msgStyleDeclaration:CSSStyleDeclaration =new CSSStyleDeclaration();
msgStyleDeclaration.setStyle( "fontSize", 12 );
msgStyleDeclaration.setStyle( "color",StyleManager.getColorName( "haloSilver") );
StyleManager.setStyleDeclaration( ".header",headerStyleDeclaration, false);
StyleManager.setStyleDeclaration( ".message",msgStyleDeclaration, true);
}
// clear previously created styles.
private function clickHandler():void {
StyleManager.clearStyleDeclaration( ".header", false);
StyleManager.clearStyleDeclaration( ".message", true);
}

]]>
</mx:Script>
<mx:Label text="I'm a header styled through the StyleManager"
styleName="header"/>
<mx:Text text="I'm a message styled through the StyleManager"
styleName="message" />
<mx:Button label="clear styles" click="clickHandler();" />
</mx:Application>