Google Web Toolkit (GWT) を初めて学ぶ人のための学習サイトです。実用的なコード例でわかりやすく解説しています。
Google Web Toolkit (GWT) 入門Google Web Toolkit (GWT) 入門
GWT 開発環境
GWT の基本
さらに学ぶ
サイト情報
スポンサーリンク
ホーム > Google Web Toolkit (GWT) の基本 > はじめての GWT アプリケーション

はじめての GWT アプリケーション

ここでは単純なサンプルプログラムを作ります。

GWT では UI 要素をどのように配置するのか。

GWT ではイベントをどのように処理するのか。

そういった基本的な事柄を、単純なサンプルプログラムを開発ることを通して学びましょう。

はじめての GWT アプリケーション

ここでは GWT を利用して次のような単純な Web アプリケーションを作ります。

テキストボックスとボタンが並んでいます。

はじめての GWT アプリケーション

このままでは真っ白で見えませんが、実はその下にラベルが配置されています。

テキストボックスに文字を入力して、ボタンをクリックすると、そのラベルに文字がコピーされます。

はじめての GWT アプリケーション

では、これがどのように実現されているか、みていきましょう。

プロジェクトの準備

Web Application の作成」などを参考にして、Google - Web Application Project を作成してください。

はじめての GWT アプリケーション

ここでは test1 という名前のプロジェクトにしました。パッケージは com.keicode.gwt.test1 です。

自動的に作成されるソースコードから不要な部分を削除します。

ここでは EntryPoint を実装するクラス (私の場合 com.keicode.gwt.test1.client 以下の Test1.java) の onModuleLoad メソッドだけあれば OK です。

また、ホストファイル (war 下の Test1.html) を書き換えて、Body 部をシンプルにしてしまいます。

はじめての GWT アプリケーション

スクリーンショットでは iframe や noscript だけ残しています。

GWT での基本的な UI 要素の配置

UI 要素として、「上側にテキストボックスとボタンを横並びに配置。そして、その下にラベルを配置」という構成です。

これを実現するには、(いろいろ方法はありますが) GWTでは次の方法等があります。

はじめての 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 を選択。

はじめての GWT アプリケーション

コンパイルが正常終了したら、Run As から Web Application を選択します。

はじめての GWT アプリケーション

すると Development Mode にテスト用サーバーへの URL が表示されるので、ブラウザからそれへアクセスします。

はじめての GWT アプリケーション

これによって冒頭のようなプログラムが実行されるはずです。


スポンサーリンク
ホーム > Google Web Toolkit (GWT) の基本 > はじめての GWT アプリケーション
スポンサーリンク

© 2010-2013 Keisuke Oyama Google Web Toolkit (GWT) 入門