Flex 动态改变界面CSS问题

Flex SDK 提供了动态加载CSS,并更新界面skin的功能。具体应用:

1、将CSS文件编译成SWF文件。(选择CSS文件右键菜单选择-compile CSS to swf即可)

2、StyleManager.loadStyleDeclarations("CSS.swf",true);

实现很简单，但是有很大局限性，本人认为基本上没有用，是不可选择的解决方案。

因为该方法对于大的应用程序（即界面中包含很多组件时）很不实用，用户需要等很长的时间样式才能更新，只有当界面只有很少的组件时才能及时更新。

StyleManager.loadStyleDeclarations的工作原理应该是加载CSS后，遍历界面中的每个组件，再分析组件所应用的样式，再将样式更新到组件上。可想而知这个过程会消耗系统多长的时间。

如果按这个思路来解决动态更新Skin的话，我们也可以自己实现，并且根据项目的需要，有选择性地更新组件样式，也许会提高更新skin的性能。关键代码如下:

loadCSS.cs

//load css file

var urlLoader:URLLoader= new URLLoader();

urlLoader.addEventListener(Event.COMPLETE, urlLoader_complete);

urlLoader.load(new URLRequest("css file name"));

 

//urlLoader_complete

//将CSS文件内容转换为xml数据（你也可能转换为数组，总之是为后面应用做准备的数据集合）

var styleSheet:XML=<styleSheet></styleSheet>;

var style:XML;
var styles:Array = cssText.split('}');//cssText 为CSS的内容，纯文本
styles.splice(styles.length-1, 1);

for (var i:int=0; i<styles.length; i++){
      style =    <style><selectors></selectors><properties></properties></style>;
      var stylePortions:Array = styles[i].split('{');
      var selectors:Array = stylePortions[0].split(',');
      for (var s:String in selectors){
            style.selectors.appendChild(this.parseSelector(selectors[s]));
      }
      var properties:Array = stylePortions[1].split(';');
      properties.pop(); // remove empty line
      if (properties.length == 0){
             continue; // if there are no style-declarations in it, it's useless
      }
      for (var p:String in properties){
           style.properties.appendChild(this.parseProperty(properties[p]));
      }
      styleSheet.appendChild(style);
}

//样式的应用

//其实动态应用CSS的瓶颈问题就在这里，即如何将样式以更高的性能应用到所有组件上。

方案一.StyleManager.getStyleDeclaration(styleName).setStyle("styleProperty","stylevalue");

缺陷：如果组件多，应用程序会挂掉。

方案二、UIObject.setStyle("styleProperty","stylevalue")

缺陷：编码不灵活，也会增加编码量。需要有一个界面组件的集合，遍历组件并应用样式。

目前我选择了第二种方案，感觉不是很好。但也没有办法，目前仍在苦苦寻找解决办法！