GWT - ปรับใช้แอปพลิเคชัน

บทช่วยสอนนี้จะอธิบายวิธีสร้างแอปพลิเคชัน "war" ไฟล์และวิธีปรับใช้ในรูท Apache Tomcat Websever

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

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

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

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

   <!-- 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>Hello World</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

ฉันแก้ไข HTML เล็กน้อยจากตัวอย่างก่อนหน้านี้ ที่นี่ฉันสร้างตัวยึดตำแหน่ง <div> ... </div> ซึ่งเราจะแทรกเนื้อหาบางส่วนโดยใช้คลาส java จุดเริ่มต้นของเรา ดังนั้นให้เรามีเนื้อหาต่อไปนี้ของไฟล์ Javasrc/com.tutorialspoint/HelloWorld.java.

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.RootPanel;

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      HTML html = new HTML("<p>Welcome to GWT application</p>");
      
      RootPanel.get("gwtContainer").add(html);
   }
}

ที่นี่เราสร้างบน HTML พื้นฐานที่กว้างที่สุดและเพิ่มไว้ในแท็ก div ที่มี id = "gwtContainer" เราจะศึกษาวิดเจ็ต GWT ที่แตกต่างกันในบทต่อ ๆ ไป

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

สร้างไฟล์ WAR

ตอนนี้แอปพลิเคชันของเราทำงานได้ดีและเราพร้อมที่จะส่งออกเป็นไฟล์สงคราม

ทำตามขั้นตอนต่อไปนี้ -

เข้าไปในโครงการของคุณ war ไดเรกทอรี C:\workspace\HelloWorld\war
เลือกไฟล์และโฟลเดอร์ทั้งหมดที่มีอยู่ในไดเร็กทอรี war
zip ไฟล์ทั้งหมดที่เลือกและโฟลเดอร์ในไฟล์ที่เรียกว่าHelloWorld.zip
เปลี่ยนชื่อHelloWorld.zipเพื่อHelloWorld.war

ปรับใช้ไฟล์ WAR

หยุดเซิร์ฟเวอร์ Tomcat
คัดลอกไฟล์HelloWorld.warไปที่tomcat installation directory > webapps folder.
เริ่มเซิร์ฟเวอร์ Tomcat
ดูในไดเรกทอรี webapps ควรมีโฟลเดอร์ helloworld ได้สร้างขึ้น
ตอนนี้ HelloWorld.war ถูกปรับใช้ในรูท Tomcat Webserver เรียบร้อยแล้ว

เรียกใช้แอปพลิเคชัน

ป้อน url ในเว็บเบราว์เซอร์: http://localhost:8080/HelloWorld เพื่อเปิดแอปพลิเคชัน

ชื่อเซิร์ฟเวอร์ (localhost) และพอร์ต (8080) อาจแตกต่างกันไปตามการกำหนดค่า tomcat ของคุณ