GWT-PopupPanelウィジェット

前書き

*PopupPanel* ウィジェットは、他のウィジェットの上に*ポップアップ*できるパネルを表します。 ブラウザのクライアント領域（および以前に作成されたポップアップ）をオーバーレイします。

クラス宣言

以下は、 com.google.gwt.user.client.ui.PopupPanel クラスの宣言です-

public class PopupPanel
   extends SimplePanel
      implements SourcesPopupEvents, EventPreview,
         HasAnimation, HasCloseHandlers<PopupPanel>

クラスコンストラクター

Sr.No.

Constructor & Description

1

PopupPanel()

空のポップアップパネルを作成します。

2

PopupPanel(boolean autoHide)

auto-hide* プロパティを指定して、空のポップアップパネルを作成します。

3

PopupPanel(boolean autoHide, boolean modal)

auto-hide* および *modal* プロパティを指定して、空のポップアップパネルを作成します。

クラスメソッド

Sr.No.	Function name & Description
1	void addAutoHidePartner(Element partner) autoHideパートナー内で発生するマウスイベントは、autoHideに設定されたパネルを非表示にしません。
2	HandlerRegistration addCloseHandler( CloseHandler <PopupPanel> handler) CloseEventハンドラーを追加します。
3	void addPopupListener(PopupListener listener) 廃止予定です。 addCloseHandler（com.google.gwt.event。を使用します。代わりにlogical.shared.CloseHandler）
4	void center() ポップアップをブラウザウィンドウの中央に配置して表示します。
5	protected Element getContainerElement() このメソッドをオーバーライドして、ルート要素以外の要素がパネルの子ウィジェットのコンテナになるように指定します。
6	protected Element getGlassElement() このPopupPanelによって使用されるガラス要素を取得します。
7	java.lang.String getGlassStyleName() ガラス要素で使用されるスタイル名を取得します。
8	int getOffsetHeight() パネルのオフセット高さをピクセル単位で取得します。
9	int getOffsetWidth() パネルのオフセット幅をピクセル単位で取得します。
10	int getPopupLeft() ブラウザのクライアント領域に相対的なポップアップの左位置を取得します。
11	int getPopupTop() ブラウザのクライアント領域に相対的なポップアップの最上部の位置を取得します。
12	protected Element getStyleElement() スタイル名が適用される要素を返すテンプレートメソッド。
13	java.lang.String getTitle() このオブジェクトに関連付けられたタイトルを取得します。
14	void hide() ポップアップを非表示にして、ページから切り離します。
15	void hide(boolean autoClosed) ポップアップを非表示にして、ページから切り離します。
16	boolean isAnimationEnabled() アニメーションが有効な場合はtrue、有効でない場合はfalseを返します。
17	boolean isAutoHideEnabled() ユーザーがポップアップの外側をクリックしたときにポップアップを自動的に非表示にする場合はtrueを返します。
18	boolean isAutoHideOnHistoryEventsEnabled( ) ユーザーがブラウザの戻るボタンを押したときなど、履歴トークンが変更されたときにポップアップを自動的に非表示にする必要がある場合はtrueを返します。
19	boolean isGlassEnabled() ガラス要素がPopupPanelの下に表示される場合、trueを返します。
20	boolean isModal() PopupPanelまたはその子を対象としないキーボードイベントまたはマウスイベントを無視する必要がある場合、trueを返します。
21	boolean isPreviewingAllNativeEvents( ) ポップアップがすべてのネイティブイベントをプレビューする必要がある場合、イベントが別のポップアップによって既に消費されている場合でもtrueを返します。
22	boolean isShowing() このポップアップを表示するかどうかを決定します。
23	boolean isVisible() このポップアップが表示されるかどうかを決定します。
24	boolean onEventPreview(Event event) 廃止予定です。 onPreviewNativeEvent（com.google.gwt.user。を使用します。代わりにclient.Event.NativePreviewEvent）
25	boolean onKeyDownPreview(char key, int modifiers) 廃止予定です。 onPreviewNativeEvent（com.google.gwt.user。を使用します。代わりにclient.Event.NativePreviewEvent）
26	boolean onKeyPressPreview(char key, int modifiers) 廃止予定です。 onPreviewNativeEvent（com.google.gwt.user。を使用します。代わりにclient.Event.NativePreviewEvent）
27	boolean onKeyUpPreview(char key, int modifiers) 廃止予定です。 onPreviewNativeEvent（com.google.gwt.user。を使用します。代わりにclient.Event.NativePreviewEvent）
28	protected void onPreviewNativeEvent(Event.NativePreviewEvent event)
29	protected void onUnload()* このメソッドは、ウィジェットがブラウザのドキュメントから切り離される直前に呼び出されます。
30	void removeAutoHidePartner(Element partner) autoHideパートナーを削除します。
31	void removePopupListener(PopupListener listener) 廃止予定です。 HandlerRegistrationを使用します。 addCloseHandler（com.google.gwt.event。によって返されたオブジェクトのremoveHandler（）メソッド。代わりにlogical.shared.CloseHandler）
32	void setAnimationEnabled(boolean enable) アニメーションを有効または無効にします。
33	void setAutoHideEnabled(boolean autoHide) autoHide機能を有効または無効にします。
34	void setAutoHideOnHistoryEventsEnabled( boolean enabled) 履歴変更イベントのautoHideを有効または無効にします。
35	void setGlassEnabled(boolean enabled) 有効にすると、次に表示されるときに背景が半透明のペインでブロックされます。
36	void setGlassStyleName(java.lang.String glassStyleName) ガラス要素で使用されるスタイル名を設定します。
37	void setHeight(java.lang.String height) パネルの子ウィジェットの高さを設定します。
38	void setModal(boolean modal) ポップアップがモーダルの場合、PopupPanelまたはその子を対象としないキーボードまたはマウスイベントは無視されます。
39	void setPopupPosition(int left, int top) ブラウザのクライアント領域に対するポップアップの位置を設定します。
40	void setPopupPositionAndShow(PopupPanel. PositionCallback callback) PopupPanel.PositionCallbackを使用してポップアップの位置を設定し、ポップアップを表示します。
41	void setPreviewingAllNativeEvents(boolean previewAllNativeEvents) 有効にすると、ポップアップは、このイベントの後に別のポップアップが開かれた場合でも、すべてのネイティブイベントをプレビューします。
42	void setTitle(java.lang.String title) このオブジェクトに関連付けられたタイトルを設定します。
43	void setVisible(boolean visible) このオブジェクトが表示されるかどうかを設定します。
44	void setWidget(Widget w) このパネルのウィジェットを設定します。
45	void setWidth(java.lang.String width) パネルの子ウィジェットの幅を設定します。
46	void show() ポップアップを表示し、ページに添付します。
47	void showRelativeTo(UIObject target) 通常、ポップアップは相対ターゲットのすぐ下に配置され、その左端はターゲットの左端に揃えられます。

