flex动态换皮肤

   在同一个Application中动态切换主题，这里采用的是动态引用不同的CSS文件

具体步骤如下：

     1）创建CSS文件
      skyTheme.css

  /* CSS file */
.backgroudSkin
{
   backgroundColor: #89caec;
   fontWeight:bold;
 fontSize:12;
}
.applicationBar
{
    cornerRadius:20; 
    stype:solid;
    fillAlphas:0.42, 0.42;
}

 

         treeTheme.css

 

/* CSS file */
.backgroudSkin
{
   backgroundColor: #bee38a;
   fontWeight:bold;
 fontSize:12;
}
.applicationBar
{
    cornerRadius:5; 
    fillAlphas:0, 0;
}

 

   2）将每一个CSS文件右键选择"Compile CSS to SWF"

       会在WebRoot的编译后的包目录中显示skyTheme.swf 和treeTheme.swf

   3）创建ThemeTest.mxml

 

<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.core.FlexGlobals;
			import mx.events.FlexEvent;
			import mx.styles.StyleManager;
			
			private var style:String;

			public  var skinCollection:ArrayCollection = new ArrayCollection([
				{label:"treeTheme",data:"com/mis/resource/themes/defaults/treeTheme.swf"},
				{label:"skyTheme",data:"com/mis/resource/themes/skin1/skyTheme.swf"}
			]);
			
private function changeTheme(theme:String):void{
	//切换CSS文件
          //this.styleManager.loadStyleDeclarations2(theme,true); 		
	FlexGlobals.topLevelApplication.styleManager.loadStyleDeclarations2(theme,true);
 }			
		]]>
	</fx:Script>

 

装在到combox中：

<mx:ApplicationControlBar x="10" y="10" width="100%" height="50" styleName="applicationBar">
	<mx:ComboBox id="skinSelector" dataProvider="{skinCollection}" prompt="Choose a theme"
		change="{changeTheme(skinSelector.selectedItem.data);}" width="124"/>
	</mx:ApplicationControlBar>

 

 即可完成皮肤的转换