GWT-国際化

GWTはGWTアプリケーションを国際化するための3つの方法を提供します。プロジェクトで最も一般的に使用されている静的文字列国際化の使用方法を示します。

Sr.No.

Technique & Description

1

Static String Internationalization

この手法は最も一般的であり、実行時のオーバーヘッドはほとんど必要ありません。は、定数文字列とパラメータ化された文字列の両方を変換するための非常に効率的な手法です。実装が最も簡単です。

静的文字列の国際化では、標準のJavaプロパティファイルを使用して、翻訳された文字列とパラメータ化されたメッセージを格納し、厳密に型指定されたJavaインターフェイスを作成して値を取得します。

2

Dynamic String Internationalization

この手法は非常に柔軟ですが、静的な文字列の国際化よりも時間がかかります。ホストページにはローカライズされた文字列が含まれているため、新しいロケールを追加するときにアプリケーションを再コンパイルする必要はありません。 GWTアプリケーションを既存のサーバー側ローカリゼーションシステムと統合する場合は、この手法を使用します。

3

Localizable Interface

この手法は、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に変更します。ファイルを選択して右クリックし、プロパティウィンドウを開きます。変更を適用して保存します。

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

ステップ2-モジュール記述子XMLファイルへのi18nモジュールの追加

モジュールファイル HelloWorld.gwt.xml を更新して、ドイツ語ロケールのサポートを含めます

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

手順3-プロパティファイルに相当するインターフェイスを作成する

GWTのメッセージインターフェイスを拡張して、内部化のサポートを含めることにより、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アプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/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.finddevguides.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/HelloWorldl の内容です。

<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.finddevguides/client* パッケージにHelloWorldMessages.propertiesファイルを作成し、次のコンテンツをその中に配置します

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

*src/com.finddevguides/client* パッケージにHelloWorldMessages_de.propertiesファイルを作成し、次のコンテンツをその中に配置します

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

*src/com.finddevguides/client* パッケージにHelloWorldMessages.javaクラスを作成し、次のコンテンツをその中に配置します

package com.finddevguides.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);
}

Javaファイル src/com.finddevguides/HelloWorld.java の以下のコンテンツを使用して、GWTコードの国際化機能を示します。

package com.finddevguides.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 + "!");
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT国際化デモ

次に、URLを更新してlocale = de.Set URL-_http：//127.0.0.1：8888/HelloWorldl？gwt.codesvr = 127.0.0.1：9997 ＆locale = de _を含めます。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWTインターンドイツ語

Gwt-internationalization