GWT-アプリケーション

GWTを使用して実際の「HelloWorld」アプリケーションの作成を開始する前に、GWTアプリケーションの実際の部分が何であるかを見てみましょう。

GWTアプリケーションは、次の4つの重要な部分で構成されており、最後の部分はオプションですが、最初の3つの部分は必須です。

  • モジュール記述子
  • パブリックリソース
  • クライアント側のコード
  • サーバーサイドコード

典型的なgwtアプリケーションのさまざまな部分のサンプルの場所 HelloWord 以下のようになります−

名前 ロケーション
プロジェクトルート こんにちは世界/
モジュール記述子 src / com / tutorialspoint / HelloWorld.gwt.xml
パブリックリソース src / com / tutorialspoint / war /
クライアント側のコード src / com / tutorialspoint / client /
サーバーサイドコード src / com / tutorialspoint / server /

モジュール記述子

モジュール記述子は、GWTアプリケーションを構成するために使用されるXML形式の構成ファイルです。

モジュール記述子ファイル拡張子は* .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" />

これにより、Javaアプリケーションでインポートが行うのと同じように、アプリケーションに他のgwtモジュールが追加されます。この方法で、任意の数のモジュールを継承できます。

3

<entry-point class = "classname" />

これは、GWTアプリケーションのロードを開始するクラスの名前を指定します。任意の数のエントリポイントクラスを追加でき、モジュールファイルに表示される順序で順番に呼び出されます。したがって、最初のエントリポイントのonModuleLoad()が終了すると、次のエントリポイントがすぐに呼び出されます。

4

<source path = "path" />

これは、GWTコンパイラーがソースコンパイルを検索するソースフォルダーの名前を指定します。

5

<public path = "path" />

パブリックパスは、CSSや画像など、GWTモジュールによって参照される静的リソースが保存されるプロジェクト内の場所です。デフォルトのパブリックパスは、モジュールXMLファイルが保存されている下のパブリックサブディレクトリです。

6

<script src="js-url" />

srcで指定された場所にある外部JavaScriptファイルを自動的に挿入します。

7

<stylesheet src="css-url" />

srcで指定された場所にある外部CSSファイルを自動的に挿入します。

パブリックリソース

これらはすべて、ホストHTMLページ、CSS、画像など、GWTモジュールによって参照されるファイルです。

これらのリソースの場所は、モジュール構成ファイルの<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;
}

クライアント側のコード

これは、アプリケーションのビジネスロジックを実装して記述された実際のJavaコードであり、GWTコンパイラーがJavaScriptに変換し、最終的にブラウザー内で実行されます。これらのリソースの場所は、モジュール構成ファイルの<source path = "path" />要素を使用して構成できます。

例えば Entry Point コードはクライアント側のコードとして使用され、その場所は<source path = "path" />を使用して指定されます。

モジュール entry-point に割り当て可能な任意のクラスです EntryPointそしてそれはパラメータなしで構築することができます。モジュールがロードされると、すべてのエントリポイントクラスがインスタンス化され、EntryPoint.onModuleLoad()メソッドが呼び出されます。HelloWorldエントリポイントクラスのサンプルは次のようになります-

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

サーバーサイドコード

これはアプリケーションのサーバー側の部分であり、非常にオプションです。アプリケーション内でバックエンド処理を行っていない場合、この部分は必要ありませんが、バックエンドで必要な処理があり、クライアント側アプリケーションがサーバーと対話する場合は、これらのコンポーネントを開発する必要があります。

次の章では、上記のすべての概念を利用して、EclipseIDEを使用してHelloWorldアプリケーションを作成します。