GWT - Quốc tế hóa

GWT cung cấp ba cách để quốc tế hóa một ứng dụng GWT, Chúng tôi sẽ chứng minh việc sử dụng Static String Internationalization đang được sử dụng phổ biến nhất trong các dự án.

Sr.No.	Kỹ thuật & Mô tả
1	Static String Internationalization Kỹ thuật này phổ biến nhất và yêu cầu rất ít chi phí trong thời gian chạy; là một kỹ thuật rất hiệu quả để dịch cả chuỗi hằng số và chuỗi tham số hóa; đơn giản nhất để thực hiện. Quốc tế hóa chuỗi tĩnh sử dụng các tệp thuộc tính Java tiêu chuẩn để lưu trữ các chuỗi đã dịch và thông báo được tham số hóa, đồng thời các giao diện Java được định kiểu mạnh được tạo ra để truy xuất các giá trị của chúng.
2	Dynamic String Internationalization Kỹ thuật này rất linh hoạt nhưng chậm hơn so với quốc tế hóa chuỗi tĩnh. Do đó, trang chủ chứa các chuỗi đã bản địa hóa, các ứng dụng không bắt buộc phải biên dịch lại khi chúng tôi thêm một ngôn ngữ mới. Nếu ứng dụng GWT được tích hợp với hệ thống bản địa hóa phía máy chủ hiện có, thì kỹ thuật này sẽ được sử dụng.
3	Localizable Interface Kỹ thuật này là mạnh nhất trong ba kỹ thuật. Việc triển khai Localizable cho phép chúng tôi tạo các phiên bản bản địa hóa của các loại tùy chỉnh. Đó là một kỹ thuật quốc tế hóa tiên tiến.

Quy trình quốc tế hóa một ứng dụng GWT

Bước 1 - Tạo tệp thuộc tính

Tạo tệp thuộc tính chứa các thông báo sẽ được sử dụng trong ứng dụng. Chúng tôi đã tạo ra mộtHelloWorldMessages.properties trong ví dụ của chúng tôi.

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

Tạo các tệp thuộc tính có chứa các giá trị đã dịch cụ thể cho ngôn ngữ. Chúng tôi đã tạo ra mộtHelloWorldMessages_de.propertiestrong ví dụ của chúng tôi. Tệp này chứa các bản dịch bằng tiếng Đức. _de chỉ định ngôn ngữ Đức và chúng tôi sẽ hỗ trợ ngôn ngữ Đức trong ứng dụng của mình.

Nếu bạn đang tạo tệp thuộc tính bằng Eclipse thì hãy thay đổi mã hóa của tệp thành UTF-8. Chọn tệp và sau đó nhấp chuột phải vào tệp đó để mở cửa sổ thuộc tính của nó. Chọn Mã hóa tệp văn bản là Other UTF-8. Áp dụng và Lưu thay đổi.

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

Bước 2 - Thêm mô-đun i18n vào Tệp XML Mô tả Mô-đun

Cập nhật tệp mô-đun HelloWorld.gwt.xml bao gồm hỗ trợ cho ngôn ngữ Đức

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

Bước 3 - Tạo giao diện tương đương với tệp thuộc tính

Tạo giao diện HelloWorldMessages.java bằng cách mở rộng giao diện Tin nhắn của GWT để bao gồm hỗ trợ nội bộ hóa. Nó phải chứa các tên phương thức giống như các khóa trong tệp thuộc tính. Giữ chỗ sẽ được thay thế bằng đối số Chuỗi.

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

Bước 4 - Sử dụng Giao diện Thông báo trong thành phần Giao diện người dùng.

Sử dụng đối tượng của HelloWorldMessages trong HelloWorld để nhận tin nhắn.

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

Quốc tế hóa - Ví dụ đầy đủ

Ví dụ này sẽ hướng dẫn bạn qua các bước đơn giản để chứng minh khả năng Quốc tế hóa của một ứng dụng GWT.

Làm theo các bước sau để cập nhật ứng dụng GWT mà chúng tôi đã tạo trong GWT - Chương Tạo ứng dụng -

Bươc	Sự miêu tả
1	Tạo một dự án với tên HelloWorld trong một gói com.tutorialspoint như được giải thích trong chương GWT - Tạo ứng dụng .
2	Sửa đổi HelloWorld.gwt.xml , HelloWorld.css , HelloWorld.html và HelloWorld.java như được giải thích bên dưới. Giữ phần còn lại của các tệp không thay đổi.
3	Biên dịch và chạy ứng dụng để xác minh kết quả của logic được triển khai.

Sau đây là nội dung của bộ mô tả mô-đun đã sửa đổi 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>

Sau đây là nội dung của tệp Style Sheet đã sửa đổi 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;
}

Sau đây là nội dung của tệp máy chủ HTML đã sửa đổi 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>

Bây giờ tạo tệp HelloWorldMessages.properties trong src/com.tutorialspoint/client gói và đặt các nội dung sau vào đó

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

Bây giờ, hãy tạo tệp HelloWorldMessages_de.properties trong tệp src/com.tutorialspoint/client gói và đặt các nội dung sau vào đó

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

Bây giờ hãy tạo lớp HelloWorldMessages.java trong src/com.tutorialspoint/client gói và đặt các nội dung sau vào đó

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

Hãy để chúng tôi có nội dung sau của tệp Java src/com.tutorialspoint/HelloWorld.java sử dụng mà chúng tôi sẽ chứng minh khả năng Quốc tế hóa của Mã 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 + "!");
   }
}

Khi bạn đã sẵn sàng với tất cả các thay đổi được thực hiện, hãy để chúng tôi biên dịch và chạy ứng dụng ở chế độ phát triển như chúng tôi đã làm trong chương GWT - Tạo ứng dụng . Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau:

Bây giờ hãy cập nhật URL để chứa URL locale = de.Set - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. Nếu mọi thứ đều ổn với ứng dụng của bạn, điều này sẽ tạo ra kết quả sau: