Flex 中的Skin Sytle Theme

最新推荐文章于 2024-11-05 11:29:19 发布

wangchibest

最新推荐文章于 2024-11-05 11:29:19 发布

阅读量743

点赞数

文章标签： flex radiobutton css button wrapper application

本文链接：https://blog.csdn.net/wangchibest/article/details/3704671

版权

Skin,Style,Theme 我认为在 FLex 中可以通过对css 文件的依赖，集中处理。

[Skin] : 由图片，Flash 元件，Flex MXML 以及as文件自定义几种。

http://xinsync.xju.edu.cn/index.php/archives/2241 文中介绍了皮肤的制作方法。

[Theme 和 style] : 我始终觉得两者的定义很难分得清，所以干脆就不要分那么清楚了。

我的想法是 css 文件配置色彩，所有的Component 的sytlename 都指向 css中的定义。一个css 就是一种界面体验。

下面就是怎么动态的改变程序的界面了。

http://www.duzengqiang.com/blog/article.asp?id=254 里面提到了如何动态加载skin,但是我在Flex里面就是没有试出来。他使用一个wrapper类来包装一个Flash做出来的界面swf,程序运行时，通过类名称来反射出wrapper中嵌入的界面swf,从而访问界面swf中的UIComponent,取到皮肤。

我用Flex+CSS 实现了他这一思路。

 
  <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     applicationComplete="InitApp()">
    <mx:Script>
        <![CDATA[
            private const CssSkinLocation : String = "skinA.swf";
            
            //Load Skin at begining, so all elements can use style in this css file.
            private function InitApp():void
            {
                var styleLoader:IEventDispatcher = StyleManager.loadStyleDeclarations(CssSkinLocation);
            }
        ]]>
    </mx:Script>
    <mx:Button x="122" y="116" label="Button"/> 
    <mx:Button x="122" y="167" label="Button"/>
</mx:Application>
<!--
    We can load skin dynamicly here. we can put "var styleLoader:IEventDispatcher = StyleManager.loadStyleDeclarations(CssSkinLocation);"
    in an button events. so click a button to change skin. 
    [ mode ] 
    First , Create UI Skin in FLASH CS3, Convert them to FlexUIComponent.
    Second, Embed them in css file. Convert it to swf file.
    Third,  Load the css swf in Flex
    
    [ How to use ] 
    First , User Modify our Flash template. Publish SWF
    Then  , User Modify the css file, change the embed source to his modification swf file.
    Third , User use command line build this css swf.
    Last  , replace the default css swf with his own swf.
    
    [ Example ]
    We have (customSkinA.css,skinA.css) and (customB.swf,skinB.css) 
    1> build skinB.css to skinB.swf.
    2> Rename skinB.swf to skinA.swf , replace the orignal skinA.swf in Bin folder.
 -->
 
 

这里我没有将 var styleLoader:IEventDispatcher = StyleManager.loadStyleDeclarations(CssSkinLocation);加载皮肤的代码放到Button 事件中，是因为我的程序没有运行时改变皮肤的需要，如果需要像播放器那样动态改变皮肤，就可以这么做。

我的步骤是

（1）做一个FLA 画好元件，将他们转成FlexComponent(得下一个插件)，编译成swf.（比如 CustomSkinA.swf）

（2）在Flex 中 Create 一个 CSS 文件(SkinA.css)

 
  Button
{
    disabledSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_upIcon");
    downSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_downIcon");
    overSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_disabledIcon");
    upSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_overIcon");
}
 
 

将这个CSS文件设置编译为 swf 文件，这样前面的CustomSkinA.swf也被嵌在了这个CSS生成的SWF文件里面了（SkinA.swf）。