GWT-アプリケーションの作成

GWTのパワーは* Javaで記述、JavaScriptで実行*にあるため、Java IDE Eclipseを使用して例を示します。

簡単な_HelloWorld_アプリケーションから始めましょう-

ステップ1-プロジェクトの作成

最初のステップは、Eclipse IDEを使用して簡単なWebアプリケーションプロジェクトを作成することです。オプション Google Icon Googleサービスと開発ツール>新しいWebアプリケーションプロジェクト… を使用してプロジェクトウィザードを起動します。次のようにウィザードウィンドウを使用して、プロジェクトに_HelloWorld_という名前を付けます-

GWTプロジェクトの作成ウィザード

このプロジェクトでは使用していないため、[Google App Engineを使用]の選択を解除し、他のデフォルト値（[*サンプルプロジェクトコードの生成]オプションを保持）をそのままにして[完了]ボタンをクリックします。

プロジェクトが正常に作成されると、プロジェクトエクスプローラーに次のコンテンツが表示されます-

GWTプロジェクト構造

ここにすべての重要なフォルダの簡単な説明があります

Sr.No.

Folder & Location

1

src

ソースコード（Javaクラス）ファイル。

クライアントUI表示を担当するクライアント側固有のJavaクラスを含むクライアントフォルダー。

サーバー側の処理を担当するサーバー側のJavaクラスを含むサーバーフォルダー。

サーバーからクライアントへ、またはその逆にデータを転送するためのJavaモデルクラスを含む共有フォルダー。

HelloWorld.gwt.xml。GWTコンパイラがHelloWorldプロジェクトをコンパイルするために必要なモジュール記述子ファイルです。

2

test

テストコード（Javaクラス）のソースファイル。

gwtクライアント側コードをテストするJavaクラスを含むクライアントフォルダー。

3

war

これは最も重要な部分であり、実際にデプロイ可能なWebアプリケーションを表します。

コンパイルされたクラス、gwtライブラリ、サーブレットライブラリを含むWEB-INF。

HelloWorld.css、プロジェクトスタイルシート。

HelloWorldl、GWT UIアプリケーションを呼び出すHTMLを起動します。

ステップ2-モジュール記述子の変更：HelloWorld.gwt.xml

GWTプラグインは、デフォルトのモジュール記述子ファイル_src/com.finddevguides/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.finddevguides.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

手順3-スタイルシートの変更：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;
}

手順4-ホストファイルの変更：HelloWorldl

GWTプラグインは、デフォルトのHTMLホストファイル_war/HelloWorldl_を作成します。このファイルを修正して、サンプルを最も単純なレベルの理解に保つようにしましょう-

<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、画像などの静的ファイルを作成するか、さらにサブディレクトリを作成してそれらのサブディレクトリにファイルを移動し、アプリケーションのモジュール記述子でこれらのサブディレクトリを構成できます。

手順5-エントリポイントの変更：HelloWorld.java

GWTプラグインは、アプリケーションのエントリポイントを保持するデフォルトのJavaファイル_src/com.finddevguides/HelloWorld.java_を作成します。

このファイルを変更して、「Hello、World！」を表示しましょう。

package com.finddevguides.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ファイルを作成して、エントリポイントを定義するか、ヘルパールーチンを定義できます。

ステップ6-アプリケーションのコンパイル

すべての変更が完了したら、プロジェクトをコンパイルします。オプション GoogleアイコンGoogleサービスおよび開発ツール> GWTコンパイルプロジェクト… を使用して、以下に示すようにGWTコンパイルダイアログボックスを起動します-

GWTプロジェクトのコンパイルウィザード

デフォルト値をそのままにして、「コンパイル」ボタンをクリックします。すべてがうまくいくと、Eclipseコンソールに次の出力が表示されます。

Compiling module com.finddevguides.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

ステップ7-アプリケーションの実行

次に、アプリケーションの実行をクリックして、アプリケーションを実行し、 HelloWorld アプリケーションを選択してアプリケーションを実行します。

GWT実行ボタン

すべてが正常な場合、以下に示すURLを含むEclipseでGWT開発モードがアクティブになっている必要があります。 URLをダブルクリックしてGWTアプリケーションを開きます。

GWTアプリケーションの実行

開発モードでアプリケーションを実行しているため、ブラウザにGWTプラグインをインストールする必要があります。画面上の指示に従ってプラグインをインストールするだけです。

既にブラウザにGWTプラグインが設定されている場合は、次の出力が表示されるはずです。

GWTアプリケーション結果

おめでとうございます。 Google Web Toolkit（GWT）を使用して最初のアプリケーションを実装しました。

Gwt-create-application