継承されるメソッド

このクラスは、次のクラスからメソッドを継承します-

com.google.gwt.user.client.ui.UIObject
com.google.gwt.user.client.ui.Widget
com.google.gwt.user.client.ui.Panel
com.google.gwt.user.client.ui.SimplePanel
java.lang.Object

PopupPanelウィジェットの例

この例では、GWTでPopupPanelウィジェットの使用方法を示す簡単な手順を紹介します。次の手順に従って、_GWTで作成したGWTアプリケーションを更新します-アプリケーションの作成_の章-

Step	Description
1	Create a project with a name HelloWorld under a package com.finddevguides as explained in the GWT - Create Application chapter.
2	Modify HelloWorld.gwt.xml, HelloWorld.css, HelloWorldl and HelloWorld.java as explained below. Keep rest of the files unchanged.
3	Compile and run the application to verify the result of the implemented logic.

以下は、変更されたモジュール記述子 src/com.finddevguides/HelloWorld.gwt.xml の内容です。

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <!-- Inherit the core Web Toolkit stuff.                        -->
   <inherits name = 'com.google.gwt.user.User'/>

   <!-- Inherit the default GWT style sheet.                       -->
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>

   <!-- Specify the app entry point class.                         -->
   <entry-point class = 'com.finddevguides.client.HelloWorld'/>

   <!-- Specify the paths for translatable code                    -->
   <source path = 'client'/>
   <source path = 'shared'/>

