GWT の Widget である PushButton を使う方法を示します。ウィジェットには普通の ボタンもありますが、 Pushbutton は普通のボタンをどう違うのでしょうか。

PushButton とは？

GWT の PushButton (プッシュボタン) はスタイルをカスタマイズ可能なボタンです。押下したとき、ボタンが上がっているとき、有効化しているとき、 無効化されたときなどでそれぞれ異なった視覚効果が欲しい場合等は、普通の Button ではなく PushButton を使います。

さっそく、単純な例をみていきましょう。

下の緑の枠線で囲まれたところは、実は PushButton として作ってあります。

これを押下すると・・・

このように、文字が変わります。

そして、マウスをアップする（プッシュをやめる）と、、、

そのマウスアップにあわせて、このようにメッセージが出る、というプッシュボタンを考えます。 このようなボタンをどのように実装すればよいでしょうか。

PushButton の実装方法

上でみたボタンの動作は、実は PushButton の基本的な動作といえます。なぜなら、PushButton ではもともと、ボタンUP時の表示文字、ボタンDOWN時の表示文字、 そして、（ボタンとして当然ながら）クリックイベントの処理ということが考慮されているからです。

PushButton クラスのコンストラクタのひとつに、

PushButton(String upText, String downText, ClickHandler handler)

というものがあり、これが UP時の表示文字 (upText)、DOWN時の表示文字 (downText)そしてクリックハンドラを受け取ります。

これはまさに上記のような動作を考えたものです。

従って、このコンストラクタで次のようにすることで、ボタン UP/DOWN で文字を切り替え、さらにイベントに反応することができます。

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.PushButton;
import com.google.gwt.user.client.ui.RootPanel;


public class Gwttest1 implements EntryPoint {

  @Override
  public void onModuleLoad() {
    final PushButton pushButton1 = new PushButton(
      "Hello!", "Bye!",
      new ClickHandler(){
        @Override
        public void onClick(ClickEvent event) {
          Window.alert("Hello, PushButton!");
        }
      }
    );    
    pushButton1.setStyleName("pushButton1");
    
    RootPanel.get("pushButton1").add(pushButton1);
  }
}

スタイルの指定

さて、残すは表示スタイルを指定するところです。ここでは緑の枠線だけ、というシンプルなものになっていますが、これはどのように実装すればよいでしょうか。

まず、基本的なスタイルの適用方法については、「スタイルの適用」を見てください。

ここでは、このプッシュボタンに pushButton1 というスタイル名を指定しています。

    pushButton1.setStyleName("pushButton1");

すると、基本的なクラス名として pushButton1 が使えるようになります。

その他、ボタンの動作、状態に合わせて pushButton1-up、pushButton1-up-hovering、pushButton1-down-hovering 等が使えますので、それらを指定することでボタンのスタイルを細かく制御できます。

上の例では、css ファイルに次を指定してあります。

.pushButton1 {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 3px solid #080;
}

例えば、up、up-hovering、down-hovering に関するスタイルを指定するなら、CSSにそれぞれの要素を追加すれば OK です。

.pushButton1 {
}

.pushButton1-up {
}

.pushButton1-up-hovering {
}

.pushButton1-down-hovering {
}