flex4動态更換皮膚

as3程式設計:Flex4項目動态換皮膚的實作方法

在Flex項目的源檔案夾内建立一個assets檔案夾，用來放置css樣式檔案

建立main.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" width="450" height="262" creationComplete="init();">

 <fx:Declarations>

  <!-- 将非可視元素（例如服務、值對象）放在此處 -->

 </fx:Declarations>

 <fx:Metadata>

  [ResourceBundle("admin")]

 </fx:Metadata>

 <fx:Script source="main.as"/>

 <mx:ComboBox id="cmbStyle" dataProvider="{styles}" x="261" y="10" width="71"/>

 <mx:Button id="btnSubmit" x="178" y="189" label="{resourceManager.getString('admin','btnSubmit')}"/>

 <mx:Button id="btnCancel" x="280" y="189" label="{resourceManager.getString('admin','btnCancel')}"/>

</mx:Application>

建立main.as

import mx.collections.ArrayCollection;

import mx.controls.ComboBox;

import mx.events.ListEvent;

import mx.styles.StyleManager;

[Bindable]

private var styles:ArrayCollection=new ArrayCollection([{label:"春天",data:1},{label:"夏天",data:2},{label:"秋天",data:3}]);

private function init():void

{

 this.cmbStyle.addEventListener(ListEvent.CHANGE,cmbStyles_changeHandler);

}

private function cmbStyles_changeHandler(event:ListEvent):void

{

 var cmbStyles:ComboBox=event.target as ComboBox;

 switch(cmbStyles.selectedItem.data)

 {

  case 1:

   changeStyle("style_Spring");

   break;

  case 2:

   changeStyle("style_Summer");

   break;

  case 3:

   changeStyle("style_Autumn");

   break;

 }

}

private function changeStyle(style:String):void

{

 //更換皮膚

 StyleManager.loadStyleDeclarations("assets/"+style+".swf");

}

建立style_Spring.css

@namespace mx "library://ns.adobe.com/flex/mx";

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#bluestripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:12px;

}

注：backgroundImage: Embed(source=”assets/backgrounds.swf#redstripe”);這裡是用了自己的swf檔案中的皮膚，這裡大家可以自己做，如果隻是看效果把這行注釋了

建立style_Summer.css

@namespace mx "library://ns.adobe.com/flex/mx";

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#greenstripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:14px;

}

建立style_Autumn.css

@namespace mx "library://ns.adobe.com/flex/mx";

mx|Application {

 backgroundImage: Embed(source="assets/backgrounds.swf#redstripe");

 themeColor: #009999;

}

#btnSubmit

{

 font-size:16px;

}

以上css樣式檔案全部放在上面建立的assets檔案夾中，然後在包資料總管中點右鍵->将CSS編譯為SWF，每個css檔案都要做這一步，最後運作就可以看到效果了