Feeds:
文章
留言

Archive for 一月 9th, 2007

簡介
動態載入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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml&quot;
 layout="absolute"
 initialize="StyleManager.loadStyleDeclarations( ‘style1CSS.swf’ )"
 viewSourceURL="srcview/index.html">
 
 <mx:ComboBox
  id="styleCombo"
  top="10" left="10" right="10"
  dataProvider="[‘style1CSS’,’style2CSS’,’style3CSS’]"
  change="StyleManager.loadStyleDeclarations( styleCombo.selectedItem + ‘.swf’ )" />
 
</mx:Application>

執行結果類似 Runtime CSS Example

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

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

參考資料:
[1] Flex 2.0.1 – Understand Runtime CSS
[2] StyleManager LiveDoc

 

 

Read Full Post »