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=;
var style:XML;
var styles:Array = cssText.split('}');//cssText 为CSS的内容,纯文本
styles.splice(styles.length-1, 1);
for (var i:int=0; istyle = ;
var stylePortions:Array = styles[i].split('{');
var selectors:Array = stylePortions[0].split(',');
for (var s:String in selectors){
style.selectors.appendChild(this.parseSelector(sel ectors[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(pr operties[p]));
}
styleSheet.appendChild(style);
}
//样式的应用
//其实动态应用CSS的瓶颈问题就在这里,即如何将样式以更高的性能应用到所有组件上。
方案一.StyleManager.getStyleDeclaration(styleName).setSt yle("styleProperty","stylevalue");
缺陷:如果组件多,应用程序会挂掉。
方案二、UIObject.setStyle("styleProperty","stylevalue")
缺陷:编码不灵活,也会增加编码量。需要有一个界面组件的集合,遍历组件并应用样式。
目前我选择了第二种方案,感觉不是很好。但也没有办法,目前仍在苦苦寻找解决办法!
发表评论
-
perl学习日记8正则表达式的应用
2012-07-06 09:44 8971.1 使用m// ... -
Java正则表达式入门
2012-07-06 09:36 568I am very grateful to her mot ... -
VC中的使用Skin++的步骤
2012-07-06 09:29 744Skin++界面库下载地址:http://www.uipo ... -
top.document.getElementById在模态窗口中的使用
2012-07-05 20:44 685普通页面中top.document.getElementB ... -
创建flex组件
2012-07-03 13:42 949现在,考虑一下当 ... -
Flex与.net交互
2012-07-02 10:09 470方法一: 把Flex生成的SWF文件(在目录../h ... -
Flex屏蔽默认右键菜单。
2012-07-02 10:09 680首先需要修改index.template.html生成的静 ... -
flex按钮使用背景图片
2012-07-02 10:09 748基于美化的需要,有时候我会被要求给按钮贴上图片 下面 ... -
2012-07-02 09:41 5884...
-
实战 OpenLaszlo 与 db4o
2012-07-01 09:25 529本文于去年年底完 ... -
ExtJS 4 Grid组件
2012-07-01 09:25 523我们正 ... -
flash特效原理:标签云
2012-07-01 09:25 657其实标签云是一个比较常见的特效类,在wondefl里 ... -
ActionScript3.0学习之路(1)――ActionScript3.0初体验
2012-07-01 09:25 500最近换了一家公司,由于业务需要,要使用Flex,而Acti ... -
windows下制作PHP扩展
2012-07-01 09:25 477转自:http://demon.tw/software/c ... -
AIR/Flex学习笔记(2)
2012-06-30 11:12 521AIR/Flex学习笔记(2) 2010 ... -
AS3.0类库整理
2012-06-30 11:12 303AS3.0类库整理 2011年10月26日 1、as3e ... -
FLEX和FLASH
2012-06-30 11:12 301FLEX和FLASH 2010年12月28日 ... -
Adobe Flex
2012-06-30 11:12 371Adobe Flex 2010年12月07日 Macro ... -
Flex
2012-06-30 11:11 310Flex 2011年05月05日 ... -
Linux内核设计与实现读书笔记(8)-内核同步方法
2012-01-20 08:34 669Linux内核设计与实现读书笔记(8)-内核同步方法 201 ...
相关推荐
Flex3.0 使用CSS美化界面 很简单的事例,高手就不用看了,献丑
flex 动态加载css文件方法总结,增加flex的界面美化效果。简单易懂,易操作。
flex动态加载css实例flex动态加载css实例flex动态加载css实例
Flex动态CSS,设定整个application的CSS样式
动态生成控件演示,很简单的,供初学者参考
FLEX 动态树 动态图表 FLEX 动态树 动态图表
网页布局(layout)是CSS的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。 2009年,W3C提出了一...
Flex3中应用CSS完全详解手册 在FLEX中使用样式方法 一、使用本地样式定义 二、使用外部样式表 三、使用内联样式 四、使用setStyle()方法 五、脚本方法 Application组件样式属性……
用于模仿HTML的CSS样式表中的背景重复显示功能
Flex中的CSS样式 详尽的讲解
Flexy是使用Flex实现的最小CSS框架
flex,css帮助 Flex_Css完全手册。。。。。。。flex,css帮助 Flex_Css完全手册。。。。。。
flex css 模版经典,免除你设计css的烦恼!
D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全手册D:\GXSKY\Flex\SDK\Flex+Css完全...
flex 各组件对应的css样式属性大全整理了下希望帮助到你们
这个就相当于flex的CSS2.0帮助文档 详细的告诉你flex中每个样式的使用方法
flex css Aeon flex css Aeon
Flexcss完全手册.pdf
编辑完这个FLEX下的CSS说明后,我基本已经兵临崩溃边缘了。在些天在AIRIA下了不少好东西,今天终于有空,也发一个比较不错的东西给大家,相信都比较需要这个FLEX下的CSS使用方法的详细说明(好像我这份还不够详细,...
Flex各种控件,样式生成工具(定制各种Flex按钮网页css样式),可视化操作,自动生成css代码。适合界面开发者使用,实现快速开发。