Step 1: GWTプロジェクトの作成

目次：Google Web Toolkit チュートリアル（目次） - webとかmacとかやってみようか
原文：http://code.google.com/intl/ja/webtoolkit/doc/1.6/tutorial/create.html

ここまでで、Google Web Toolkit の最新版をダウンロードしているよね。

このセクションでは Google Plugin for Eclipse かコマンドラインツールを使って StockWatcher プロジェクトを作るよ。これらのユーティリティが必要なファイルやディレクトリを作ってくれるよ。プロジェクトが正しく出来たかをテストするために、GWTスターターアプリケーションをホストモードで動かしてみよう。それから作られたファイルを見てみよう。

1. GWTアプリケーションの作成
2. デフォルトプロジェクトコンポーネントのテスト
3. プロジェクトコンポーネントの検査

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

StockWatcherアプリケーションの作成（Eclipseを使った場合）

GWT（訳注：IDEでは？）を使うメリットの一つは、リファクタリングやコード補完、デバッグなどのIDE がもつ強力なツールが使えることだよ。このチュートリアルでは Eclispe を使うけど、ほかのツールでもいいよ。

Google Plugin for Eclipse には GWT アプリケーションを作成するウィザードがあるよ。

1. ツールバーの 「New Web Application Project」ボタン をクリックする。
2. プロジェクトの詳細を記入する
   1. プロジェクト名 ”StockWatcher”
   2. パッケージ ”com.google.gwt.sample.stockwatcher”
   3. 「Use Google Web Toolkit」をチェックし、「Use default SDK (GWT) 」を選択。
   4. （オプション）もしGoogle App Engineを使ってるなら、「Use Google App Engine」をチェックして「Use default SDK (App Engine)」を選択する。
   5. もしGoogle Plugin for EclipseをインストールするときにSDKは入れてなければ 「Configure SDKs...」で GWT SDK のディレクトリを指定する。
3. 「Finish」ボタンをクリック

StockWatcherアプリケーションの作成（Eclipseを使わない場合）

（省略）

作られたディレクトリ

• /src/com/google/gwt/sample/stockwatcher
  • GWTモジュール定義、初期アプリケーションファイルを含む
• /war
  • パブリックな静的リソース（画像ファイル、スタイルシート、HTMLページなど）
• /war/WEB-INF

Java web アプリケーションファイル

• /war/WEB-INF/lib

Java web アプリケーションライブラリ

注）GWT 1.6 より 静的ファイルは /war に移動されました。

作られたファイル

• StockWatcher.gwt.xml
  • GWT モジュール定義
• StockWatcher.html
  • ホストページ
• StockWatcher.css
  • アプリケーションスタイルシート
• web.xml
  • Java web アプリケーション記述子
• StockWatcher.java
  • GWT エントリーポイントクラス
• GreetingService.java, GreetingServiceAsync.java, GreetingServiceImpl.java
  • GWT サンプル RPC クラス
• gwt-servlet.jar
  • GWT サーバランタイムライブラリ

作られたスクリプト

• buid.xml
  • コマンドラインからアプリケーションの実行やコンパイルを行うAntのビルドファイル

Eclipse のファイル

• .project
• .classpath
• StockWatcher.launch

webAppCreator の詳しいオプションは、webAppCreator 参照。
プロジェクトん構成についてもっと知りたければ、Developer's Guide の Directory/Package Conventions を見てね。

2. デフォルトプロジェクトコンポーネントのテスト

作られたプロジェクトのコンポーネントのチェックは、ホストモードで実行すればいいよ。ホストモードではデプロイされたみたいに動くよ。

ホストモードでアプリケーションの実行（Eclispeで）

1. パッケージエクスプローラビューで、StockWatcherプロジェクトを選択。
2. ツールバーから、Run（Run as Web Application）をクリック。

ホストモードでアプリケーションの実行（Eclispeを使わず）

（省略）

3. プロジェクトコンポーネントの検証

生成されたいくつかのファイルを見てみよう。

モジュールXMLファイル

StockWatcher/src/com/google/gwt/sample/stockwatcher/StockWatcher.gwt.xml を開いてみよう。

これは GWTモジュールの定義やリソースの集合が書かれているよ。StockWatcher はコアGWT機能を継承しているよ。別のGWTモジュールから継承することもできるよ。

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='stockwatcher'>
  <!-- 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.standard.Standard'/>
  <!-- <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.google.gwt.sample.stockwatcher.client.StockWatcher'/>
</module>

