GWT - 國際化

上一頁
下一頁

GWT 提供三種國際化 GWT 應用的方法，我們將演示靜態字串國際化，這是專案中最常用的方法。

序號 技術與描述
1

靜態字串國際化

此技術最為普遍，執行時開銷極小；對於翻譯常量字串和引數化字串都非常高效；實現最簡單。

靜態字串國際化使用標準 Java 屬性檔案來儲存翻譯後的字串和引數化訊息，並建立強型別 Java 介面來檢索其值。
2

動態字串國際化

此技術非常靈活，但比靜態字串國際化慢。宿主頁面包含本地化字串，因此當我們新增新的語言環境時，不需要重新編譯應用程式。如果 GWT 應用程式要與現有的伺服器端本地化系統整合，則應使用此技術。
3

可本地化介面

此技術是三種技術中最強大的。實現 Localizable 允許我們建立自定義型別的本地化版本。這是一種高階國際化技術。

GWT 應用國際化的工作流程

步驟 1 - 建立屬性檔案

建立包含應用程式中要使用的訊息的屬性檔案。在我們的示例中，我們建立了一個 **HelloWorldMessages.properties** 檔案。

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

建立包含特定於語言環境的翻譯值的屬性檔案。在我們的示例中，我們建立了一個 **HelloWorldMessages_de.properties** 檔案。此檔案包含德語翻譯。_de 指定德語語言環境，我們將在應用程式中支援德語。

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

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

步驟 2 - 將 i18n 模組新增到模組描述符 XML 檔案

更新模組檔案 **HelloWorld.gwt.xml** 以包含對德語語言環境的支援

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   ...
   <extend-property name = "locale" values="de" />
   ...
</module>

步驟 3 - 建立與屬性檔案等效的介面

透過擴充套件 GWT 的 Messages 介面來建立 HelloWorldMessages.java 介面，以包含對國際化的支援。它應該包含與屬性檔案中的鍵相同的函式名。佔位符將被字串引數替換。

public interface HelloWorldMessages extends Messages {
	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

步驟 4 - 在 UI 元件中使用訊息介面。

在 **HelloWorld** 中使用 **HelloWorldMessages** 物件獲取訊息。

public class HelloWorld implements EntryPoint {
   
   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
   ...
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
   ...
   }
}

國際化 -完整示例

此示例將引導您完成簡單的步驟，以演示 GWT 應用程式的國際化功能。

按照以下步驟更新我們在《GWT - 建立應用》章節中建立的 GWT 應用程式：

步驟 描述
1 建立一個名為 *HelloWorld* 的專案，放在 *com.tutorialspoint* 包下，如《GWT - 建立應用》章節中所述。
2 修改 *HelloWorld.gwt.xml*、*HelloWorld.css*、*HelloWorld.html* 和 *HelloWorld.java*，如下所述。保持其餘檔案不變。
3 編譯並執行應用程式以驗證已實現邏輯的結果。

以下是修改後的模組描述符 **src/com.tutorialspoint/HelloWorld.gwt.xml** 的內容。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name = 'com.google.gwt.user.User'/>

  <!-- Inherit the default GWT style sheet.                       -->
  <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

  <!-- Specify the app entry point class.                         -->
  <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
  <extend-property name = "locale" values="de" />
  <!-- Specify the paths for translatable code                    -->
  <source path = 'client'/>
  <source path = 'shared'/>

</module>

以下是修改後的樣式表文件 **war/HelloWorld.css** 的內容。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

以下是修改後的 HTML 宿主檔案 **war/HelloWorld.html** 的內容。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>
   <body>

      <h1 id = "gwtAppTitle"></h1>
      <div id = "gwtContainer"></div>

   </body>
</html>

現在在 **src/com.tutorialspoint/client** 包中建立 HelloWorldMessages.properties 檔案，並將以下內容放入其中

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

現在在 **src/com.tutorialspoint/client** 包中建立 HelloWorldMessages_de.properties 檔案，並將以下內容放入其中

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

現在在 **src/com.tutorialspoint/client** 包中建立 HelloWorldMessages.java 類，並將以下內容放入其中

package com.tutorialspoint.client;
import com.google.gwt.i18n.client.Messages;

public interface HelloWorldMessages extends Messages {	
   @DefaultMessage("Enter your name")
   String enterName();
 
   @DefaultMessage("Click Me")
   String clickMe();
 
   @DefaultMessage("Application Internationalization Demonstration")
   String applicationTitle();

   @DefaultMessage("Hello {0}")
   String greeting(String name);
}

讓我們使用以下 **src/com.tutorialspoint/HelloWorld.java** Java 檔案的內容，我們將用它來演示 GWT 程式碼的國際化功能。

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyUpEvent;
import com.google.gwt.event.dom.client.KeyUpHandler;

import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   /* create an object of HelloWorldMessages interface 
      using GWT.create() method */
   private HelloWorldMessages messages = 
   GWT.create(HelloWorldMessages.class);
   
   public void onModuleLoad() {
      /*create UI */
      final TextBox txtName = new TextBox(); 
      txtName.setWidth("200");
      txtName.addKeyUpHandler(new KeyUpHandler() {
         @Override
         public void onKeyUp(KeyUpEvent event) {
            if(event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
               Window.alert(getGreeting(txtName.getValue()));
            }				
         }
      });
      Label lblName = new Label(messages.enterName() + ": ");

      Button buttonMessage = new Button(messages.clickMe() + "!");

      buttonMessage.addClickHandler(new ClickHandler() {			
         @Override
         public void onClick(ClickEvent event) {
            Window.alert(getGreeting(txtName.getValue()));
         }
      });

      HorizontalPanel hPanel = new HorizontalPanel();	
      hPanel.add(lblName);
      hPanel.add(txtName);      

      VerticalPanel vPanel = new VerticalPanel();
      vPanel.setSpacing(10);
      vPanel.add(hPanel);
      vPanel.add(buttonMessage);
      vPanel.setCellHorizontalAlignment(buttonMessage, 
      HasHorizontalAlignment.ALIGN_RIGHT);

      DecoratorPanel panel = new DecoratorPanel();
      panel.add(vPanel);
      Label titleLabel = new Label(messages.applicationTitle());
      //Add title to the application
      RootPanel.get("gwtAppTitle").add(titleLabel);
      // Add widgets to the root panel.
      RootPanel.get("gwtContainer").add(panel);
   }  
   
   public String getGreeting(String name){
      return messages.greeting(name + "!");
   }
}

準備好所有更改後，讓我們像在《GWT - 建立應用》章節中那樣，在開發模式下編譯並執行應用程式。如果應用程式一切正常，則會產生以下結果：

GWT Internationalization Demo

現在更新 URL 以包含 locale=de。設定 URL： *http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de*。如果應用程式一切正常，則會產生以下結果：

GWT Intern German
列印頁面
上一頁
下一頁
廣告