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) - 设置弹窗的 topleft 位置。

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

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

事件和处理器

如需使用 Jmix Studio 生成处理器的桩代码,需要在界面 XML 描述或者 Component Hierarchy 面板选中该组件,然后用 Component Inspector 面板的 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

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

XML 属性

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