PopupView 弹窗视图

在线示例

PopupView - 弹窗视图 是一个允许用户点击链接打开弹窗视图的组件。弹窗视图可以包含任何 组件，但只能有一个 布局容器。可以配置鼠标移出时或点击外部区域来关闭弹窗。

popup view

组件的 XML 名称：popupView。

基本用法

在最小化状态，组件 minimizedValue 属性的值会作为一个可点击的链接显示在界面，点击之后打开弹窗。

示例：

<popupView caption="PopupView example, just "
           minimizedValue="click me!">
    <vbox width="100px" height="50px" >
        <label value="Thank you!" align="MIDDLE_CENTER"/>
    </vbox>
</popupView>

默认情况下，hideOnMouseOut="true"，鼠标移出弹窗时会自动关闭弹窗视图。如需通过点击外部区域关闭弹窗，设置该属性为 false。

<popupView minimizedValue="click me!"
           hideOnMouseOut="false">
    <vbox width="100px" height="50px" >
        <textField caption="Text Field"/>
        <button caption="Button"/>
    </vbox>
</popupView>

下列方法可以设置弹窗位置：

  1. setPopupPosition(PopupPosition position) - 用下列值设置弹窗位置：

    • DEFAULT - 弹窗位于最小化值链接的中间。

    • TOP_LEFT

    • TOP_CENTER

    • TOP_RIGHT

    • MIDDLE_LEFT

    • MIDDLE_CENTER

    • MIDDLE_RIGHT

    • BOTTOM_LEFT

    • BOTTOM_CENTER

    • BOTTOM_RIGHT

    @Autowired
private PopupView popupView;

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

  2. setPopupPosition(int top, int left) - 设置弹窗的 top 和 left 位置。

  3. setPopupPositionTop(int top) - 设置弹窗的 top 位置。

  4. setPopupPositionLeft(int left) - 设置弹窗的 left 位置。

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码，需要在界面 XML 描述或者 Jmix UI 层级结构面板选中该组件，然后用 Jmix UI 组件面板的 Handlers 标签页生成。

或者可以使用界面控制器顶部面板的 Generate Handler 按钮。

PopupVisibilityEvent 事件会在用户打开或关闭弹窗时发送。

@Autowired
private Notifications notifications;

@Subscribe("popupView")
public void onPopupViewPopupVisibility(PopupView.PopupVisibilityEvent event) {
    notifications.create()
            .withCaption(event.isPopupVisible() ?
                    "The popup is visible" : "The popup is hidden")
            .withType(Notifications.NotificationType.HUMANIZED)
            .show();
}

如需以编程的方式注册事件处理器，使用组件的 addPopupVisibilityListener() 方法。

ContextHelpIconClickEvent

参阅 ContextHelpIconClickEvent。

编程式用法，调用组件的 setContextHelpIconClickHandler() 方法。

XML 属性

可以使用 Studio 界面设计器的 Jmix UI 组件面板查看和编辑组件的属性。

align - box.expandRatio - caption - captionAsHtml - colspan - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - height - hideOnMouseOut - htmlSanitizerEnabled - icon - id - minimizedValue - responsive - rowspan - stylename - tabIndex - visible - width