3.5.2.1.33. PopupView

PopupView is a component that allows you to open a popup with a container. The popup can be opened by clicking on minimized value or programmatically. It can be closed by mouse out or by clicking on outside area.

A typical PopupView with hidden and visible popup is shown below:

Popup hidden
Figure 13. Popup hidden
Popup visible
Figure 14. Popup visible

An example of a PopupView with minimized value retrieved from a localized message pack:

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

The inner content of the PopupView should be a container, for example BoxLayout.

PopupView methods:

  • setPopupVisible() allows you to open popup window programmatically.

    @Inject
    private PopupView popupView;
    
    @Subscribe
    protected void onInit(InitEvent event) {
        popupView.setMinimizedValue("Hello world!");
    }
  • setMinimizedValue() allows you to set a minimized value programmatically.

    @Inject
    private PopupView popupView;
    
    @Override
    public void init(Map<String, Object> params) {
        popupView.setMinimizedValue("Hello world!");
    }
  • addPopupVisibilityListener(PopupVisibilityListener listener) allows you to listen to the popup window visibility changes.

    @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()
        );
    }
  • The PopupView component has methods for setting the popup position. The top and left values determine the position of the top-left corner of the popup. You can use standard values or set custom values of the position. The standard values are:

    • TOP_RIGHT

    • TOP_LEFT

    • TOP_CENTER

    • MIDDLE_RIGHT

    • MIDDLE_LEFT

    • MIDDLE_CENTER

    • BOTTOM_RIGHT

    • BOTTOM_LEFT

    • BOTTOM_CENTER

      The DEFAULT value sets the popup in the middle of the minimized value.

      These are the methods for setting the popup position:

    • void setPopupPosition(int top, int left) - sets the top and left popup position.

    • void setPopupPositionTop(int top) - sets the top popup position.

    • void setPopupPositionLeft(int left) - sets the left popup position.

    • void setPopupPosition(PopupPosition position) - sets the popup position using standard values.

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

      If the popup position is set using standard values, the left and top values will be reset and vice versa.

  • The popup set with one of the standard values will be displayed with a slight indentation. You can disable this indent by overriding $popup-horizontal-margin and $popup-vertical-margin variables in styles.

  • To get the popup position use the following methods:

    • int getPopupPositionTop() - returns the top popup position.

    • int getPopupPositionLeft() - returns the left popup position.

    • PopupPosition getPopupPosition() - returns null in case the popup position is set without using standard values.

PopupView attributes:

  • minimizedValue attribute defines the text of popup button. This text may contain HTML tags.

  • If the hideOnMouseOut attribute is set to false, popup container will close after click on outside area.