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アプリケーションを作成します。