ポップアップパネル ～ PopupPanel の利用

PopupPanel (ポップアップパネル) は、普段隠れていて必要に応じて表示されるタイプのパネルです。 例えば何かのイベントをトリガーにして、ツールチップ的な情報を表示する等に使われます。

例えば、次のスクリーンショットでは、ボタンをクリックしたときに PopupPanel を利用してメッセージが表示されています。

ちなみに、このスクリーンショットでは水色の枠線が設定されていますが、これは GWT のデフォルトの配色です。 また、画面でなにもない所をクリックするとメッセージは自動的に消えます。

PopupPanel を利用したメッセージの表示

さて、このポップアップメッセージをどのように実装するかみてみましょう。

ポイントは次の通りです。

1. PopupPanel から派生するクラスを定義する (ここではこれを MyPopup という名前にします)
2. MyPopup のコンストラクタでオートハイド、モーダルの属性を指定する
3. MyPopup のコンストラクタで setWidget を用いてウィジェットを設定する
4. 表示場所を指定する

PopupPanel から派生するクラスを定義し属性を設定

ポップアップパネルを利用するときは、PopupPanel (com.google.gwt.user.client.ui.PopupPanel) からクラスを派生します。

派生したクラスで行うことは、コンストラクタにてスーパコンストラクタでポップアップパネルの属性を指定することです。

      super(true, false); 

super の第一引数がオートハイド属性で、第二引数がモーダル属性です。

オートハイド (auto-hide) を true にすると、ポップアップパネル以外の場所をクリックすると自動的にポップアップパネルが非表示になります。これはツールチップテキストとしては非常に自然な動作でしょう。 モーダル (modal) を true にすると、ポップアップパネルが表示されている時にその他の領域へのイベントが無視されます。例えばポップアップパネルが表示されているときに、その下にボタンなどがあったとしても、 それをクリックしてもボタンのクリックが有効になりません。

属性を指定したら、次はポップアップパネルに必要なウィジェットを設定します。 上の例のようにメッセージを表示するだけなら、Label を追加するだけで OK です。

表示場所の指定

ポップアップパネルの表示場所は、 setPopupPositionAndShow メソッドに PopupPanel.PositionCallback オブジェクトを設定することで指定します。

今回の例ではボタンの右下に表示するので、ボタンの場所とサイズから表示場所を決めています。ボタンの左上の座標は getAbsoluteLeft()、getAbsoluteTop() で取得し、 幅は getOffsetWidth()、getOffsetHeight() で取得できます。 ポップアップパネルの左上の座標を決めたら、setPopupPosition メソッドにその座標を渡せば OK です。

        popup.setPopupPositionAndShow(new PopupPanel.PositionCallback(){
          @Override
          public void setPosition(int offsetWidth, int offsetHeight) {
                  int left = popupButton.getAbsoluteLeft() 
                    + popupButton.getOffsetWidth();
                  int top = popupButton.getAbsoluteTop()
                    + popupButton.getOffsetHeight();
                  popup.setPopupPosition(left, top);
          }
        });

PopupPanel の簡単な利用例

それでは実際に試してみましょう。出来上がりは先ほどのスクリーンショットと同じ、簡単なポップアップです。

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

public class Gwttest1 implements EntryPoint {
  public void onModuleLoad() {
    final Button popupButton = new Button("Show Popup");
    
    popupButton.addClickHandler(new ClickHandler(){
      @Override
      public void onClick(ClickEvent event) {
        final MyPopup popup = new MyPopup();
        popup.setPopupPositionAndShow(new PopupPanel.PositionCallback(){
          @Override
          public void setPosition(int offsetWidth, int offsetHeight) {
                  int left = popupButton.getAbsoluteLeft() 
                    + popupButton.getOffsetWidth();
                  int top = popupButton.getAbsoluteTop()
                    + popupButton.getOffsetHeight();
                  popup.setPopupPosition(left, top);
          }
        });
        popup.show();
      }
    });
    
    RootPanel.get("popupButton").add(popupButton);
  }
  
  
  private class MyPopup extends PopupPanel {
    public MyPopup(){
      super(true, false); 
      setWidget(new Label("Hello, PopupPanel!"));
    }
  }
}

このコードではホストページに配置した ID="popupButton" の div 要素にボタンを割り当てています。

<div id="popupButton"></div>