Flex - 國際化

Flex 提供兩種國際化 Flex 應用程式的方法，我們將演示編譯時國際化方法，這是專案中最常用的方法。

序號	技術及描述
1	編譯時國際化此技術最為普遍，執行時開銷極少；這是一種非常高效的技術，用於翻譯常量和引數化字串；實現最簡單。編譯時國際化使用標準屬性檔案來儲存翻譯後的字串和引數化訊息，這些屬性檔案直接編譯到應用程式中。
2	執行時國際化此技術非常靈活，但比靜態字串國際化慢。您需要單獨編譯本地化屬性檔案，將它們放在應用程式外部，並在執行時載入它們。

序號

技術及描述

編譯時國際化

此技術最為普遍，執行時開銷極少；這是一種非常高效的技術，用於翻譯常量和引數化字串；實現最簡單。編譯時國際化使用標準屬性檔案來儲存翻譯後的字串和引數化訊息，這些屬性檔案直接編譯到應用程式中。

執行時國際化

此技術非常靈活，但比靜態字串國際化慢。您需要單獨編譯本地化屬性檔案，將它們放在應用程式外部，並在執行時載入它們。

Flex 應用程式國際化的工作流程

步驟 1 – 建立資料夾結構

在 Flex 專案的 src 資料夾下建立一個 locale 資料夾。這將是應用程式將支援的所有語言環境的屬性檔案的父目錄。在 locale 資料夾中，為應用程式將支援的每個語言環境建立一個子資料夾。語言環境的命名約定為

{language}_{country code}

例如，en_US 代表美國的英語。語言環境 de_DE 代表德語。示例應用程式將支援兩種常用語言：英語和德語。

步驟 2 – 建立屬性檔案

建立包含要在應用程式中使用的訊息的屬性檔案。在我們的示例中，我們在src > locale > en_US資料夾下建立了一個HelloWorldMessages.properties檔案。

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

建立包含特定於語言環境的翻譯值的屬性檔案。在我們的示例中，我們在src > locale > de_DE資料夾下建立了一個HelloWorldMessages.properties檔案。此檔案包含德語翻譯。_de 指定德語語言環境，我們將支援應用程式中的德語。

如果您使用 Flash Builder 建立屬性檔案，請將檔案的編碼更改為 UTF-8。選擇檔案，然後右鍵單擊它以開啟其屬性視窗。選擇文字檔案編碼為其他 UTF-8。應用並儲存更改。

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

步驟 3 – 指定編譯器選項

右鍵單擊您的專案並選擇屬性。
選擇 Flex 編譯器，並在“其他編譯器引數”設定中新增以下內容：

-locale en_US de_DE

右鍵單擊您的專案並選擇屬性。
選擇 Flex 構建路徑，並在“源路徑”設定中新增以下內容：

src\locale\{locale}

國際化示例

現在讓我們按照以下步驟在 Flex 應用程式中測試國際化技術：

步驟	描述
1	按照Flex - 建立應用章節中的說明，建立一個名為HelloWorld、包名為com.tutorialspoint.client的專案。
2	按如下所述修改HelloWorld.mxml。保持其餘檔案不變。
3	編譯並執行應用程式以確保業務邏輯按要求工作。

以下是修改後的 mxml 檔案src/com.tutorialspoint/HelloWorld.mxml的內容。

<?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 = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
               ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalAlign = "center" verticalAlign = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString('HelloWorldMessages','clickMe')}" 
               click = "clickMe_clickHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用章節中一樣，在正常模式下編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[ 線上試用 ]

使用語言下拉選單更改語言，然後檢視結果。

列印頁面