GWT - 應用

在我們開始使用 GWT 建立實際的“HelloWorld”應用程式之前，讓我們看看 GWT 應用程式的實際組成部分是什麼：

GWT 應用程式由以下四個重要部分組成，其中最後一部分是可選的，但前三個部分是必須的。

模組描述符
公共資源
客戶端程式碼
伺服器端程式碼

典型 gwt 應用程式 HelloWorld 的不同部分的示例位置如下所示：

名稱	位置
專案根目錄	HelloWorld/
模組描述符	src/com/tutorialspoint/HelloWorld.gwt.xml
公共資源	src/com/tutorialspoint/war/
客戶端程式碼	src/com/tutorialspoint/client/
伺服器端程式碼	src/com/tutorialspoint/server/

模組描述符

模組描述符是以 XML 格式的配置檔案，用於配置 GWT 應用程式。

模組描述符檔案的副檔名是 *.gwt.xml，其中 * 是應用程式的名稱，此檔案應位於專案的根目錄中。

以下是 HelloWorld 應用程式的預設模組描述符 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 = '...'/>
   <source path = '...'/>

   <!-- specify the paths for static files like html, css etc.     -->
   <public path = '...'/>
   <public path = '...'/>

   <!-- specify the paths for external javascript files            -->
   <script src = "js-url" />
   <script src = "js-url" />

   <!-- specify the paths for external style sheet files            -->
   <stylesheet  src = "css-url" />
   <stylesheet  src = "css-url" />
</module>

以下是關於模組描述符中使用的不同部分的簡要說明。

序號	節點和描述
1	<module rename-to = "helloworld"> 這提供了應用程式的名稱。
2	<inherits name = "logical-module-name" /> 這將其他 gwt 模組新增到應用程式中，就像在 Java 應用程式中使用 import 一樣。可以以這種方式繼承任意數量的模組。
3	<entry-point class = "classname" /> 這指定了將開始載入 GWT 應用程式的類的名稱。可以新增任意數量的入口點類，它們按照在模組檔案中出現的順序依次呼叫。因此，當第一個入口點的 onModuleLoad() 完成時，下一個入口點會立即被呼叫。
4	<source path = "path" /> 這指定了 GWT 編譯器將搜尋原始碼編譯的原始檔夾的名稱。
5	<public path = "path" /> 公共路徑是專案中儲存 GWT 模組引用的靜態資源（例如 CSS 或影像）的位置。預設的公共路徑是模組 XML 檔案儲存位置下的 public 子目錄。
6	<script src="js-url" /> 自動注入位於 src 指定位置的外部 JavaScript 檔案。
7	<stylesheet src="css-url" /> 自動注入位於 src 指定位置的外部 CSS 檔案。

公共資源

這些是 GWT 模組引用的所有檔案，例如主機 HTML 頁面、CSS 或影像。

這些資源的位置可以使用模組配置檔案中的 <public path = "path" /> 元素進行配置。預設情況下，它是模組 XML 檔案儲存位置下的 public 子目錄。

當您將應用程式編譯成 JavaScript 時，可以在您的公共路徑上找到的所有檔案都將複製到模組的輸出目錄。

最重要的公共資源是主機頁面，它用於呼叫實際的 GWT 應用程式。應用程式的典型 HTML 主機頁面可能根本不包含任何可見的 HTML 主體內容，但始終預期透過 <script.../> 標記包含 GWT 應用程式，如下所示

<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>
      <p>Welcome to first GWT application</p>
   </body>
</html>

以下是我們包含在主機頁面中的示例樣式表：

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

客戶端程式碼

這是編寫實現應用程式業務邏輯的實際 Java 程式碼，GWT 編譯器將其轉換為 JavaScript，最終將在瀏覽器中執行。這些資源的位置可以使用模組配置檔案中的 <source path = "path" /> 元素進行配置。

例如，入口點程式碼將用作客戶端程式碼，其位置將使用 <source path = "path" /> 指定。

模組 入口點是任何可分配給 EntryPoint 並且無需引數即可構造的類。載入模組時，將例項化每個入口點類，並呼叫其 EntryPoint.onModuleLoad() 方法。一個示例 HelloWorld 入口點類如下所示：

public class HelloWorld implements EntryPoint {
   public void onModuleLoad() {
      Window.alert("Hello, World!");
   }
}

伺服器端程式碼

這是應用程式的伺服器端部分，它是完全可選的。如果您沒有在應用程式中進行任何後端處理，則不需要此部分；但是，如果後端需要一些處理並且您的客戶端應用程式與伺服器互動，則您必須開發這些元件。

下一章將使用上述所有概念，使用 Eclipse IDE 建立 HelloWorld 應用程式。

列印頁面