Google Web Toolkit (GWT) 入門

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

Hyperlink の利用

外部ページへのリンクは HTML によって、いわば普通に a タグを埋めるだけですが、 内部リンク (同一ページへのリンク) については、Hyperlink ウィジェットを利用できます。

Hyperlink によって、foo.html#abc などの同一ページ内に対するリンクを処理します。

次のスクリーンショットでは、それぞれのリンクをクリックしたときに、そのリンクの下に配置したラベルの文字を切り替えています。

GWT Hyperlink の利用

GWT Hyperlink の利用

このように、Hyperlink による内部リンクはボタンとほぼ同様に扱うことができます。

コードサンプルは次の通りです。

public class Gwttest1 implements EntryPoint {

  public void onModuleLoad() {
    final Label label = new Label();
    final Hyperlink link1 = new Hyperlink("Link to Google""Google");
    final Hyperlink link2 = new Hyperlink("Link to Yahoo""Yahoo");
    final Hyperlink link3 = new Hyperlink("Link to Bing""Bing");

    History.addValueChangeHandler(new ValueChangeHandler<String>(){
      @Override
      public void onValueChange(ValueChangeEvent<String> event) {
        label.setTextHistory.getToken() );
      }
    });
    
    RootPanel.get().add(link1);
    RootPanel.get().add(link2);
    RootPanel.get().add(link3);
    RootPanel.get().add(label);
    
  }
}

ここでは Hyperlink オブジェクトを三つ用意し、それぞれにリンクのラベルとヒストリートークンを割り当てています。 そしてヒストリーの変更ハンドラにて、リンクのクリックを処理しています。

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