PopupView

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 handler method stubs in Jmix Studio, use the Generate Handler button in the top panel of the screen controller code. Or you can select the component in the screen descriptor layout and use the Handlers tab of the Component Inspector panel.

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

Programmatic usage: call the setContextHelpIconClickHandler() component method.

All XML Attributes

You can view and edit attributes applicable to the component using the Component Inspector panel of the Studio’s Screen Designer.