3.5.2.1.33. 弹窗查看控件
在线示例
API 文档

PopupView 是一个允许用容器打开弹出窗口的控件。可以通过单击简要值链接或以编程方式打开弹窗。可以通过鼠标移出或点击外部区域来关闭弹窗。

典型的 PopupView 如下所示：

Popup hidden
Figure 13. 弹窗隐藏状态
Popup visible
Figure 14. 弹窗打开状态

从本地化消息包中获取简要值的 PopupView 的示例：

<popupView id="popupView"
           minimizedValue="msg://minimizedValue"
           caption="PopupView caption">
    <vbox width="60px" height="40px">
        <label value="Content" align="MIDDLE_CENTER"/>
    </vbox>
</popupView>

PopupView 的内部内容应该是一个容器，例如 BoxLayout。

PopupView 方法:

  • setPopupVisible() 允许以编程方式打开弹窗。

    @Inject
private PopupView popupView;

@Subscribe
protected void onInit(InitEvent event) {
    popupView.setMinimizedValue("Hello world!");
}

  • setMinimizedValue() 允许以编程方式设置简要值。

    @Inject
private PopupView popupView;

@Override
public void init(Map<String, Object> params) {
    popupView.setMinimizedValue("Hello world!");
}

  • addPopupVisibilityListener(PopupVisibilityListener listener) 方法可用来添加一个跟踪弹窗可见性变化的监听器。

    @Inject
private PopupView popupView;
@Inject
private Notifications notifications;

@Subscribe
protected void onInit(InitEvent event) {
    popupView.addPopupVisibilityListener(popupVisibilityEvent ->
            notifications.create()
                    .withCaption(popupVisibilityEvent.isPopupVisible() ? "The popup is visible" : "The popup is hidden")
                    .withType(Notifications.NotificationType.HUMANIZED)
                    .show()
    );
}

  • PopupView 组件提供设置弹出框位置的方法。由 top 和 left 值决定弹出框左上角的位置。可以使用标准值或者自定义值设置这两个属性，标准值是：

    • TOP_RIGHT

    • TOP_LEFT

    • TOP_CENTER

    • MIDDLE_RIGHT

    • MIDDLE_LEFT

    • MIDDLE_CENTER

    • BOTTOM_RIGHT

    • BOTTOM_LEFT

    • BOTTOM_CENTER

      DEFAULT 值设置弹窗位置为简要值链接的中间。

      设置弹窗位置的 Java 方法：

    • void setPopupPosition(int top, int left) - 设置 top 和 left 弹窗位置。

    • void setPopupPositionTop(int top) - 设置 top 弹窗位置。

    • void setPopupPositionLeft(int left) - 设置 left 弹窗位置。

    • void setPopupPosition(PopupPosition position) - 使用标准值设置弹窗位置。

      @Inject
private PopupView popupView;

@Subscribe
public void onInit(InitEvent event) {
        popupView.setPopupPosition(PopupView.PopupPosition.BOTTOM_CENTER);
}

      如果使用标准值设置弹窗位置，则会重置 left 和 top 的值，反之亦然。

  • 使用标准值显示的弹窗会有一点点的缩进。可以通过在样式中重写 $popup-horizontal-margin 和 $popup-vertical-margin 的值去掉缩进。

  • 使用下面的 Java 方法获取弹窗位置：

    • int getPopupPositionTop() - 返回 top 弹窗位置。

    • int getPopupPositionLeft() - 返回 left 弹窗位置。

    • PopupPosition getPopupPosition() - 如果不是用标准值设置的位置，返回 null。

PopupView 的属性:

  • minimizedValue 属性定义弹窗按钮的简要值文本。此文本可包含 HTML 标记。

  • 如果 hideOnMouseOut 属性设置为 false，在弹窗外部单击时会关闭弹窗。

popupView 的属性

caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - box.expandRatio - height - hideOnMouseOut - htmlSanitizerEnabled - icon - id - minimizedValue - stylename - visible - width

API

addPopupVisibilityListener