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>