プログラムを修正してみよう
基本的なプログラムの仕組みがわかったら、これを元にして少しプログラムを修正してみましょう。まず、クラスの修正からです。先ほどのものは無名クラスを使うなどしてちょっとわかりにくかったので、もっとすっきりした形で書き直し、更に機能を変更してみましょう。
public class MyGwt implements EntryPoint,ClickListener {
final private TextBox textbox = new TextBox();
final private Button button = new Button("Click me");
final private Label label = new Label();
public void onModuleLoad() {
button.addClickListener(this);
RootPanel.get("slot1").add(label);
RootPanel.get("slot2").add(textbox);
RootPanel.get("slot3").add(button);
}
public void onClick(Widget sender) {
String s = textbox.getText();
label.setText("Hello," + s + "!!");
}
}ClickListenerもimplementsさせてonClickメソッドを自身の中に用意させることにしました。また、新たに「TextBox」というコンポーネントを追加してみました。そして、TextBoxから入力されたテキストを使ってLabelのテキスト表示を変更する簡単な処理を作成しておきます。
続いて、HTML側の修正です。今回は3つのコンポーネントがありますから、これらを埋め込むように<table>タグを修正しておきましょう。
<table align=center>
<tr>
<td id="slot1"></td>
</tr>
<tr>
<td id="slot2"></td>
</tr>
<tr>
<td id="slot3"></td>
</tr>
</table>
これでプロジェクトをリビルドしてみましょう。今度は入力フィールドを持った画面が表示されます。ここでテキストを入力すると、「Hello,○○!!」と表示されるようになります。
 |
| テキストを入力してボタンを押すと、「Hello,××!!」と表示される。 |
ビルドされたプログラムはどこに?
ところで、こうして作成したプログラムのファイル類というのは、どこにあるのでしょうか。ワークスペースにあるプロジェクトのフォルダを調べてみると、プロジェクト名の冒頭にドットをつけた名前のフォルダ(ここでは、.gwtOutput)が作成されており、その中にモジュール名のフォルダ(jp.tuyano.MyGwt)が作られていることがわかります。実は、このフォルダこそが、最終的に生成されたAjaxプログラムによるWebアプリケーションなのです。
このフォルダの中を見ると、いくつものHTMLやXML、JavaScriptファイルなどが作成されていることがわかります。この中から、モジュール名のHTMLファイル(MyGwt.html)をブラウザで開いてみましょう。先ほどGooglipseで実行した画面と全く同じものが表示されたはずです。これが、最終的にビルドして作成されたWebページのファイルなのです。
このフォルダの中にはJavaのクラスファイルは存在しません。つまり、Javaのプログラムは、あくまで「Ajaxによるプログラム類を生成するため」に作成したものだったのです。では、Javaのクラスは? そう、定義したJavaクラスを元にしてJavaScriptとHTML/XMLファイルが生成されれば、もうJavaクラスは不要です。「Javaで開発しているのに、完成したプログラムにはJavaのプログラムはない」という奇妙なことになってしまうのですね。
「だったらJavaなんて使わなくていいじゃないか」と思われるかもしれませんが、それは違います。JavaScriptだけで高度な処理を作成するのは非常に大変なのです。Javaを使って基本的なGUIとイベント処理を記述できたからこそ、こんなに簡単に作れたのですよ。そのことを忘れないようにしましょう。
ここでは、GWTのほんの触り程度しかできませんでしたが、それでも「Javaでコンポーネントを使ってGUIやイベント処理を記述できる」ということの利点は感じられたはずです。興味ある人は、腰をすえてGWTを使ってみると面白いですよ。
関連リンク
Google Web ToolkitEclipse WTPGooclipse