Google Web Toolkit メモ

2011/02/19
特徴 | アプリケーションを作り始める手順 | アプリケーションの起動 | クライアント UI のレイアウト | CSS の設定 | UIBinder の利用 | JavaScript コードの利用 | JSONP による外部サーバーとの通信 | ログの出力

特徴

Google Web Toolkit (以下 GWT) は Google がオープンソースで配布している Web アプリケーションのためのフレームワークで以下の特徴を持つ。

アプリケーションを作り始める手順

  1. Eclipse (3.4 or 3.5 or 3.6) をインストール。ダウンロードはこちら。自分が試したときは余計なプラグインのついていない Classic 版を利用。手元にあった 3.4 環境だと次のステップでエラーが出たので、新しく 3.5 をダウンロードして利用した。
  2. Google の開発プラグインを導入。Eclipse のプラグインインストール機能を使用する(Help -> Install New Software メニュー)。Google のリポジトリの URL はこちら
  3. プロジェクトの作成。プラグインをインストールすると GWT のプロジェクトを作成できるようになる。新規作成で「Web Application Project」を選んでウィザードに従うだけ。

アプリケーションの起動

新規作成時にサンプルコードを生成するように設定すると、プロジェクト生成後すぐ起動できる状態になる。開発用にブラウザのプラグイン上で動かす方法と、公開用に JavaScript の生成を行って動かす方法があり、起動時にどっちにするか聞かれる。通常は開発用の設定(外部サーバーでうんたらと書いてないほう)で起動するとよい。いったん開発用設定で起動した後はブラウザを更新するだけでソースの変更が反映される。

クライアント UI のレイアウト

生成されたファイルのうち「war/AppName.html」「src/.../client/AppName.java」がクライアントコードの中心になる(AppName はアプリケーション名によって変わる)。HTML のほうが静的な外観を定義し、Java ソースから動的に弄る形になる(通常の Web アプリケーションの JavaScript 部分に相当)。

レイアウトには

方法がある。前者の場合は HTML の要素に ID を振って

RootPanel.get("my_id").add(button)

のように RootPanel のインスタンスとしてその要素にアクセスできる。RootPanel の下にはボタンなどの UI 部品(ウィジェットと言う)を追加できるが RequiresResize インターフェイスを持っているような部品(主にレイアウト用コンテナ)は追加してもうまく動かない。つまりレイアウトは全部自前で HTML に書いておく必要がある。

後者の方法では、ページにひとつだけ存在する RootLayoutPanel を取得してその下にウィジェットを追加していく。

RootLayoutPanel.get().add(button)

こちらは RequiresResize 持ちのウィジェットが使えるので、レイアウトをすべて GWT に任せてしまえる。

CSS の設定

自動生成された「war/AppName.css」がデフォルトの CSS ファイルになる。

動的に CSS を設定するには UIObject の addStyleName を使って

uiobj.addStyleName("cssClassName");

のように CSSClassName を指定する、あるいは

uiobj.getElement().setId("");

と HTML 要素に ID を設定して対応する CSS を反映させるなどの方法がある。

UIBinder の利用

UIBinder を使うと次のような XML から UI を生成することができる。(XML の仕様は各ウィジェットクラスの JavaDoc に書いてある。または Eclipse 上の GUI エディタを利用すると楽)

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
	xmlns:g="urn:import:com.google.gwt.user.client.ui">
	<ui:style>
	</ui:style>
  <g:DockLayoutPanel unit='EM'>
    <g:north size='5'>
      <g:Button ui:field="button">Top</g:Button>
    </g:north>
    <g:center>
      <g:Label>Body</g:Label>
    </g:center>
    <g:west size='192'>
      <g:HTML>
        <ul>
          <li>Sidebar</li>
          <li>Sidebar</li>
          <li>Sidebar</li>
        </ul>
      </g:HTML>
    </g:west>
  </g:DockLayoutPanel>
</ui:UiBinder>

この XML は普通にテキストエディタで編集することも、Eclipse 上のグラフィカルなツールで編集することもできる。

UIBinder を利用して UI を生成するには

  1. UI を定義した XML ファイル
  2. 定義した UI の各部品を保持するクラス

の2つが必要である。Eclipse の新規作成メニューから UiBinder を指定するとこの2つが自動的に生成される。通常は自動生成されたクラスを new して前述の RootLayoutPanel に突っ込むことになる。自動生成を行わず手動で UiBinder を使用するには以下のようにする。

class MyApp {
  // UiBinder を継承したインターフェイスを作る
  // 作成される UI のトップ要素は DockLayoutPanel
  // UIを作成する(UI 中で定義された名前のある子要素を受け取る)クラスは MyApp
  interface MyUiBinder extends UiBinder<DockLayoutPanel, MyApp> {}

  // 上記のようなインターフェイス定義が書かれたファイル(MyApp.java)と
  // 同じディレクトリにある MyApp.ui.xml が UI 定義ファイルとして参照される

  // UI 定義ファイル中にフィールド名(ui:field 属性)を持つ UI 部品がある場合は
  // 対応する @UiField アノテーション付きのメンバ変数が必要
  @UiField Button button;

  // UiBinder のインスタンスを得る
  private final MyUiBinder binder = GWT.create(MyUiBinder.class);

  public void onModuleLoad() {
    // UI オブジェクトを実際に作成
    // この時 button などの UI フィールドへの代入も行われる
    DockLayoutPanel panel = binder.createAndBindUi(this);

    // 後は適当な親要素に追加して使える
    RootLayoutPanel.get().add(panel);
  }
}

JavaScript コードの利用

クライアントサイドのコードをサーバーサイドと同じ Java で書けるのが GWT の利点の一つだが、時には JavaScript を直接記述したくなる場面もある。

JSNI と呼ばれる機能を用いるとクライアントサイドの Java コード中に JavaScript のコードを埋め込み、Java のメソッドとしてアクセスできるようになる。

public native static void javaScriptFunc(int requestId, String url,
      StockWatcher handler) /*-{
  ...
}-*/;

JSONP による外部サーバーとの通信

GWT は標準ではクライアントサイドから JSONP を用いて外部サーバーへアクセスする機能を持っていない。JSONP 呼び出しを行いたい場合は JSNI を用いて自前で実装する必要がある。 Google のチュートリアル に例がある。

ログの出力

GWT クラスを介して行う。出力は Eclipse の Development Mode ビューに表示される。

GWT.log("Hellow!");
戻る