Gwt-applications
GWT-アプリケーション
GWTを使用して実際の「HelloWorld」アプリケーションの作成を開始する前に、GWTアプリケーションの実際の部分が何であるかを見てみましょう-
GWTアプリケーションは、次の4つの重要な部分で構成され、そのうち最後の部分はオプションですが、最初の3つの部分は必須です。
- モジュール記述子
- 公共資源
- クライアント側のコード
- サーバーサイドコード
典型的なgwtアプリケーション HelloWord のさまざまな部分のサンプルの場所は次のようになります-
| Name | Location |
|---|---|
| Project root | HelloWorld/ |
| Module descriptor | src/com/finddevguides/HelloWorld.gwt.xml |
| Public resources | src/com/finddevguides/war/ |
| Client-side code | src/com/finddevguides/client/ |
| Server-side code | src/com/finddevguides/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.finddevguides.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 |
<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!");
}
}サーバー側コード
これはアプリケーションのサーバー側の部分であり、非常にオプションです。 アプリケーションでバックエンド処理を行っていない場合、この部分は必要ありませんが、バックエンドで何らかの処理が必要であり、クライアント側のアプリケーションがサーバーと対話する場合、これらのコンポーネントを開発する必要があります。
次の章では、上記のすべての概念を利用して、Eclipse IDEを使用してHelloWorldアプリケーションを作成します。
