はじめてのGWT - しんさんの出張所はてなブログ編

GWTの知名度がイマイチ上がらないので、最もシンプルな動作で解説。全てのファイル（といっても３つだけ）を省略なしであげています。

ボタンをクリックするたびにカウンタが増えるというだけものを作ります。

GWTのパッケージ構造

注目してほしいのはhogeというアプリケーションのフォルダがあってその下にclientというフォルダがあること。そしてhogeの下にgwt.xmlという拡張子をもつファイルがあるということ。GWTはかならずこの構成をとる。

clientフォルダにクライアントサイドのコードを入れる。RPC用にserverというフォルダもあるが、ここでは省略する。

gwt.xmlで終わるファイルはアプリケーションの設定ファイル。ここに使用するライブラリやエントリーポイント（いわゆるmain。つまり起動する部分）の設定などが出来る。

環境設定ファイル

今回の設定ファイルは以下のようになる

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 1.7.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/1.7.0/distro-source/core/src/gwt-module.dtd">
<module>
    <inherits name="com.google.gwt.user.User"/>
    <inherits name="com.google.gwt.user.theme.standard.Standard"/>

    <entry-point class="hoge.client.MainEntryPoint"/>

</module>

DTDが1.7をさしているが、まぁ特に変わっていないと思うので問題ない。2.0.0にしても問題なくファイルは存在するのでネットにつながるなら問題は無い。

ざっくりと説明すると

inherits というのが使用するライブラリの指定。Userは必須と思ってよい。Standardは標準テーマのCSS出力設定。

entry-pointというのが起動するエントリーポイントクラスを指定している。

Javaコード

では実際にエントリーポイントのコードを見てみよう。

package hoge.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;


public class MainEntryPoint implements EntryPoint {

    Label label = new Label("カウンタ表示");
    Button button = new Button("くりっくしてくれよん");

    int count = 0;

    public MainEntryPoint() {
        button.addClickHandler(new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                count++;
                label.setText(count + "回クリックした");
            }
        });
    }


    @Override
    public void onModuleLoad() {
        RootPanel.get().add(label);
        RootPanel.get().add(button);
    }
}

エントリーポイントクラスはEntryPoint というインターフェースを実装するが必須。それだけ。onModuleLoadが起動時に設定するもので、ここに各種設定を書くとよい。

動きはコードを見ればすぐにわかるはず。

GWTを起動するHTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <link type="text/css" rel="stylesheet"  href="hoge.Main/gwt/standard/standard.css" />
        <title>Main</title>
    </head>
    <body >
        <script type="text/javascript" src="hoge.Main/hoge.Main.nocache.js"></script>
    </body>
</html>