</module>

以下は、変更されたスタイルシートファイル war/HelloWorld.css の内容です。

body {
   text-align: center;
   font-family: verdana, sans-serif;
}

h1 {
   font-size: 2em;
   font-weight: bold;
   color: #777777;
   margin: 40px 0px 70px;
   text-align: center;
}

.gwt-PopupPanel {
   border: 3px solid #000000;
   padding: 3px;
   background: white;
}

.gwt-PopupPanelGlass {
   background-color: #000;
   opacity: 0.3;
   filter: alpha(opacity=30);
}

.gwt-PopupPanel .popupContent {
   border: none;
   padding: 3px;
   background: gray;
}

以下は、変更されたHTMLホストファイル war/HelloWorldl の内容です。

<html>
   <head>
      <title>Hello World</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
      </script>
   </head>

   <body>
      <h1>PopupPanel Widget Demonstration</h1>
      <div id = "gwtContainer"></div>
   </body>
</html>

PopupPanelウィジェットの使用法を示すJavaファイル src/com.finddevguides/HelloWorld.java の内容を見てみましょう。

package com.finddevguides.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.DecoratorPanel;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.PopupPanel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.VerticalPanel;

public class HelloWorld implements EntryPoint {

   private static class MyPopup extends PopupPanel {

      public MyPopup() {
        //PopupPanel's constructor takes 'auto-hide' as its boolean
        //parameter. If this is set, the panel closes itself
        //automatically when the user clicks outside of it.
         super(true);

        //PopupPanel is a SimplePanel, so you have to set it's widget
        //property to whatever you want its contents to be.
         setWidget(new Label("Click outside of this popup to close it"));
      }
   }

   public void onModuleLoad() {
      Button b1 = new Button("Click me to show popup");
      b1.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {
           //Instantiate the popup and show it.
             new MyPopup().show();
         }
      });

      Button b2 = new Button("Click me to show popup partway"
         +" across the screen");
      b2.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {

           //Create the new popup.
            final MyPopup popup = new MyPopup();

           //Position the popup 1/3rd of the way down and across
           //the screen, and show the popup. Since the position
           //calculation is based on the offsetWidth and offsetHeight
           //of the popup, you have to use the
           //setPopupPositionAndShow(callback)  method. The alternative
           //would be to call show(), calculate  the left and
           //top positions, and call setPopupPosition(left, top).
           //This would have the ugly side effect of the popup jumping

           //from its original position to its new position.
            popup.setPopupPositionAndShow(new PopupPanel.PositionCallback(){
               public void setPosition(int offsetWidth, int offsetHeight) {
                  int left = (Window.getClientWidth() - offsetWidth)/3;
                  int top = (Window.getClientHeight() - offsetHeight)/3;
                  popup.setPopupPosition(left, top);
               }
            });
         }
      });
      VerticalPanel panel = new VerticalPanel();
      panel.setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER);
      panel.setSpacing(10);
      panel.add(b1);
      panel.add(b2);

      DecoratorPanel decoratorPanel = new DecoratorPanel();
      decoratorPanel.add(panel);

     //Add the widgets to the root panel.
      RootPanel.get().add(decoratorPanel);
   }
}

すべての変更が完了したら、link：/gwt/gwt_create_application [GWT-アプリケーションの作成]の章で行ったように、アプリケーションをコンパイルして開発モードで実行します。すべてがあなたのアプリケーションでうまくいけば、これは次の結果を生成します-

GWT PopupPanelウィジェット

Gwt-popuppanel-widget

目次