Flex 动态改变界面CSS问题
2011-01-04 10:22
363 查看
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")
缺陷:编码不灵活,也会增加编码量。需要有一个界面组件的集合,遍历组件并应用样式。
目前我选择了第二种方案,感觉不是很好。但也没有办法,目前仍在苦苦寻找解决办法!
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")
缺陷:编码不灵活,也会增加编码量。需要有一个界面组件的集合,遍历组件并应用样式。
目前我选择了第二种方案,感觉不是很好。但也没有办法,目前仍在苦苦寻找解决办法!
相关文章推荐
- [网络收集]动态加载CSS,解决母版页无法改变CSS的问题
- [转]解决重大技术问题--FLEX动态配置界面
- 在引入bootstrap后,在引入自定义的css,可以覆盖掉一部分bootstrap的样式,例如字体颜色就可以改变,但是有些也改变不了,别人说是css权重的问题
- Flex动态改变按钮图标(icon)
- 解决javascript动态改变img的src属性图片不显示问题
- flex的tree动态加载大量数据与滚动条相关问题探讨
- 关于 ajax 动态返回数据 css 以及 js 失效问题
- 通过css(name,value)方法动态的改变字体大小
- Flex动态调用css实现方法
- jquery的.html()动态遍历html代码后,对原有的css和js无法控制问题
- listView界面改变后滑动时的复用问题
- CSS动态改变样式
- js动态改变HiddenField值,后台不能获取值的问题
- 解决javascript动态改变img的src属性图片不显示问题
- jquery动态改变onclick属性失效的问题!
- 关于iframe自适应高度,解决一个iframe动态改变url,改变页面同时解决高度自适应问题
- jquery动态改变onclick属性导致失效的问题解决方法
- 用动态CSS解决网页的大小字体问题~~论坛推荐~!!!
- [Android界面] 屏幕方向改变资源处理问题 [