GWT - Internazionalizzazione

GWT fornisce tre modi per internazionalizzare un'applicazione GWT, dimostreremo l'uso dell'internazionalizzazione di stringhe statiche che è più comunemente utilizzata tra i progetti.

Sr.No.	Tecnica e descrizione
1	Static String Internationalization Questa tecnica è la più diffusa e richiede un sovraccarico minimo in fase di esecuzione; è una tecnica molto efficiente per tradurre stringhe sia costanti che parametrizzate; più semplice da implementare. L'internazionalizzazione delle stringhe statiche utilizza i file delle proprietà Java standard per memorizzare le stringhe tradotte e i messaggi parametrizzati e vengono create interfacce Java fortemente tipizzate per recuperare i loro valori.
2	Dynamic String Internationalization Questa tecnica è molto flessibile ma più lenta dell'internazionalizzazione delle stringhe statiche. La pagina host contiene le stringhe localizzate, pertanto non è necessario ricompilare le applicazioni quando si aggiunge una nuova locale. Se l'applicazione GWT deve essere integrata con un sistema di localizzazione lato server esistente, è necessario utilizzare questa tecnica.
3	Localizable Interface Questa tecnica è la più potente tra le tre tecniche. L'implementazione di Localizable ci consente di creare versioni localizzate di tipi personalizzati. È una tecnica avanzata di internazionalizzazione.

Flusso di lavoro per l'internazionalizzazione di un'applicazione GWT

Passaggio 1: creare file delle proprietà

Crea il file delle proprietà contenente i messaggi da utilizzare nell'applicazione. Abbiamo creato un fileHelloWorldMessages.properties file nel nostro esempio.

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

Crea file delle proprietà contenenti valori tradotti specifici per le impostazioni internazionali. Abbiamo creato un fileHelloWorldMessages_de.propertiesfile nel nostro esempio. Questo file contiene traduzioni in lingua tedesca. _de specifica la lingua tedesca e supporteremo la lingua tedesca nella nostra applicazione.

Se stai creando un file delle proprietà usando Eclipse, cambia la codifica del file in UTF-8.Seleziona il file e fai clic con il pulsante destro del mouse per aprire la sua finestra delle proprietà.Seleziona Codifica file di testo come Other UTF-8. Applica e salva la modifica.

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

Passaggio 2: aggiungere il modulo i18n al file XML descrittore del modulo

Aggiorna il file del modulo HelloWorld.gwt.xml per includere il supporto per la lingua tedesca

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

Passaggio 3: creare un'interfaccia equivalente al file delle proprietà

Crea l'interfaccia HelloWorldMessages.java estendendo l'interfaccia Messaggi di GWT per includere il supporto per l'internalizzazione. Dovrebbe contenere gli stessi nomi di metodo delle chiavi nel file delle proprietà. Il segnaposto verrebbe sostituito con l'argomento 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);
}

Passaggio 4: utilizzare l'interfaccia dei messaggi nel componente dell'interfaccia utente.

Usa l'oggetto di HelloWorldMessages in HelloWorld per ricevere i messaggi.

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

Internazionalizzazione - Esempio completo

Questo esempio ti guiderà attraverso semplici passaggi per dimostrare la capacità di internazionalizzazione di un'applicazione GWT.

Segui i seguenti passaggi per aggiornare l'applicazione GWT che abbiamo creato in GWT - Capitolo Crea applicazione -

Passo	Descrizione
1	Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint come spiegato nel capitolo GWT - Crea applicazione .
2	Modifica HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html e HelloWorld.java come spiegato di seguito. Mantieni il resto dei file invariato.
3	Compilare ed eseguire l'applicazione per verificare il risultato della logica implementata.

Di seguito è riportato il contenuto del descrittore del modulo modificato 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>

Di seguito è riportato il contenuto del file del foglio di stile modificato 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;
}

Di seguito è riportato il contenuto del file host HTML modificato 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>

Ora crea il file HelloWorldMessages.properties nel file src/com.tutorialspoint/client pacchetto e inserire i seguenti contenuti in esso

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

Ora crea il file HelloWorldMessages_de.properties nel file src/com.tutorialspoint/client pacchetto e inserire i seguenti contenuti in esso

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

Ora crea la classe HelloWorldMessages.java nel file src/com.tutorialspoint/client pacchetto e inserire i seguenti contenuti in esso

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

Cerchiamo di avere il seguente contenuto del file Java src/com.tutorialspoint/HelloWorld.java utilizzando il quale dimostreremo la capacità di internazionalizzazione del codice 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 volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità sviluppo come abbiamo fatto nel capitolo GWT - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato:

Ora aggiorna l'URL per contenere l'URL locale = de. Imposta l'URL - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato: