python ipyvuetify closing floating dialog (ipywidgets)

Question

I am using ipyvutify trying to code great GUIs. It looks fantastic but a bit hard for someone who had never did HTML & CSS.

The following is a complete code that generates a dialog floating when clicking "OPEN DIALOG" button.

I would like to unterstand the functioning of opening and closing floating dialogs using ipyvuetify and with the following code I can not figure it out even if the code works (deficiently).

The GOAL is to open a dialog with a button and having a CLOSE button inside the dialog as well (together with other buttons)

import ipyvuetify as v 
lorum_ipsum= 'loren loren'


#oepn dialog:
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1', children=['OTHER'])
def on_click_v_btn_OPEN (widget, event, data):
    exampledialog.value = True
    pass
v_btn_OPEN.on_event('click', on_click_v_btn_OPEN)

# CLOSE BUTTON INSIDE THE DIALOG
v_btn_CLOSE   = v.Btn(class_='mx-2 light-blue darken-1', children=['CLOSE'])
def on_click_v_btn_CLOSE (widget, event, data):
    exampledialog.value = False
v_btn_CLOSE.on_event('click', on_click_v_btn_CLOSE)

# ACTION BUTTON INSIDE THE DIALOG
v_btn_OTHER   = v.Btn(class_='mx-2 light-blue darken-1', children=['OTHER'])
def on_click_v_btn_OTHER (widget, event, data):
    # code to open facebook.com in a new tab
    pass
v_btn_OTHER.on_event('click', on_click_v_btn_OTHER)

# THE DIALOG
exampledialog = v.Dialog(width='500',
    v_slots=[{
        'name': 'activator',
        'variable': 'x',
        'children': v.Btn(v_on='x.on', color='success', dark=True, children=[
            'OTHER dialog'
        ]),
    }], 
    children=[
        v.Card(children=[
            v.CardTitle(class_='headline gray lighten-2', primary_title=True, children=[
                "Lorem ipsum"
            ]),
            v.CardText(children=[
                lorum_ipsum,
                v.TextField(label='Label', placeholder='Placeholder'),
                v_btn_CLOSE,
                v_btn_OTHER,
            ]),
    ])
])

# VISUALIZATION
display(v.Layout(children=[v_btn_OPEN,exampledialog]))

If you paste the above code in one of your cells you will realise the follwoing strange behavior that I would like to understand.

If you dont display exampledialog in the VISUALIZATION PART then the OTHER button would not work. ONLY if exampledialog is part of the children of Layout the button is working. Besides the button of the dialog itself disappears once is run the first time.

This is a really strange thing. Can someone give an explanation.

And the general question is how do you open and close a dialog from a button outside the dialog. dialog.value=True does not really seems to work

Answer 1

Besides a small typo in the variable name of the first button it looks all correct.

The first button should be 'v_btn_OPEN' instead of 'v_btn_OTHER' as you used the 'other' button as close button inside your dialog.

Now, to your questions:

Necessity to include exampledialog in the VISUALIZATION PART: exampledialog needs to added to the [DOM][1] otherwise for the client they are simply not present. Using ipyvuetify this is done by outputting your elements to the client. Just having them as python (server-side) objects is not enough.

[1]: https://www.w3.org/TR/WD-DOM/introduction.html#:~:text=The%20Document%20Object%20Model%20(DOM,document%20is%20accessed%20and%20manipulated.

button of the dialog itself disappears once is run the first time: this seems to be related to a current bug in ipyvuetify in the behaviour of slots as in your case. The workaround you used by butting the button outside the element ans linking them by the 'on_click_v_btn_OPEN'-function is currently the suggested solution until this bug is fixed.

Answer 2

I have found that depending on how the dialog is activated, you might need to first set the .value to False and then back to True in order to make sure the change is propagated and the dialogue closed properly:

def on_click_v_btn_CLOSE (widget, event, data):
    exampledialog.value = True
    exampledialog.value = False

This might look as if it does nothing, but remember that the value is observed...