GWT — Интернационализация

GWT предоставляет три способа интернационализации приложения GWT. Мы продемонстрируем использование статической интернационализации строк, наиболее часто используемой среди проектов.

Интернационализация статических строк

Этот метод наиболее распространен и требует очень мало накладных расходов во время выполнения; это очень эффективный метод для перевода как константных, так и параметризованных строк, простейший в реализации.

Интернационализация статических строк использует стандартные файлы свойств Java для хранения переведенных строк и параметризованных сообщений, а для получения их значений создаются строго типизированные интерфейсы Java.

Динамическая строковая интернационализация

Этот метод очень гибкий, но медленнее, чем интернационализация статических строк. Страница хоста содержит локализованные строки, поэтому приложения не должны перекомпилироваться при добавлении новой локали. Если приложение GWT должно быть интегрировано с существующей серверной системой локализации, то этот метод должен использоваться.

Локализуемый интерфейс

Эта техника является самой мощной среди трех техник. Реализация 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 — Создать интерфейс, эквивалентный файлу свойств

Создайте интерфейс HelloWorldMessages.java, расширив интерфейс сообщений GWT, чтобы включить поддержку интернализации. Он должен содержать те же имена методов, что и ключи в файле свойств. Место будет заменено аргументом String.

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 — Использование интерфейса сообщений в компоненте пользовательского интерфейса.

Используйте объект HelloWorldMessages в HelloWorld, чтобы получить сообщения.

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 — Глава « Создание приложения» —

Ниже приводится содержимое модифицированного дескриптора модуля 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>

Теперь создайте файл HelloWorldMessages.properties в пакете src / com.tutorialspoint / client и поместите в него следующее содержимое

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

Теперь создайте файл HelloWorldMessages_de.properties в пакете src / com.tutorialspoint / client и поместите в него следующее содержимое

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

Теперь создайте класс HelloWorldMessages.java в пакете src / com.tutorialspoint / client и поместите в него следующее содержимое

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);
}

Позвольте нам иметь следующий контент файла Java src / com.tutorialspoint / HelloWorld.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 — Создание приложения . Если с вашим приложением все в порядке, это даст следующий результат:

Теперь обновите URL-адрес, чтобы он содержал URL-адрес locale = de.Set — http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997 & locale = de . Если с вашим приложением все в порядке, это даст следующий результат: