How to add on_press handler to Box?

[vzool]

I made this modification to the Box widget, in the hope of replacing Table with a bunch of clickable boxes stacked vertically or whatever the best elegant design leads us.
Because Table does not exist on iOS, Web and even pagination, search are not supported out of the box.
I feel stacked boxes are simpler and faster than tables, it will get us fine grain control and many great designs can be done with boxes on all platforms.
The code looks acceptable but it is not working.
What is missing here or elsewhere?

from __future__ import annotations

from collections.abc import Iterable

from typing import Protocol
from toga.handlers import wrapped_handler

from .base import StyleT, Widget


class OnPressHandler(Protocol):
    def __call__(self, widget: Box, /, **kwargs: Any) -> object:
        """A handler that will be invoked when a box is pressed.

        :param widget: The box that was pressed.
        :param kwargs: Ensures compatibility with arguments added in future versions.
        """

class Box(Widget):
    _MIN_WIDTH = 0
    _MIN_HEIGHT = 0

    def __init__(
        self,
        id: str | None = None,
        style: StyleT | None = None,
        children: Iterable[Widget] | None = None,
        on_press: toga.widgets.box.OnPressHandler | None = None,
    ):
        """Create a new Box container widget.

        :param id: The ID for the widget.
        :param style: A style object. If no style is provided, a default style
            will be applied to the widget.
        :param children: An optional list of children for to add to the Box.
        :param on_press: An optional handler that will be invoked when the Box is pressed.
        """
        super().__init__(id=id, style=style)

        # Create a platform specific implementation of a Box
        self._impl = self.factory.Box(interface=self)
        self.on_press = on_press

        # Children need to be added *after* the impl has been created.
        self._children: list[Widget] = []
        if children is not None:
            self.add(*children)

    @property
    def enabled(self) -> bool:
        """Is the widget currently enabled? i.e., can the user interact with the widget?

        Box widgets cannot be disabled; this property will always return True; any
        attempt to modify it will be ignored.
        """
        return True

    @enabled.setter
    def enabled(self, value: bool) -> None:
        pass

    def focus(self) -> None:
        """No-op; Box cannot accept input focus."""
        pass

    @property
    def on_press(self) -> OnPressHandler:
        """The handler to invoke when the button is pressed."""
        return self._on_press

    @on_press.setter
    def on_press(self, handler: toga.widgets.box.OnPressHandler) -> None:
        self._on_press = wrapped_handler(self, handler)

[freakboy3742]

There's two parts to this question:

Firstly: Why isn't this code working?

Well... because you haven't done anything to make it work. You've definitely subclassed toga.Box, and you've set up the Toga-side handling of an on_press handler... but that handler isn't being connected to anything. There's no "native" component that is catching the click/press event and passing that back to Toga.

The second part is the implied "bigger picture" question - could/should this be added to Toga?

IMHO, No. if iOS/Web doesn't support the Table widget, then the fix is to implement the Table widget, not to implement a hacky workaround.

Your assertion that this sort of box-based workaround is "better" than a native table widget is fundamentally incorrect. If you want proof of this, load 10k rows into your table. GTK, macOS and Windows will handle this without any significant difficulty. I'll almost guarantee that this implementation will crash - and if it doesn't crash, the performance will be so bad as to make you wish it had crashed.

On top of that, a desktop-style Table rendition isn't the best way to present a table on a mobile platform. Mobile devices have limited screen real-estate, and are generally more constrained horizontally than vertically. Trying to display a classical "table" on a mobile device leads to a generally bad UX, because the content is difficult to view.

The reason I can say this with confidence is that the Android implementation of table is, at present, based on a collection of clickable boxes. The performance is awful, to the extent that Toga's Table example project must be explicitly modified to run at all; and the UX is just as bad. It is for this reason that the Android implementation of Table is currently marked as "beta" - it badly needs to be replaced (see #1392).

Yes - a table widget is needed on iOS and Web. A better implementation is needed on Android. This is something we want to address, but there's been a few pieces of groundwork that we needed to land first - most notably, the #2244 rework of apps. The connection between this refactor and the Table widget may not be obvious, but it exists: in order to build a high-performance and UX-compliant Table widget on iOS and Android, we need to modify the implementation to use native widgets that involve navigation - something we couldn't easily do until the core app had a better internal structure that could accomodate navigation widgets.

[vzool]

There's two parts to this question:

Firstly: Why isn't this code working?

Well... because you haven't done anything to make it work. You've definitely subclassed toga.Box, and you've set up the Toga-side handling of an on_press handler... but that handler isn't being connected to anything. There's no "native" component that is catching the click/press event and passing that back to Toga.

Indeed, but I feel Table implementation is complex for me, and simple Box which can do on_press handler is good enough for the project, simple and light for most cross platforms.

I'm still playing...

if toga.platform.current_platform.lower() == 'macos':
    from .fork.toga_cocoa.box import Box
else:
    from .fork.toga.box import Box

Finally, I got the error.

TypeError: Widget.__init__() got an unexpected keyword argument 'on_press'

When got the error, you hit something. ^_^

REF
https://github.com/vzool/zakat-tracker/blob/clickable-box/src/zakat_tracker/app.py#L22

[freakboy3742]

I'm not sure what answer you're looking for here. The error is telling you exactly what is going wrong - the constructor you're calling doesn't accept the argument you're passing.

That's because... it doesn't. You can verify this yourself by looking at the code. You're trying to treat the widgets at the core layer and the widgets in the Cocoa backend as interchangeable - and they're not. The core widget calls the backend. That's part of the architecture of Toga.

Even if you did construct a Box widget correctly... you're going to discover that the cocoa Box widget doesn't implement on_press. In order to have a on_press handler, you're going to need to write some Cocoa code. This isn't a case where' we've just forgotten to pass in an argument. There's an entire macOS (and GTK, and Windows, and ...) implementation required. Capabilities that don't already exist aren't going to fall out of the code like magic.

I suspect you need to take a little bit more of a look at how Toga is constructed, how toga-core interacts with toga-cocoa, and how native macOS capabilities are being implemented and surfaced. I'm happy to answer specific questions when the architecture or implementation isn't clear, but I'm afraid I don't have the resources to provide detailed implementation instructions for a feature, that, as I've indicated, isn't likely to find its way into Toga's codebase.