はじめての GWT アプリケーション
ここでは単純なサンプルプログラムを作ります。
GWT では UI 要素をどのように配置するのか。
GWT ではイベントをどのように処理するのか。
そういった基本的な事柄を、単純なサンプルプログラムを開発ることを通して学びましょう。
はじめての GWT アプリケーション
ここでは GWT を利用して次のような単純な Web アプリケーションを作ります。
テキストボックスとボタンが並んでいます。
このままでは真っ白で見えませんが、実はその下にラベルが配置されています。
テキストボックスに文字を入力して、ボタンをクリックすると、そのラベルに文字がコピーされます。
では、これがどのように実現されているか、みていきましょう。
プロジェクトの準備
「Web Application の作成」などを参考にして、Google - Web Application Project を作成してください。
ここでは test1 という名前のプロジェクトにしました。パッケージは com.keicode.gwt.test1 です。
自動的に作成されるソースコードから不要な部分を削除します。
ここでは EntryPoint を実装するクラス (私の場合 com.keicode.gwt.test1.client 以下の Test1.java) の onModuleLoad メソッドだけあれば OK です。
また、ホストファイル (war 下の Test1.html) を書き換えて、Body 部をシンプルにしてしまいます。
スクリーンショットでは iframe や noscript だけ残しています。
GWT での基本的な UI 要素の配置
UI 要素として、「上側にテキストボックスとボタンを横並びに配置。そして、その下にラベルを配置」という構成です。
これを実現するには、(いろいろ方法はありますが) GWTでは次の方法等があります。
横に並べるために HorizontalPanel 作成し、それに順番に TextBox、Button 要素を追加。
次に縦に並べるために VerticalPanel を作成します。そしてそれに TextBox と Button が配置された HorizontalPanel と、Label を順番に追加。
こうすることで全体のレイアウトが完成します。
ボタンのクリックハンドラを含めると、実際のソースコードはつぎのようになります。
package com.keicode.gwt.test1.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.HorizontalPanel;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.TextBox;
import com.google.gwt.user.client.ui.VerticalPanel;
public class Test1 implements EntryPoint {
@Override
public void onModuleLoad() {
final TextBox textBox1 = new TextBox();
final Button button1 = new Button("OK");
final Label label1 = new Label();
// ClickHandler
button1.addClickHandler(new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
label1.setText(textBox1.getText());
}
});
// Layout
final HorizontalPanel horizontalPanel = new HorizontalPanel();
horizontalPanel.add(textBox1);
horizontalPanel.add(button1);
final VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.add(horizontalPanel);
verticalPanel.add(label1);
RootPanel.get().add(verticalPanel);
}
}
GWT アプリケーションの実行
GWT アプリケーションを実行するには、プロジェクトのコンテキストメニューから Google を選びそこで、GWT Compile を選択。
コンパイルが正常終了したら、Run As から Web Application を選択します。
すると Development Mode にテスト用サーバーへの URL が表示されるので、ブラウザからそれへアクセスします。
これによって冒頭のようなプログラムが実行されるはずです。