# Popup View Example

This is an example of a fully dynamic PopupView widget.

The PopupView is useful for displaying transient configuration dialogs and notification windows. The widget supports a transparent background.

Tip

To see this example in action, download it from `popup_view` and run:

    $ enaml-run popup_view.enaml

## Screenshot

## Example Enaml Code

    #------------------------------------------------------------------------------
    # Copyright (c) 2013-2025, Nucleic Development Team.
    #
    # Distributed under the terms of the Modified BSD License.
    #
    # The full license is in the file LICENSE, distributed with this software.
    #------------------------------------------------------------------------------
    """ This is an example of a fully dynamic PopupView widget.

    The PopupView is useful for displaying transient configuration dialogs
    and notification windows. The widget supports a transparent background.

    << autodoc-me >>
    """
    from enaml.core.api import Include
    from enaml.widgets.api import (
        Window, Container, PopupView, Form, Label, PushButton, ComboBox, Slider,
        Field, SpinBox
    )

    POSITIONS = {
        'Top Left': (0.0, 0.0),
        'Top Center': (0.5, 0.0),
        'Top Right': (1.0, 0.0),
        'Left': (0.0, 0.5),
        'Center': (0.5, 0.5),
        'Right': (1.0, 0.5),
        'Bottom Left': (0.0, 1.0),
        'Bottom Center': (0.5, 1.0),
        'Bottom Right': (1.0, 1.0),
    }

    enamldef ConfigPopup(PopupView): popup:
        foreground = 'white'
        background = 'rgba(30, 30, 30, 0.85)'
        parent_anchor << POSITIONS[parent_box.selected_item]
        anchor << POSITIONS[view_box.selected_item]
        arrow_size << sizer.value
        arrow_edge << edge.selected_item
        offset << (offset_x.value, offset_y.value)
        Form:
            padding = 20
            Label:
                foreground = 'white'
                text = 'Arrow Size'
            Slider: sizer:
                minimum = 5
                maximum = 30
                value = 20
            Label:
                foreground = 'white'
                text = 'Arrow Edge'
            ComboBox: edge:
                items = ['top', 'bottom', 'left', 'right']
                index = 0
            Label:
                foreground = 'white'
                text = 'Parent Anchor'
            ComboBox: parent_box:
                items = sorted(POSITIONS.keys())
                index = items.index('Center')
            Label:
                foreground = 'white'
                text = 'View Anchor'
            ComboBox: view_box:
                items = sorted(POSITIONS.keys())
                index = items.index('Top Center')
            Label:
                foreground = 'white'
                text = 'Offset X'
            SpinBox: offset_x:
                minimum = -30
                maximum = 30
            Label:
                foreground = 'white'
                text = 'Offset Y'
            SpinBox: offset_y:
                minimum = -30
                maximum = 30
            Include: inc:
                pass
            PushButton:
                text = 'Add Row'
                clicked ::
                    items = [Label(text='Label', foreground='white'), Field()]
                    inc.objects.extend(items)
            PushButton:
                text = 'Close'
                clicked :: popup.close()

    enamldef NotificationPopup(PopupView):
        foreground = 'white'
        background = 'rgba(30, 30, 30, 0.85)'
        window_type = 'tool_tip'
        parent_anchor = (1.0, 1.0)
        anchor = (1.0, 1.0)
        offset = (-10, -10)
        timeout = 5
        fade_in_duration = 500
        fade_out_duration = 500
        Container:
            Label:
                foreground = 'white'
                text = 'Hello Enaml Notifications'
                align = 'center'

    enamldef Main(Window): win:
        initial_size = (400, 400)
        Container:
            PushButton:
                text = 'Show Config Popup'
                clicked :: ConfigPopup(self).show()
            PushButton:
                text = 'Show Window Notification'
                clicked :: NotificationPopup(win, window_type='window').show()
            PushButton:
                text = 'Show Desktop Notification'
                clicked :: NotificationPopup().show()
            PushButton:
                text = 'Show Mouse Notification'
                clicked ::
                    popup = NotificationPopup()
                    popup.anchor_mode = 'cursor'
                    popup.anchor = (0.0, 0.0)
                    popup.offset = (0, 0)
                    popup.timeout = 1
                    popup.show()