PopupView

LIVE DEMO

The PopupView component allows the user to open a pop-up view by clicking on a link. The view can contain any but only one component or container. You can configure the view to close automatically when the mouse pointer moves outside the view or by clicking on the outside area.

popup view

Component’s XML-name: popupView

Basics

In the minimized state, the value of the minimizedValue attribute is displayed on the screen as a clickable link that opens the view.

For example:

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

By default, hideOnMouseOut="true", so the view closes once the mouse pointer moves outside the view. To close the view by clicking on the outside area, set the attribute value to false:

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

There are the following methods for setting the popup position:

  1. setPopupPosition(PopupPosition position) - sets the popup position using the following standard values:

    • DEFAULT - sets the popup in the middle of the minimized value.

    • 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) - sets the top and left popup position.

  3. setPopupPositionTop(int top) - sets the top popup position.

  4. setPopupPositionLeft(int left) - sets the left popup position.

Events and Handlers

To generate a handler stub in Jmix Studio, select the component in the screen descriptor XML or in the Jmix UI hierarchy panel and use the Handlers tab of the Jmix UI inspector panel.

Alternatively, you can use the Generate Handler button in the top panel of the screen controller.

The PopupVisibilityEvent is sent when the user opens or closes the popup window.

@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();
}

Programmatic registration of the event handler: use the addPopupVisibilityListener() component method.

ContextHelpIconClickEvent

See ContextHelpIconClickEvent.

Programmatic usage: call the setContextHelpIconClickHandler() component method.

All XML Attributes

You can view and edit attributes applicable to the component using the Jmix UI inspector panel of the Studio’s Screen Designer.

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