GWT - Applications

在我們開始使用GWT創建實際的「HelloWorld」應用程式之前，讓我們看看GWT應用程式的實際部分是什麼;

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

Module descriptors
Public resources
Client-side code
Server-side code

典型gwt應用程式的不同部分的樣本位置如下所示;

Name	Location
Project root	HelloWorld/
Module descriptor	src/com/tutorialspoint/HelloWorld.gwt.xml
Public resources	src/com/tutorialspoint/war/
Client-side code	src/com/tutorialspoint/client/
Server-side code	src/com/tutorialspoint/server/

Module Descriptors

模塊描述符是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>

下面是模塊描述符中使用的不同部分的簡要詳細信息。

Sr.No.	Nodes & Description
1	<module rename to=「helloworld」> 這提供了應用程式的名稱。
2	<繼承name=「logical module name」/> 這將在應用程式中添加其他gwt模塊，就像import在java應用程式中所做的那樣。可以用這種方式繼承任意數量的模塊。
3	<entry point class=「classname」/> 它指定將開始加載GWT應用程式的類的名稱。可以添加任意數量的入口點類，並按它們在模塊文件中出現的順序順序依次調用它們。因此，當第一個入口點的onModuleLoad（）完成時，將立即調用下一個入口點。
4	<source path=「path」/> 它指定GWT編譯器將搜索原始碼編譯的源文件夾的名稱。
5	<public path=「path」/> 公共路徑是項目中存儲GWT模塊引用的靜態資源（如CSS或圖像）的位置。默認的公共路徑是存儲模塊XML文件的公共子目錄。
6	<script src=「js url」/> 自動注入位於src指定位置的外部JavaScript文件。
7	<樣式表src=「css url」/> 自動插入位於src指定位置的外部CSS文件。

Public Resources

這些都是GWT模塊引用的文件，例如宿主HTML頁面、CSS或圖像。

可以使用模塊配置文件中的<public path=「path」/>元素配置這些資源的位置。默認情況下，它是存儲模塊XML文件的公共子目錄。

將應用程式編譯爲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;
}

Client-side Code

這是實現應用程式業務邏輯的實際Java代碼，GWT編譯器將其轉換爲JavaScript，最終在瀏覽器中運行。可以使用模塊配置文件中的<source path=「path」/>元素配置這些資源的位置。

例如，入口點代碼將用作客戶端代碼，其位置將使用<source path=「path」/>指定;。

模塊入口點是任何可分配給入口點且無需參數即可構造的類。加載模塊時，將實例化每個入口點類，並調用其entry point.onModuleLoad（）方法。示例HelloWorld入口點類如下所示−

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

Server-side Code

這是應用程式的伺服器端部分，而且非常可選。如果在應用程式中不使用進行任何後端處理，則不需要此部分，但如果後端需要進行某些處理，並且客戶端應用程式與伺服器交互，則必須開發這些組件。

下一章將使用上述所有概念來使用EclipseIDE創建HelloWorld應用程式。