極客書

GWT - Create Application

由於GWT的威力在於用Java編寫，用JavaScript運行，我們將使用Java IDE Eclipse演示我們的示例。

讓我們從一個簡單的HelloWorld應用程式開始−

Step 1 - Create Project

第一步是使用EclipseIDE創建一個簡單的Web應用程式項目。使用選項啓動項目嚮導Google Icon>新建Web應用程式項目…。現在使用嚮導窗口將您的項目命名爲HelloWorld，如下所示−

Create GWT Project Wizard

取消選擇「使用Google應用程式引擎」，因爲我們沒有在此項目中使用它，並保留其他默認值（保持選中「生成示例項目代碼」選項），然後單擊「完成」按鈕。

成功創建項目後，您的項目資源管理器中將包含以下內容−

GWT Project Structure

以下是所有重要文件夾的簡要說明

Sr.No. Folder & Location
1

src公司

原始碼（java類）文件。

包含負責客戶端UI顯示的客戶端特定java類的客戶端文件夾。

包含負責伺服器端處理的伺服器端java類的伺服器文件夾。

包含java模型類的共享文件夾，用於將數據從伺服器傳輸到客戶端，反之亦然。

HelloWorld.gwt.xml，gwt編譯器編譯HelloWorld項目所需的模塊描述符文件。
2

測試

測試代碼（java類）源文件。

包含負責測試gwt客戶端代碼的java類的客戶機文件夾。
3

戰爭

這是最重要的部分，它代表了實際的可部署web應用程式。

包含編譯類、gwt庫、servlet庫的WEB-INF。

css，項目樣式表。

HelloWorld.html，hots html將調用GWT UI應用程式。

Step 2 - Modify Module Descriptor: 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.  You can change       -->
   <!-- the theme of your GWT application by uncommenting          -->
   <!-- any one of the following lines.                            -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <!-- <inherits name = 'com.google.gwt.user.theme.chrome.Chrome'/> -->
   <!-- <inherits name = 'com.google.gwt.user.theme.dark.Dark'/>     -->

   <!-- Other module inherits                                      -->

   <!-- 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>

Step 3 - Modify Style Sheet: HelloWorld.css

GWT插件將創建一個默認的樣式表文件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;
}

Step 4 - Modify Host File: HelloWorld.html

GWT插件將創建一個默認的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>
      <p>Welcome to first GWT application</p>
   </body>
</html>

您可以在同一個源目錄中創建更多的靜態文件，如HTML、CSS或圖像，也可以創建更多的子目錄並在這些子目錄中移動文件，並在應用程式的模塊描述符中配置這些子目錄。

Step 5 - Modify Entry Point: HelloWorld.java

讓我們修改這個文件以顯示「你好，世界！」

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;

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

您可以在同一個源目錄中創建更多的Java文件來定義入口點或定義幫助程序例程。

Step 6 - Compile Application

一旦您準備好所有的更改，就可以編譯項目了。使用選項Google Icon>gwt Compile Project…啓動gwt Compile對話框，如下所示−

Compile GWT Project Wizard

保持默認值不變，然後單擊「編譯」按鈕。如果一切順利，您將在Eclipse控制台中看到以下輸出

Compiling module com.tutorialspoint.HelloWorld
   Compiling 6 permutations
      Compiling permutation 0...
      Compiling permutation 1...
      Compiling permutation 2...
      Compiling permutation 3...
      Compiling permutation 4...
      Compiling permutation 5...
   Compile of permutations succeeded
Linking into C:\workspace\HelloWorld\war\helloworld
   Link succeeded
   Compilation succeeded -- 33.029s

Step 7 - Run Application

現在點擊run application菜單並選擇HelloWorld來運行應用程式。

GWT Run Button

如果一切正常，您必須看到GWT開發模式在Eclipse中處於活動狀態，其中包含如下所示的URL。雙擊URL以打開GWT應用程式。

GWT Run Application

因爲您正在開發模式下運行應用程式，所以您需要爲瀏覽器安裝GWT插件。只需按照螢幕上的說明安裝插件。

如果您已經爲瀏覽器設置了GWT插件，那麼您應該能夠看到以下輸出

GWT Application Result

祝賀 你！您已經使用Google Web Toolkit（GWT）實現了第一個應用程式。