GWT - Internationalisation

GWT propose trois façons d'internationaliser une application GWT.Nous allons démontrer l'utilisation de l'internationalisation de chaînes statiques qui est la plus couramment utilisée dans les projets.

N ° Sr.	Technique et description
1	Static String Internationalization Cette technique est la plus répandue et nécessite très peu de frais généraux lors de l'exécution; est une technique très efficace pour traduire à la fois des chaînes constantes et paramétrées; la plus simple à implémenter. L'internationalisation de chaînes statiques utilise des fichiers de propriétés Java standard pour stocker les chaînes traduites et les messages paramétrés, et des interfaces Java fortement typées sont créées pour récupérer leurs valeurs.
2	Dynamic String Internationalization Cette technique est très flexible mais plus lente que l'internationalisation de chaînes statiques. La page hôte contient les chaînes localisées, par conséquent, les applications ne sont pas obligées d'être recompilées lorsque nous ajoutons une nouvelle locale. Si l'application GWT doit être intégrée à un système de localisation côté serveur existant, cette technique doit être utilisée.
3	Localizable Interface Cette technique est la plus puissante des trois techniques. La mise en œuvre de Localizable nous permet de créer des versions localisées de types personnalisés. C'est une technique d'internationalisation avancée.

Workflow d'internationalisation d'une application GWT

Étape 1 - Créer des fichiers de propriétés

Créez un fichier de propriétés contenant les messages à utiliser dans l'application. Nous avons créé unHelloWorldMessages.properties fichier dans notre exemple.

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

Créez des fichiers de propriétés contenant des valeurs traduites spécifiques aux paramètres régionaux. Nous avons créé unHelloWorldMessages_de.propertiesfichier dans notre exemple. Ce fichier contient des traductions en langue allemande. _de spécifie la langue allemande et nous allons prendre en charge la langue allemande dans notre application.

Si vous créez un fichier de propriétés à l'aide d'Eclipse, changez l'encodage du fichier en UTF-8.Sélectionnez le fichier, puis cliquez dessus avec le bouton droit de la souris pour ouvrir sa fenêtre de propriétés.Sélectionnez Encodage du fichier texte comme Other UTF-8. Appliquer et enregistrer la modification.

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

Étape 2 - Ajouter le module i18n au fichier XML de descripteur de module

Mettre à jour le fichier du module HelloWorld.gwt.xml pour inclure la prise en charge de la langue allemande

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

Étape 3 - Créer une interface équivalente au fichier de propriétés

Créez l'interface HelloWorldMessages.java en étendant l'interface Messages de GWT pour inclure la prise en charge de l'internalisation. Il doit contenir les mêmes noms de méthode que les clés du fichier de propriétés. L'espace réservé serait remplacé par l'argument 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);
}

Étape 4 - Utilisez l'interface de message dans le composant d'interface utilisateur.

Utilisez l'objet de HelloWorldMessages dans HelloWorld pour recevoir les messages.

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

Internationalisation - Exemple complet

Cet exemple vous guidera à travers des étapes simples pour démontrer la capacité d'internationalisation d'une application GWT.

Suivez les étapes suivantes pour mettre à jour l'application GWT que nous avons créée dans GWT - Chapitre Créer une application -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint comme expliqué dans le chapitre GWT - Créer une application .
2	Modifiez HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html et HelloWorld.java comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vérifier le résultat de la logique implémentée.

Voici le contenu du descripteur de module modifié 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>

Voici le contenu du fichier de feuille de style modifié 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;
}

Voici le contenu du fichier hôte HTML modifié 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>

Créez maintenant le fichier HelloWorldMessages.properties dans le src/com.tutorialspoint/client emballage et placez-y le contenu suivant

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

Créez maintenant le fichier HelloWorldMessages_de.properties dans le src/com.tutorialspoint/client emballage et placez-y le contenu suivant

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

Créez maintenant la classe HelloWorldMessages.java dans le src/com.tutorialspoint/client emballage et placez-y le contenu suivant

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

Laissez-nous avoir le contenu suivant du fichier Java src/com.tutorialspoint/HelloWorld.java à l'aide de laquelle nous démontrerons la capacité d'internationalisation du code 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 + "!");
   }
}

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode développement comme nous l'avons fait dans le chapitre GWT - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant -

Mettez maintenant à jour l'URL pour qu'elle contienne l'URL locale = de.Set - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Si tout va bien avec votre application, cela produira le résultat suivant -