Flex3学习轨迹：简单的换肤功能

换肤的主要实现思路是动态的加载包含样式的SWF文件，从而更新组件外观。包含SWF文件中内嵌了一些相关的图片、字体、样式和皮肤等资源。这些资源并没有内嵌到主应用程序中。这样一来就有两个好处：一方面实现动态更新样式和皮肤；另一方面减少初始化加载主应用程序的时间。

实现方法： ? ? ? 主要是使用StyleManager类提供的方法，动态的加载SWF文件的时候，可调用loadStyleDeclarations 和 unloadStyleDeclarations 方法。

一下三个步骤能实现运行时加载样式：

1、为应用程序编写CSS样式文件。

2、将CSS文件编译为包含样式的SWF文件；

3、调用loadStyleDeclarations/unloadStyleDeclarations方法加载和卸载SWF文件。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" >	
	<mx:Script>
    	<![CDATA[
            import mx.events.ItemClickEvent;
            import mx.styles.StyleManager;
            private var myStyle:CSSStyleDeclaration;
            [Embed(source="assets/buttons/up.png")]
			public var up:Class;
			[Embed(source="assets/buttons/down.png")]
			public var down:Class;
			[Embed(source="assets/buttons/over.png")]
			public var over:Class;

            
            private function clickHandler(event:ItemClickEvent):void 
            {
            	if(event.index == 1)
            	{
            		StyleManager.loadStyleDeclarations("assets/blueStyle.swf",true,false,null,null);           		         		
            		
            		myStyle = new CSSStyleDeclaration('myStyle');
            		myStyle.setStyle('upSkin',up);
            		myStyle.setStyle('downSkin',down);
            		myStyle.setStyle('overSkin',over);            		
            		StyleManager.setStyleDeclaration(".whiteButton",myStyle,true);            		
            	}
            	else
            	{
            		StyleManager.clearStyleDeclaration('.whiteButton',true);
            		StyleManager.unloadStyleDeclarations('assets/blueStyle.swf',true);            		            		
            	}            	
            }
        ]]>
    </mx:Script>
	<mx:Panel width="300" height="200" layout="horizontal" title="应用程序换肤">		
		<mx:VBox width="100%" height="100%">
    		<mx:HBox width="100%" height="70">
    			<mx:ApplicationControlBar width="100%">
    				<mx:Label text="选择皮肤：" />
    				<mx:ToggleButtonBar selectedIndex="0" itemClick="clickHandler(event);">
            			<mx:dataProvider>
                			<mx:Array>
                    			<mx:String>默认皮肤</mx:String>
                    			<mx:String>苹果皮肤</mx:String>                    			
                			</mx:Array>
            			</mx:dataProvider>
        			</mx:ToggleButtonBar>
    			</mx:ApplicationControlBar>        
    		</mx:HBox>
    		<mx:HBox width="100%" height="100%" horizontalAlign="center" paddingBottom="10" paddingTop="10" paddingLeft="10" paddingRight="10">
    			<mx:Button id="whiteButton" label="白色按钮" styleName="whiteButton" />
    			<mx:Button id="blueButton" label="蓝色按钮" />    			    		
    		</mx:HBox>
		</mx:VBox>
	</mx:Panel>	
</mx:Application>