GWT - Internacionalización

GWT proporciona tres formas de internacionalizar una aplicación GWT. Demostraremos el uso de la internacionalización de cadenas estáticas que se usa más comúnmente entre los proyectos.

No Señor.	Técnica y descripción
1	Static String Internationalization Esta técnica es la más frecuente y requiere muy poca sobrecarga en tiempo de ejecución; es una técnica muy eficaz para traducir tanto cadenas constantes como parametrizadas; la más sencilla de implementar. La internacionalización de cadenas estáticas utiliza archivos de propiedades Java estándar para almacenar cadenas traducidas y mensajes parametrizados, y se crean interfaces Java fuertemente tipadas para recuperar sus valores.
2	Dynamic String Internationalization Esta técnica es muy flexible pero más lenta que la internacionalización de cadenas estáticas. La página del host contiene las cadenas localizadas, por lo tanto, no es necesario volver a compilar las aplicaciones cuando agregamos una nueva configuración regional. Si la aplicación GWT se va a integrar con un sistema de localización del lado del servidor existente, entonces se debe utilizar esta técnica.
3	Localizable Interface Esta técnica es la más poderosa entre las tres técnicas. La implementación de Localizable nos permite crear versiones localizadas de tipos personalizados. Es una técnica de internacionalización avanzada.

Flujo de trabajo de internacionalización de una aplicación GWT

Paso 1: crear archivos de propiedades

Cree un archivo de propiedades que contenga los mensajes que se utilizarán en la aplicación. Hemos creado unHelloWorldMessages.properties archivo en nuestro ejemplo.

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

Cree archivos de propiedades que contengan valores traducidos específicos de la configuración regional. Hemos creado unHelloWorldMessages_de.propertiesarchivo en nuestro ejemplo. Este archivo contiene traducciones en idioma alemán. _de especifica la configuración regional alemana y vamos a admitir el idioma alemán en nuestra aplicación.

Si está creando un archivo de propiedades usando Eclipse, cambie la codificación del archivo a UTF-8. Seleccione el archivo y luego haga clic derecho en él para abrir su ventana de propiedades. Seleccione Codificación del archivo de texto como Other UTF-8. Aplicar y guardar el cambio.

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

Paso 2: agregue el módulo i18n al archivo XML del descriptor del módulo

Actualizar archivo de módulo HelloWorld.gwt.xml para incluir soporte para la configuración regional alemana

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

Paso 3: crear una interfaz equivalente al archivo de propiedades

Cree la interfaz HelloWorldMessages.java ampliando la interfaz de Mensajes de GWT para incluir soporte para la internalización. Debe contener los mismos nombres de método que las claves en el archivo de propiedades. El marcador de posición se reemplazaría con un argumento de cadena.

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

Paso 4: use la interfaz de mensajes en el componente UI.

Usa el objeto de HelloWorldMessages en HelloWorld para recibir los mensajes.

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

Internacionalización - Ejemplo completo

Este ejemplo lo llevará a través de sencillos pasos para demostrar la capacidad de internacionalización de una aplicación GWT.

Siga los siguientes pasos para actualizar la aplicación GWT que creamos en GWT - Capítulo Crear aplicación -

Paso	Descripción
1	Cree un proyecto con un nombre HelloWorld en un paquete com.tutorialspoint como se explica en el capítulo GWT - Crear aplicación .
2	Modifique HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html y HelloWorld.java como se explica a continuación. Mantenga el resto de los archivos sin cambios.
3	Compile y ejecute la aplicación para verificar el resultado de la lógica implementada.

A continuación se muestra el contenido del descriptor de 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 continuación se muestra el contenido del archivo de hoja 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 continuación se muestra el contenido del archivo de 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>

Ahora cree el archivo HelloWorldMessages.properties en el src/com.tutorialspoint/client empaque y coloque el siguiente contenido en él

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

Ahora cree el archivo HelloWorldMessages_de.properties en el src/com.tutorialspoint/client empaque y coloque el siguiente contenido en él

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

Ahora cree la clase HelloWorldMessages.java en el src/com.tutorialspoint/client empaque y coloque el siguiente contenido en él

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

Tengamos el siguiente contenido del archivo Java src/com.tutorialspoint/HelloWorld.java mediante el cual demostraremos la capacidad de internacionalización del 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 + "!");
   }
}

Una vez que esté listo con todos los cambios realizados, compilemos y ejecutemos la aplicación en modo de desarrollo como hicimos en el capítulo GWT - Crear aplicación . Si todo está bien con su aplicación, esto producirá el siguiente resultado:

Ahora actualice la URL para que contenga locale = de.Set URL - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Si todo está bien con su aplicación, esto producirá el siguiente resultado:

↰ Previous page Next page ↱