Flex 動態CSS , 動態Style ,利用StyleManager

§使用StyleManager來動態更換CSS檔(動態更換Skin)
以下將簡單表示動態更換Flex的CSS，在CSS中若有設定組件使用swf即達到動態更換Skin
Step1.在Flex專案，於Src底下建立一個css資料夾(packge)。
Step2.建立如下兩個CSS測試檔，取名為projectA.css與projectB.css。
//projectA
/* CSS file */
Panel{
borderColor: #009966;
}
 
//projectB
/* CSS file */
Panel{
borderColor: #0066ff;
}

Step3.於CSS檔上按下滑鼠右鍵，選擇Compile CSS to SWF將兩隻CSS,Compile成SWF。

 
 
 
 
Setep4.建立以下mxml測試檔


<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="main();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
　　import mx.events.StyleEvent;
　　private var enable:Boolean;
private function main():void
{
enable = true;
}
　　private var path:String;
　　private function changedCSS():void
{
if(!enable)return;
if(btn.selected)
{
path = "css/projectA.swf";
}
else
{
path = "css/projectB.swf";
}
btn.selected = !btn.selected;
//
　　　StyleManager.loadStyleDeclarations(path).addEventListener(StyleEvent.COMPLETE ,onStyleComplete);
}
private function onStyleComplete(e:StyleEvent):void
{
}

]]>
</mx:Script>
<mx:VBox>
<mx:Panel id="testTarger" width="300" height="200">
</mx:Panel>
<mx:Button id="btn" mouseDown="changedCSS()"/>
</mx:VBox>
</mx:Application>
 
●重要,不要讓CSS檔與mxml檔名相同,因為這樣剛好會編譯出相同名稱的SWF,會產生錯誤。
//List元件需注意要呼叫invalidateList()
 
●備註
//有些子元件更新需注意元件生命週期運作的主要method
//Itemrenderer 可Override Data , styleChanged , updateDisplayList等來近些管理。