モジュールXMLファイルでは、アプリケーションのエントリーポイントクラスを指定するよ。コンパイルするためにGWTモジュールはエントリーポイントを明確にしないといけない。もしGWTモジュールがエントリーポイントを持たないなら、他のモジュールで継承することだけできるよ。エントリーポイントを持つ別のモジュールをインクルードすることは可能だよ。またその場合、複数のエントリーポイントを持つことになる。それぞれのエントリーポイントは順番に実行されるよ。

通常、StockWatcher は二つのスタイルシートを使うよ。デフォルトの GWTスタイルシート standard.css （継承されたテーマから参照されている）と、生成されたアプリケーションスタイルシート StockWatcher.css 。後で、デフォルトのGWTスタイルの上書きについて学ぶよ。

ホストページ

ホストページ StockWatcher/war/StockWatcher.html を開いてみよう。

webアプリケーションのコードはHTMLドキュメントの中で実行されるよ。GWTではこれをホストページと読んでるよ。StockWatcherプロジェクトのホストページは StockWatcher.html だよ。

ホストページはアプリケーションスタイルシート StockWatcher.css を参照するよ。

ホストページは、ページの要素を動かすために JavaScript（GWTで生成された）を参照するよ。body要素のコンテンツは全部、動的に生成されるよ。例えば、スターターアプリケーションのように。しかし、StockWatcherアプリケーションを実装すると、静的と動的要素を組み合わせるようになるよ。HTMLの div 要素を動的生成のプレイスホルダーとして作るよ。

Quirks Mode（互換モード）と 標準モードの選択
より良いクロスブラウザ互換性を提供するために、GWT は doctype 宣言を HTML 4.01 Transitional にしているよ。これはレンダリングエンジンを Quirks Mode（互換モード）にするよ。もし、"Standards Mode" でレンダリングしたいなら、別の doctype にするといいよ。普通は、GWTアプリケーションは Standards Mode でもうまく動くでしょう。しかし、パネルのようなウィジェットを使ったケースでは正しくレンダリングできないかもしれない。この問題は GWT 1.5 以上ではだいぶ改善されてよくなってきている。

ブラウザ履歴の保護
GWT は アプリケーションがユーザの期待にあうように助けるメカニズムを提供します。特に、複数ページでのウィザードやショッピングカード／チェックアウトのシナリオなどで、ブラウザのバックボタンを使用する場合などで。ホストページは、GWTアプリケーションで履歴をサポートするために iframe タグを含むよ。

（GWT のブラウザ履歴管理についてもっと知りたければ、Developer's Guide の History を参照）

アプリケーションスタイルシート

StockWatcher/war/StockWatcher.css を開いてみよう。

スタイルシートはプロジェクト毎に関連づけられるよ。デフォルトでは、アプリケーションスタイルシート StockWatcher.css はスターターアプリケーションのスタイルを含むよ。このチュートリアルの Applying Style セクションでこのスタイルルールを StockWatcherアプリに用に書き換えていくよ。

普通の web ページのように、複数のスタイルシートを使えるよ。継承の順番に複数のスタイルシートを並べるよ。一番具体的なスタイルをリストの最後に書くよ。

Java ソースコード

StockWatcher エントリーポイントのクラスのソースを開いてみよう。
StockWatcher/src/com/google/gwt/sample/stockwatcher/client/StockWatcher.java

今のところ、StockWatcher.java はスターターアプリの Java ソースコードを含んでいるよ。このチュートリアルで StockWatcher のクライアントサイドのコードに書き換えていくよ。

StockWatcher クラスは GWT の EntryPoint インターフェースを実装しているよ。これは onModuleLoad めドットを含んでいる。StockWatcher クラスは モジュール定義でエントリーポイントとして提議されているので、StockWatcher が起動したときに onModuleLoad メソッドが呼ばれるよ。

StockWatcher クラスは モジュール定義（StockWatcher.gwt.xml）に含まれている、他の GWT モジュールからも機能を引き継ぐよ。例えば、ユーザインターフェースを構築するとき、com.google.gwt.user.client.ui パッケージの型やリソースを取り込むことができるよ。これは GWT の com.google.gwt.user.User モジュールに含まれた基本機能の一部だからだよ。

次は

ここまでで、StockWatcherアプリのスタブファイルを作って、プロジェクトを Eclipse にロードしたよね。

これで、StockWatcherアプリの設計をする用意ができたよ。

Step 2: アプリケーションの設計 - webとかmacとかやってみようか