PopupView

The PopupView component allows the user to open a pop-up view by clicking on a link. The view can contain any components or containers. 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

The main attribute of this component is minimizedValue. The value of this 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 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

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

ContextHelpIconClickEvent

Programmatic usage: call the setContextHelpIconClickHandler() component method.

To generate handler method stubs in the 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.

All XML Attributes

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