custom dialogs

[areslagae]

Hi all,

I wanted to share a pattern / base class for creating custom dialogs in Toga that behave like the built-in dialogs (e.g., InfoDialog). By subclassing toga.Window and implementing the internal _show protocol, we can use the await app/window.dialog(...) syntax for any custom widget.

The dialogs do not behave modal, but when building a real application a non-modal dialog is still beter than no dialog. It made my code more consistent and it will probably be easier to upgrade when/if Toga supports custom dialogs.

Thoughts and improvements are definitely welcome!

import asyncio
import toga

# --------------------------------------------------------------------------------

class CustomDialog(toga.Window):

    """
    A class to support custom dialogs.

    The CustomDialog can be launced by the user with the standard
    App.dialog() and Window.dialog() methods.
    The content Widget should call CustomDialog.on_result() to
    communicate the result back to he user. 
    """    

    def __init__(self, content: toga.Widget, **kwargs):

        kwargs.setdefault('resizable', False)
        kwargs.setdefault('closable', False)
        kwargs.setdefault('minimizable', False)

        kwargs.update({
            'content': content,
        })

        super().__init__(**kwargs)

    def on_result(self, result):
        """Pass the result back and close the dialog."""        
        if hasattr(self, '_future') and not self._future.done():
            self._future.set_result(result)
        self.close()

    def _show(self, window: toga.Window | None):
        """Internal protocol to support await app/window.dialog(CustomDialog)"""        
        self._future = asyncio.get_event_loop().create_future()
        self.show()
        return self._future

    def close(self):
        if hasattr(self, '_future') and not self._future.done():
            self._future.set_result(None)
        super().close()

# --------------------------------------------------------------------------------

# EXAMPLE: A NAME DIALOG

class NameDialogContent(toga.Box):

    """
    Example: A name dialog, more specifically the content class.

    This is a regular composite widget that calls on_result when
    pressing the Cancel or OK button to communicate the result
    back to the user.    
    """

    def __init__(self, on_result):

        super().__init__()

        self._on_result = on_result

        self._label = toga.Label('Name:')
        self._text_input = toga.TextInput(style=toga.style.Pack(flex=1), placeholder='name', on_change=self._text_input_on_change)

        self._cancel_button = toga.Button(text='Cancel', on_press=self._cancel_button_on_press)
        self._ok_button = toga.Button(text='OK', on_press=self._ok_button_on_press)

        self._ok_button.enabled = bool(self._text_input.value)

        self.add(
            toga.Column(style=toga.style.Pack(flex=1), children=[
                toga.Row(style=toga.style.Pack(margin=16, gap=16), children=[
                    self._label,
                    self._text_input,
                ]),
                toga.Divider(),
                toga.Row(style=toga.style.Pack(margin=16, gap=16), children=[
                    toga.Row(style=toga.style.Pack(flex=1)),
                    self._cancel_button,
                    self._ok_button,
                    toga.Row(style=toga.style.Pack(flex=1)),
                ]),
            ])
        )

    def _text_input_on_change(self, text_input: toga.TextInput):
        self._ok_button.enabled = bool(self._text_input.value)

    def _cancel_button_on_press(self, button: toga.Button):
        self._on_result(None)  

    def _ok_button_on_press(self, button: toga.Button):
        self._on_result(self._text_input.value)           

class NameDialog(CustomDialog):

    """
    Example: A name dialog, more specifically the dialog class.
    """
    
    def __init__(self):
        super().__init__(
            title='Enter your name',
            size=(256,128),
            content=NameDialogContent(on_result=self.on_result),
        )

# --------------------------------------------------------------------------------

class App(toga.App):

    def __init__(self):
        super().__init__(formal_name='formal_name', app_id='app_id')

    def startup(self):
        main_window = toga.MainWindow()
        main_window.content = toga.Box(children=[
            toga.Button('Launch dialog', on_press=self._button_on_press)
        ])
        main_window.show()
        self.main_window = main_window

    async def _button_on_press(self, button: toga.Button):
        result = await self.current_window.dialog(NameDialog())
        print(f'{result=}')

app = App()
app.main_loop()

[freakboy3742]

Thanks for sharing that. Agreed that a non-modal something is preferable to nothing.

It might be worth writing this up as a HOWTO guide. What you've described here is a relatively common use case; even if it's not being used for dialogs, it might not be obvious that you can write a Window subclass.