workarounds for combobox, context menu, frames

[areslagae]

I am building a cross-platform desktop application with Toga. So far I really like it. I am planning to also use Briefcase later. If all of this work roughly as expected, these libraries have huge potential. Thank you and I hope you keep up the work.

I really miss comboboxes, context menus and frames however. I understand that Toga is still in development, and I assume these are planned, so I wonder: What are the best workarounds mean-while?

• frames: A label and lines? I had expected border functionality in the styling engine but it was not there. (Another application for a border I had was validation of text fields.)
• context menus: A new window?
• comboboxes: ? A selection and a text edit will together confuse the user. Adding buttons for fixed options works but does not scale. A text edit and a context menu would also work.

Any suggestions are definitely welcome. If anyone has info on an ETA for these widgets that would also be great.

Many thanks in advance,

[freakboy3742]

In all three cases, I'm not sure I have a good workaround - they're all new widgets. Frames have been discussed in the past. Combobox is mentioned on our roadmap. We already have menu handling, and it's not a wild stretch to see how context menus could fit into the existing structure - but there's obviously work that needs to be done.

As for an ETA: Every quarter, we publish our roadmap of features that we're explicitly looking at - see this blog post for our most recent roadmap. Beyond that - this is an open source project. The ETA is "just after someone submits the pull request". If you have a feature that you want, the best way to make it happen is to implement it yourself (or pay someone else to develop it for you).

If you want to take a swing at implementing these - Frame in particular should be relatively straightforward, as there's no "interactive" element that needs to be implemented - we're happy to help get you started as a contributor.

[areslagae]

Hi freakboy3742,

Many thanks for your quick replies.

I would be happy to consider implementing features at some point when I can free up sufficient time. For the near future my contribution would unfortunately be limited to testing Toga by attempting to build an actual application, identifying what I believe is missing from that point, and submitting bug reports along the way. I hope this will also help advance the Toga project. I have fallbacks for Toga (tkinter) and Briefcase (pyinstaller) but I actually like Beeware very much.

• Edit: see below for my best context menu workaround so far. Example below is quite effective given the number of lines if the small button is not an issue.

• Another aspect that would be very helpful is very basic clipboard functionality (reading and writing text).

Thanks,

[areslagae]

In the end I found a good (for my purpose) workaround for a context menu using a selection with commands. See below for example code and screenshot. Nice thing is that macOS renders a narrow selection simply as a small button with a chevron. Not sure how it wil look on other platforms, but this can definitely be a workaround for context menus if you have some room in the UI to anchor the "menus" with such a button.

Edit: And you could imitate a combobox with this by adding a narrow CommandSelection against a TextEdit. Again not tested if it would look acceptable on there platforms than macos.

import toga
from toga.style.pack import Pack

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

class CommandSelection(toga.Selection):

    """
    A custom Toga widget that extends toga.Selection (dropdown) to function
    as an executable action menu, somewhat similar to a context menu.

    The widget maps a list of toga.Command objects to the dropdown items.
    Selecting an item executes the corresponding command's action, and the 
    widget immediately resets to its placeholder text ('text' parameter) 
    to be ready for the next action, simulating a context menu workflow.
    """

    def __init__(self, id=None, style=None, enabled=True, commands=None, text='select command ...', **kwargs):              
        super().__init__(
            id=id,
            style=style,
            items=[{'text': text, 'command': None}] + [{'text': command.text, 'command': command} for command in commands],
            accessor='text',
            on_change=self._on_change,
            enabled=enabled
        )
        self._ignore_on_change = False

    def _on_change(self, widget):
        if self._ignore_on_change: # assignment to self.value below triggers on_change
            return
        command = self.value.command
        self._ignore_on_change = True      
        self.value = self.items[0]
        self._ignore_on_change = False
        if command and command.action:
            command.action(self)

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

class CommandSelectionDemo(toga.App):

    def startup(self):
        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = toga.Box(
            style=Pack(direction='column', margin=10, gap=10, align_items='center', justify_content='center'),
            children=[   
                # normal sized CommandSelection, looks like traditional selection, text conveys purpose     
                CommandSelection(
                    style=Pack(margin=4, width=150),
                    commands=[
                        toga.Command(action=self._action, text="Action 1"),
                        toga.Command(action=self._action, text="Action 2"),
                        toga.Command(action=self._action, text="Action 3"),
                    ],
                ),
                # narrow CommandSelection, macos renders a selection of this width as a button with caret!
                CommandSelection(
                    style=Pack(margin=4, width=20),
                    commands=[
                        toga.Command(action=self._action, text="Action 4"),
                        toga.Command(action=self._action, text="Action 5"),
                        toga.Command(action=self._action, text="Action 6"),
                    ],
                ),
            ]
        )
        self.main_window.show()

    async def _action(self, command, widget, **kwargs):
        await self.main_window.dialog(toga.InfoDialog(title=command.text, message=command.text))

if __name__ == "__main__":
    app = CommandSelectionDemo("CommandSelectionDemo", "org.beeware")
    app.main_loop()

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