Google Web Toolkit (GWT) 入門

ホーム > UI の設計 > Button の利用

Button の利用

GWT の Widget である Button を使う方法を示します。

ボタンで大切なのは何といっても、クリックイベントを処理することでしょう。

クリックイベントに対するハンドラを設定するには、Button クラスの addClickHandler メソッドに ClickHandler インターフェイスを実装したオブジェクトを渡します。 ClickHandler インターフェイスは、 onClick メソッド一つだけを持ちます。

さっそく、具体例をみてみましょう。

出来上がりは次のようになります。"Click me!" と書かれたボタンがあり、それをクリックすると "Hello, Button!" というポップアップが表示されるというものです。

GWT の Button Widget サンプル

まず、ホストページに次のように、testButton という ID の div 要素を配置します。

<div id="testButton"></div>

EntryPoint となるクラスの onModuleLoad にて、以下のようにボタンを作り、ホストページの "testButton" 要素に関連付けしています。

package com.keicode.gwt.test.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.Window;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;

public class Gwttest1 implements EntryPoint {
  public void onModuleLoad() {
    final Button testButton = new Button("Click me!");
    testButton.addClickHandler(new ClickHandler(){
      @Override
      public void onClick(ClickEvent event) {
        Window.alert("Hello, Button!");
      }
    });
    RootPanel.get("testButton").add(testButton);    
  }
}

前述の通り addClickHandler には、ClickHandler インターフェイスを実装したオブジェクトをセットするのですが、ここでは class キーワードを用いてクラス定義せずに、 匿名内部クラスを利用してそれを行っています。

匿名内部クラスについては、Java 入門の匿名内部クラス をご覧ください。

ホーム > UI の設計 > Button の利用