Dreamer’s Blog

英文原文：《Using Dynamic CSS in Flex 2.0.1》
原文地址：http://www.keaura.com/blog/
作者：Peter Ent

译者：Dreamer。 此文未经同意，谢绝转载。

在Flex 2.0.1中使用动态CSS

Flex 2.0.1 的特性之一就是可以动态加载CSS文件。这就使得你的程序在只有一个SWF文件的情况下有多个不同的外观。换句话说，就是不需要多个SWF来对应多个CSS文件。

示例

这里有一个简单的例子。创建一个Flex程序，其中有一个Panel控件，Panel中有一个Label和一个Button。然后创建两个CSS文件：

red_styles.css:

Panel {
background-color: #600000;
border-color: red;
color: white:
}

green_styles.css:

Panel {
background-color: #006000;
border-color: green;
color: white;
}

在主程序中，加入以下代码：

import mx.styles.StyleManager; private function loadStyles( name:String ) : void
{
StyleManager.loadStyleDeclarations( name );
}

将下面两个RadioButton放到程序中Panel外的某个地方：

<mx:RadioButton label=”Red” click=”loadStyles(’red_styles.swf’)” />
<mx:RadioButton label=”Green” click=”loadStyles(’green_styles.swf’)” />

注意“red” RadioButton想要使用red_styles.swf而“green” RadioButton想要使用green_styles.swf。你需要将CSS文件编译到SWF中。你可以使用下面两种方法的一种：

如果你正在使用Flex Builder 2.0.1，右键点击CCS文件并选择“Compile CSS to SWF”选项。或者你也可以使用mxmlc来将CSS文件编译到SWF文件中。

现在运行程序。当你点击“Red”按钮时Panel将会变成红色，点击“Green”按钮的时候Panel将会变成绿色。很酷，对吧？

在程序中使用动态CSS

如果你想要在程序中使用动态CSS，例如在Application标签中添加 initialize=”loadStyles(’red_styles.css’)” ，你会发现在加载新的CSS来替换缺省CSS的时候会闪一下。

你可以避免CCS替换时发生的闪烁，只需遵循以下步骤：

首先，在Application标签中添加 visible=”false”。

然后，覆写styleChanged 函数：

private var stylesAreGood:Boolean = false; override public function styleChanged(styleProp:String):void
{
super.styleChanged(styleProp);
stylesAreGood = true;
}

更改loadStyles函数将stylesAreGood设成false：

private function loadStyles( name:String ) : void
{
StyleManager.loadStyleDeclarations(name);
stylesAreGood = false;
}

然后添加下面的函数：

private function showApp() : void
{
if( stylesAreGood ) {
visible = true;
}
}

最后在Application标签中的updateComplete事件调用showApp函数：

updateComplete=”showApp()”

以上步骤做的是下面这些事情：

• 开始的时候程序是不可见的。

• 缺省的样式已经加载了，这会导致后面重复调用styleChanged函数。这里会将stylesAreGood设为true。

• 然后初始化事件会调用loadStyles函数，将stylesAreGood设为false并请求加载样式表。

• 一旦加载了新的样式，会再次调用styleChanged函数将stylesAreGood再次设置为true。

• 最后，调用updateComplete函数，这时stylesAreGood的值为true，所以程序将会变为可见。

分享收藏