在Flex 2.0.1中使用动态CSS
关键词： FLEX动态CSSFlex 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:
}
background-color: #600000;
border-color: red;
color: white:
}
green_styles.css:
程序代码Panel {
background-color: #006000;
border-color: green;
color: white;
}
background-color: #006000;
border-color: green;
color: white;
}
在主程序中，加入以下代码：
程序代码import mx.styles.StyleManager;
private function loadStyles( name:String ) : void
{
StyleManager.loadStyleDeclarations( name );
}
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')" />
<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;
}
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;
}
{
StyleManager.loadStyleDeclarations(name);
stylesAreGood = false;
}
然后添加下面的函数：
程序代码private function showApp() : void
{
if( stylesAreGood ) {
visible = true;
}
}
{
if( stylesAreGood ) {
visible = true;
}
}
最后在Application标签中的updateComplete事件调用showApp函数：
程序代码updateComplete="showApp()"
以上步骤做的是下面这些事情：
- 开始的时候程序是不可见的。
- 缺省的样式已经加载了，这会导致后面重复调用styleChanged函数。这里会将stylesAreGood设为true。
- 然后初始化事件会调用loadStyles函数，将stylesAreGood设为false并请求加载样式表。
- 一旦加载了新的样式，会再次调用styleChanged函数将stylesAreGood再次设置为true。
- 最后，调用updateComplete函数，这时stylesAreGood的值为true，所以程序将会变为可见。
Trackback
你可以使用这个链接引用该篇文章 http://publishblog.blogchina.com/blog/tb.b?diaryID=6237987