ToggleButton の利用

トグルボタン (ToggleButton) は元の状態と押下されっぱなしの状態を持つボタンです。ON/OFF の切り替え等に使われるものです。

↓↑

上のスクリーンショットの例では、元の状態のときに "ABC" というラベルで、押下された状態のときに "XYZ" というラベルにしています。 これらのラベルは、ToggleButton のコンストラクタに渡せば実現できます。下のコード例をみてください。

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

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

コードは次のようになります。通常の Button と違うのは、コンストラクタにラベルを二つ (通常と押下時) 渡している点だけです。

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

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

その他、二つの状態でラベルの違いの他画像の切り替えなども可能です。