GWT - PopupPanel 小部件

简介

PopupPanel 小部件表示可以弹出到其他小部件的面板。它覆盖浏览器的客户区(以及任何先前创建的弹出窗口)。

类声明

以下是 com.google.gwt.user.client.ui.PopupPanel 类的声明 −

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

类构造函数

类方法

继承的方法

该类继承了以下类的方法 −

• 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 应用程序 −

以下是修改后的模块描述符src/com.tutorialspoint/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.tutorialspoint.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/HelloWorld.html 的内容。

<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>

让我们来看看 Java 文件 src/com.tutorialspoint/HelloWorld.java 的以下内容，它将演示如何使用 PopupPanel 小部件。

package com.tutorialspoint.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 的构造函数将"自动隐藏"作为其布尔值
        // 参数。如果设置了该参数，则当用户单击面板外部时，面板会自动关闭。
        super(true);
        
        // PopupPanel 是一个 SimplePanel，因此您必须将其小部件
        // 属性设置为您希望其内容的任何内容。
        setWidget(new Label("单击此弹出窗口外部以将其关闭"));
      }
   }

   public void onModuleLoad() {
      Button b1 = new Button("Click me to show popup");
      b1.addClickHandler(new ClickHandler() {
         public void onClick(ClickEvent event) {
            // 实例化弹出窗口并显示它。
             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) {
            
                // 创建新的弹出窗口。
                final MyPopup popup = new MyPopup();
                
                // 将弹出窗口定位在屏幕下方和屏幕横跨的 1/3 处，并显示弹出窗口。由于位置
                // 计算基于弹出窗口的 offsetWidth 和 offsetHeight
                //，因此您必须使用
                // setPopupPositionAndShow(callback) 方法。另一种方法是
                // 调用 show()，计算左侧和
                // 顶部位置，然后调用 setPopupPosition(left, top)。
                // 这会产生不好的副作用，即弹出窗口会从其原始位置跳转到其新位置。
                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);
      
      // 将小部件添加到根面板。
      RootPanel.get().add(decoratorPanel);
   }
}

完成所有更改后，让我们像在 GWT - 创建应用程序 一章中一样，在开发模式下编译并运行应用程序。如果您的应用程序一切正常，这将产生以下结果 −

gwt_layout_panels.html