GWT - Internacionalização

O GWT fornece três maneiras de internacionalizar um aplicativo GWT. Demonstraremos o uso de Static String Internationalalization mais comumente usado entre projetos.

Sr. Não.	Técnica e Descrição
1	Static String Internationalization Essa técnica é mais prevalente e requer muito pouca sobrecarga em tempo de execução; é uma técnica muito eficiente para traduzir strings constantes e parametrizadas; mais simples de implementar. A internacionalização de string estática usa arquivos de propriedades Java padrão para armazenar strings traduzidas e mensagens parametrizadas, e interfaces Java fortemente tipadas são criadas para recuperar seus valores.
2	Dynamic String Internationalization Essa técnica é muito flexível, mas mais lenta do que a internacionalização de strings estáticas. A página do host contém as strings localizadas, portanto, os aplicativos não precisam ser recompilados quando adicionamos um novo local. Se o aplicativo GWT tiver que ser integrado a um sistema existente de localização do lado do servidor, essa técnica deve ser usada.
3	Localizable Interface Esta técnica é a mais poderosa entre as três técnicas. Implementar Localizable nos permite criar versões localizadas de tipos personalizados. É uma técnica de internacionalização avançada.

Fluxo de trabalho de internacionalização de um aplicativo GWT

Etapa 1 - Criar arquivos de propriedades

Crie o arquivo de propriedades contendo as mensagens a serem utilizadas no aplicativo. Nós criamos umHelloWorldMessages.properties arquivo em nosso exemplo.

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

Crie arquivos de propriedades contendo valores traduzidos específicos para o local. Nós criamos umHelloWorldMessages_de.propertiesarquivo em nosso exemplo. Este arquivo contém traduções em alemão. _de especifica a localidade alemã e vamos oferecer suporte ao idioma alemão em nosso aplicativo.

Se você estiver criando um arquivo de propriedades usando o Eclipse, altere a codificação do arquivo para UTF-8. Selecione o arquivo e clique com o botão direito nele para abrir sua janela de propriedades. Selecione Codificação do arquivo de texto como Other UTF-8. Aplique e salve a alteração.

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

Etapa 2 - Adicionar módulo i18n ao arquivo XML do descritor de módulo

Arquivo de módulo de atualização HelloWorld.gwt.xml incluir suporte para a localidade alemã

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

Etapa 3 - Criar interface equivalente ao arquivo de propriedades

Crie a interface HelloWorldMessages.java estendendo a interface de Mensagens do GWT para incluir suporte para internalização. Ele deve conter os mesmos nomes de métodos que as chaves no arquivo de propriedades. O marcador de posição seria substituído pelo argumento 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);
}

Etapa 4 - usar a interface de mensagem no componente de IU.

Use o objeto de HelloWorldMessages dentro HelloWorld para obter as mensagens.

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

Internacionalização - Exemplo Completo

Este exemplo o levará por etapas simples para demonstrar a capacidade de internacionalização de um aplicativo GWT.

Siga as etapas a seguir para atualizar o aplicativo GWT que criamos no GWT - capítulo Criar aplicativo -

Degrau	Descrição
1	Crie um projeto com o nome HelloWorld em um pacote com.tutorialspoint conforme explicado no capítulo GWT - Criar aplicativo .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java conforme explicado abaixo. Mantenha o resto dos arquivos inalterados.
3	Compile e execute o aplicativo para verificar o resultado da lógica implementada.

A seguir está o conteúdo do descritor do módulo modificado 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>

A seguir está o conteúdo do arquivo de folha de estilo modificado 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;
}

A seguir está o conteúdo do arquivo host HTML modificado 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>

Agora crie o arquivo HelloWorldMessages.properties no src/com.tutorialspoint/client pacote e coloque o seguinte conteúdo nele

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

Agora crie o arquivo HelloWorldMessages_de.properties no src/com.tutorialspoint/client pacote e coloque o seguinte conteúdo nele

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

Agora crie a classe HelloWorldMessages.java no src/com.tutorialspoint/client pacote e coloque o seguinte conteúdo nele

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

Vamos ter o seguinte conteúdo do arquivo Java src/com.tutorialspoint/HelloWorld.java usando o qual iremos demonstrar a capacidade de internacionalização do Código 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 + "!");
   }
}

Quando você estiver pronto com todas as alterações feitas, vamos compilar e rodar o aplicativo em modo de desenvolvimento como fizemos no capítulo GWT - Criar Aplicativo . Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

Agora atualize o URL para conter o locale = de.Set URL - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Se tudo estiver bem com sua aplicação, isso produzirá o seguinte resultado -

↰ Previous page Next page ↱