Flex 中的Skin Sytle Theme

       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 实现了他这一思路。

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

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

     我的步骤是 

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

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

    

1. Button
2. {
3.     disabledSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_upIcon");
4.     downSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_downIcon");
5.     overSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_disabledIcon");
6.     upSkin: Embed(source="../skins/CustomSkinA.swf",symbol="RadioButton_overIcon");
7. }

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

    (3) 在Flex程序里，用StyleManager加载这个SkinA.swf。他会自动应用这个swf中的CSS设置。我们可以在 Flex 组件的StyleName属性中设置它所关联的CSS配置。

    用户怎么更换他的皮肤呢。

    1〉 他得先拿到CustomSkinA.fla, 修改里面的MovieClip的外观( 但是不能修改Class Name,因为Flex程序里面控件都依赖这个名字来拿到他的外观）编译成swf.

    2〉 修改 SkinA.css（如果只是想改变控件的话，这里不需要修改，因为你已经在fla中改了），可以改变背景色之类的，或者迁入图片（这也许就是theme的改变）。

    3>  将这个SkinA.swf 用命令行编译成swf文件。替换掉原来的那个SkinA.swf.重新运行程序，这样皮肤的改变就完成了。