Flex 2.0.1 - 瞭解執行時期動態載入 CSS

Chui-Wen Chiu
http://chuiwenchiu.spaces.live.com
2007.01.09

簡介
動態載入CSS的一個重要特色是可以動態更換應用程式的外皮，Flex 支援的執行期 CSS 可以內嵌自訂字型、自訂元件的外觀和圖形，基本上編譯之後就是一個 SWF 檔案。那要如何產生這樣的 SWF 檔案呢？Flex 2.0.1 的 mxmlc 編譯器已經支援編譯 css 檔案成為 SWF，所以，假如有一個 'style1CSS.css' 且內嵌的相關資料都位於 CSS 指定目錄下，你只需要如下的命令即可產生 CSS 格式的 SWF。

mxmlc style1CSS.css

假如你使用 Flex Builder 2.0.1，則只需要在 CSS 檔案右鍵選單中使用"Compile CSS to SWF"，即可在 bin 目錄下看到產生好的 SWF。


範例：動態切換外觀
1. 使用 Flex 2 Style Explorer 產生三個不同的 CSS 並分別取名為 style1CSS.css, style2CSS.css 和 style3CSS.css

style1CSS.css	style2CSS.css	style3CSS.css
Application { backgroundGradientAlphas: 1, 0.21; themeColor: #ffff00; color: #cc0000; }	Application { backgroundGradientAlphas: 1, 0.21; themeColor: #0000ff; color: #ffffcc; }	Application { backgroundGradientAlphas: 1, 0.21; themeColor: #ff0000; color: #ffff00; }

2. 建立測試主程式

runtime_css.mxml

xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="StyleManager.loadStyleDeclarations( 'style1CSS.swf' )" viewSourceURL="srcview/index.html"> id="styleCombo" top="10" left="10" right="10" dataProvider="['style1CSS','style2CSS','style3CSS']" change="StyleManager.loadStyleDeclarations( styleCombo.selectedItem + '.swf' )" />

執行結果類似 Runtime CSS Example

範例中在起始化事件中使用 StyleManager 載入 style1CSS.swf。另外，也可以再執行階段透過 ComboBox 動態切換不同的 CSS 外觀。

常見問題：
1. 是否有網站提供佈景主題下載？
可以逛逛 http://www.scalenine.com/

參考資料：
[1] Flex 2.0.1 - Understand Runtime CSS
[2] StyleManager LiveDoc