2011年1月12日 星期三

Flex Localization 在地化 閱讀筆記三:Loacal資源配置實做

  • new Flex project。
  • 設定專案名稱為Localization_Demo。
  • 選擇你想用的SDK版本,本篇使用4.1,本篇撰寫時SDK已經有4.5版本,
若要使用最新版本,於adobe open Source中下載SDK,下載完後將其放至
Adobe Flash Builder 4\sdks目錄底下,然後選擇配置Flex SDK將其加入。
  • 建立locale文件夾,並於locale中建立en_USzh_TW兩個文件夾,這兩個文件夾將會各自置放properties的在地化資源檔,建立完之後目錄結構如下。

  • 在en_US與zh_TW中建立properties檔,文件名稱設定為localizedContent.properties
完成後結構




  • 建立images文件夾並放入兩張圖片,命名為image_tw.jpg與image_us.jpg。
  • 於localizedContent.properties上按下滑鼠右鍵選擇屬性,將文件編碼改成UTF-8,如圖。


























  • 編輯localizedContent.properties檔案,如下
//en_US的內容
#Localization resources in American Englist
pageTitle=Internationalization Demo
language=American Englist
flag=Embed("images/image_us.jpg")
 
//zh_tw的內容
#Localization resources in Taiwan Chinese
pageTitle=國際化範例
language=繁體中文
flag=Embed("images/image_tw.jpg")
 
§如此到這裡,已經準備好國際化的測試資源,接下來將要告知編譯器local的路徑

在三種告知路徑的方法中我們使用編譯器參數方式來示範,其他方式請參考Flex Localization 在地化 閱讀筆記二:properties Local資源檔與其配置簡介


  • 利用編譯器參數(Compiler Arguments),在欄位中輸入-locale=en_US -source-path=./locale/{locale} -allow-source-path-overlap=true後按下確定,如下圖。




















  • 編寫Application來測試Localization功能
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
  <fx:Script>
   <![CDATA[
   ]]>
  </fx:Script>
<s:HGroup>
 <s:Panel title="@Resource(key='pageTitle', bundle='localizedContent')">
  <;s:VGroup>
   <mx:Image source="@Resource(key='flag', bundle='localizedContent')"/>
   <s:Label text="@Resource(key='language', bundle='localizedContent') "/>
  </s:VGroup>
 </s:Panel>
</s:HGroup>
</s:Application>


  • 如此執行完後畫面如下,因為在編譯器上預設是使用en_US,所以會抓取en_US的資源




















  • 如果將編譯器參數(Compiler Arguments),改成-locale=zh_TW -source-path=./locale/{locale} -allow-source-path-overlap=true就會出現台灣本地化畫面。


到此,國際化資源配置已經成功,下個章節我們來做一個使用程序來做動態的locale切換。

沒有留言:

張貼留言