坚信科学,分享技术

2018全新版本,未来在blog.54chen.com更新博客!

>>>尝试更加利于阅读的2014版科学院,以后都在新版上写。

flex实时换肤术-动态切换CSS样式表文件

HTML中有一个非常好的特性就是可以动态切换页面链接的CSS样式表,而FLEX并不具备动态导入CSS的特性,因为FLEX的所有的UI外观都是在后台SERVER生成在发布到前台的(当然,通过AS可以实时更改UI外观setStyle,这是单个更改的方式,并不是实时的CSS文件切换),一直觉得挺不爽的,今天在mannu看到一个使用_global.styles来实现动态切换CSS文件的非常巧妙的方式:

首先,因为FLEX是将CSS编译进SWF文件的,所有我们将我们需要切换的CSS编译成SWF文件;

green.css Label{
color:#00FF00;
fontSize:20px;
}

green.mxml <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Style source="green.css"></mx:Style>

</mx:Application>

类似的还有red.css/red.mxml,blue.css/blue.mxml。 然后,我们要切换到相应的CSS就直接LOAD相应的SWF文件; 最后,将_global.styles设置为所导入的SWF文件的_global.styles 。 这里有一个工具封装好的工具类:

RuntimeStyle.as import mx.controls.Loader;
import mx.core.MXMLObject;
import mx.utils.Delegate;

class RuntimeStyle implements MXMLObject
{

private var _document:Object;
private var loader:Loader;

public function initialized(document:Object, id:String):Void
{
_document = document;
}

private var _source:String;

public function get source():String
{
return _source;
}

public function set source(value:String):Void
{
if (_source != value)
{
_source = value;

if (loader == undefined)
{
loader = Loader(_document.createClassObject(Loader,
"runtimeStyleLoader", 21983));
loader.width = loader.height = 0;
loader.addEventListener("complete",
Delegate.create(this, loader_complete));
}

loader.source = _source + ".swf";
}
}

private function loader_complete(event:Object):Void
{
_global.styles = Loader(event.target).content._global.styles;
_document.styleName = _document.styleName == "!" ? "@" : "!";
}

}

测试代码:cssChg.mxml<local:RuntimeStyle xmlns:local="*"

source="{stylesWrappers.selectedItem.source}" />

<mx:Model id="alternateStyles"

source="alternateStyles.xml" />

<mx:ComboBox id="stylesWrappers"
dataProvider="{alternateStyles.stylesheet}"
labelField="name" selectedIndex="-1" />

alternateStyles.xml <?xml version="1.0" encoding="UTF-8"?>
<styles>

<stylesheet>
<name>red</name>
<source>red.mxml</source>
</stylesheet>
<stylesheet>
<name>green</name>
<source>green.mxml</source>
</stylesheet>
<stylesheet>
<name>blue</name>
<source>blue.mxml</source>
</stylesheet>

</styles>


原创文章如转载,请注明:转载自五四陈科学院[http://www.54chen.com]
本文链接: http://www.54chen.com/web-ral/flex%e5%ae%9e%e6%97%b6%e6%8d%a2%e8%82%a4%e6%9c%af%ef%bc%8d%e5%8a%a8%e6%80%81%e5%88%87%e6%8d%a2css%e6%a0%b7%e5%bc%8f%e8%a1%a8%e6%96%87%e4%bb%b6.html

This entry was posted in WEB相关 and tagged , . Bookmark the permalink.

1 Response » to “flex实时换肤术-动态切换CSS样式表文件”

Leave a Reply