GWT - ความเป็นสากล

GWT มีสามวิธีในการทำให้แอปพลิเคชัน GWT เป็นสากลเราจะสาธิตการใช้ Static String Internationalization ที่ใช้กันมากที่สุดในโครงการต่างๆ

ซีเนียร์	เทคนิคและคำอธิบาย
1	Static String Internationalization เทคนิคนี้แพร่หลายมากที่สุดและต้องการค่าใช้จ่ายน้อยมากในรันไทม์ เป็นเทคนิคที่มีประสิทธิภาพมากในการแปลสตริงทั้งค่าคงที่และพารามิเตอร์ที่ง่ายที่สุดในการนำไปใช้ การทำให้เป็นสากลของสตริงแบบคงที่ใช้ไฟล์คุณสมบัติ Java มาตรฐานเพื่อจัดเก็บสตริงที่แปลแล้วและข้อความที่กำหนดพารามิเตอร์และอินเตอร์เฟส Java ที่พิมพ์มากจะถูกสร้างขึ้นเพื่อดึงค่าของมัน
2	Dynamic String Internationalization เทคนิคนี้มีความยืดหยุ่นมาก แต่ช้ากว่าการทำให้เป็นสากลของสตริงแบบคงที่ หน้าโฮสต์มีสตริงที่แปลเป็นภาษาท้องถิ่นดังนั้นแอปพลิเคชันไม่จำเป็นต้องคอมไพล์ใหม่เมื่อเราเพิ่มภาษาใหม่ หากแอปพลิเคชัน GWT จะรวมเข้ากับระบบโลคัลไลเซชันฝั่งเซิร์ฟเวอร์ที่มีอยู่แล้วจะต้องใช้เทคนิคนี้
3	Localizable Interface เทคนิคนี้มีประสิทธิภาพมากที่สุดในสามเทคนิค การใช้งาน Localizable ช่วยให้เราสามารถสร้างเวอร์ชันที่กำหนดเองได้ เป็นเทคนิคการทำให้เป็นสากลขั้นสูง

เวิร์กโฟลว์ของการทำให้แอปพลิเคชัน GWT เป็นสากล

ขั้นตอนที่ 1 - สร้างไฟล์คุณสมบัติ

สร้างไฟล์คุณสมบัติที่มีข้อความที่จะใช้ในแอปพลิเคชัน เราได้สร้างไฟล์HelloWorldMessages.properties ไฟล์ในตัวอย่างของเรา

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

สร้างไฟล์คุณสมบัติที่มีค่าที่แปลเฉพาะสำหรับโลแคล เราได้สร้างไฟล์HelloWorldMessages_de.propertiesไฟล์ในตัวอย่างของเรา ไฟล์นี้มีคำแปลเป็นภาษาเยอรมัน _de ระบุภาษาเยอรมันและเราจะรองรับภาษาเยอรมันในแอปพลิเคชันของเรา

หากคุณกำลังสร้างไฟล์คุณสมบัติโดยใช้ Eclipse ให้เปลี่ยนการเข้ารหัสของไฟล์เป็น UTF-8 เลือกไฟล์จากนั้นคลิกขวาเพื่อเปิดหน้าต่างคุณสมบัติเลือกการเข้ารหัสไฟล์ข้อความเป็น Other UTF-8. ใช้และบันทึกการเปลี่ยนแปลง

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

ขั้นตอนที่ 2 - เพิ่มโมดูล i18n ไปยังไฟล์ XML Descriptor Module

อัปเดตไฟล์โมดูล HelloWorld.gwt.xml เพื่อรวมการสนับสนุนภาษาเยอรมัน

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

ขั้นตอนที่ 3 - สร้างส่วนต่อประสานที่เทียบเท่ากับไฟล์คุณสมบัติ

สร้างอินเทอร์เฟซ HelloWorldMessages.java โดยการขยายอินเทอร์เฟซ Messages ของ GWT เพื่อรวมการสนับสนุนสำหรับ internalization ควรมีชื่อเมธอดเดียวกันกับคีย์ในไฟล์คุณสมบัติ Place holder จะถูกแทนที่ด้วย 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);
}

ขั้นตอนที่ 4 - ใช้อินเทอร์เฟซข้อความในคอมโพเนนต์ UI

ใช้วัตถุของ HelloWorldMessages ใน HelloWorld เพื่อรับข้อความ

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

Internationalization - ตัวอย่างที่สมบูรณ์

ตัวอย่างนี้จะนำคุณผ่านขั้นตอนง่ายๆในการแสดงความสามารถในการทำให้เป็นสากลของแอปพลิเคชัน GWT

ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างในGWT - สร้างบทแอปพลิเคชัน -

ขั้นตอน	คำอธิบาย
1	สร้างโครงการที่มีชื่อHelloWorldภายใต้แพคเกจcom.tutorialspointตามที่อธิบายไว้ในGWT - สร้างแอพลิเคชันบท
2	แก้ไขHelloWorld.gwt.xml , HelloWorld.css , HelloWorld.htmlและHelloWorld.javaตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3	คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข 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>

ต่อไปนี้เป็นเนื้อหาของไฟล์ Style Sheet ที่แก้ไข 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;
}

ต่อไปนี้เป็นเนื้อหาของไฟล์โฮสต์ HTML ที่แก้ไข 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>

ตอนนี้สร้างไฟล์ HelloWorldMessages.properties ในไฟล์ src/com.tutorialspoint/client แพคเกจและวางเนื้อหาต่อไปนี้ไว้ในนั้น

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

ตอนนี้สร้างไฟล์ HelloWorldMessages_de.properties ในไฟล์ src/com.tutorialspoint/client แพคเกจและวางเนื้อหาต่อไปนี้ไว้ในนั้น

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

ตอนนี้สร้างคลาส HelloWorldMessages.java ในไฟล์ src/com.tutorialspoint/client แพคเกจและวางเนื้อหาต่อไปนี้ไว้ในนั้น

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

ให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Java src/com.tutorialspoint/HelloWorld.java ซึ่งเราจะแสดงให้เห็นถึงความสามารถในการทำให้เป็นสากลของ GWT Code

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 + "!");
   }
}

เมื่อคุณพร้อมกับการเปลี่ยนแปลงทั้งหมดที่ทำให้เรารวบรวมและเรียกใช้โปรแกรมประยุกต์ในโหมดการพัฒนาในขณะที่เราทำในGWT - สร้างแอพลิเคชันบท หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ตอนนี้อัปเดต URL เพื่อให้มี URL locale = de.Set - http://127.0.0.1:8888/HelloWorld.html?gwt.codesvr=127.0.0.1:9997&locale=de. หากทุกอย่างเรียบร้อยกับแอปพลิเคชันของคุณสิ่งนี้จะให้ผลลัพธ์ดังนี้ -