GWT - 部署應用程式

本教程將解釋如何建立一個應用程式 “war” 檔案以及如何在 Apache Tomcat Web 伺服器根目錄中部署該檔案。

如果您理解了這個簡單的示例，那麼您也可以按照相同的步驟部署複雜的 GWT 應用程式。

讓我們使用已安裝 GWT 外掛的 Eclipse IDE，並按照以下步驟建立一個 GWT 應用程式：

步驟	描述
1	如GWT - 建立應用程式章節所述，在一個名為com.tutorialspoint的包下建立一個名為HelloWorld的專案。
2	修改HelloWorld.gwt.xml、HelloWorld.css、HelloWorld.html和HelloWorld.java，如下所述。保持其餘檔案不變。
3	編譯並執行應用程式，以確保業務邏輯符合要求。
4	最後，將應用程式 war 資料夾的內容壓縮成 war 檔案，並將其部署到 Apache Tomcat Web 伺服器。
5	使用最後一步中解釋的適當 URL 啟動您的 Web 應用程式。

以下是修改後的模組描述符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>

以下是修改後的樣式表文件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 類在其中插入一些內容。因此，讓我們看一下 Java 檔案src/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 並將其新增到 id 為“gwtContainer”的 div 標籤內。我們將在接下來的章節中學習不同的 GWT 部件。

完成所有更改後，讓我們像在GWT - 建立應用程式章節中那樣，在開發模式下編譯並執行應用程式。如果您的應用程式一切正常，則會產生以下結果：

建立 WAR 檔案

現在我們的應用程式執行良好，我們可以將其匯出為 war 檔案。

請按照以下步驟操作：

進入專案的war目錄C:\workspace\HelloWorld\war
選擇 war 目錄中所有可用的檔案和資料夾。
將所有選定的檔案和資料夾壓縮到一個名為HelloWorld.zip的檔案中。
將HelloWorld.zip重新命名為HelloWorld.war。

部署 WAR 檔案

停止 tomcat 伺服器。
將HelloWorld.war檔案複製到tomcat 安裝目錄 > webapps 資料夾。
啟動 tomcat 伺服器。
檢視 webapps 目錄，應該已經建立了一個名為helloworld的資料夾。
現在 HelloWorld.war 已成功部署到 Tomcat Web 伺服器根目錄。

執行應用程式

在 Web 瀏覽器中輸入 URL：https://:8080/HelloWorld以啟動應用程式

伺服器名稱 (localhost) 和埠 (8080) 可能因您的 tomcat 配置而異。

列印頁面