toga Merge demo and examples into a single app

We talked about this before, but I can't find any existing issues.

It would be useful to have a single app that lets you interactively use as many of Toga's features as possible. Not only would this be useful for our own internal testing, it would also be a good demonstration for programmers who are considering using us.

We could also release it on the App Store and Google Play Store, as Kivy has done, though their Android app hasn't been updated since 2016 and currently refuses to install on my newest phone.

Apr 16 '23 13:04 mhsmith

Some additional notes:

We have toga-demo, but it hasn't been updated for a long time, and it uses widgets that aren't currently available on iOS/Android. This should be the starting point
We also have examples/examples_overview; that's a 'meta-launcher' example - it might be worth preserving the ability to launch a single demo from the command line, rather than requiring a (e.g., toga-demo slider would show the slider as the top-level widget, rather than the full widget "menu");
We need to resolve the problem of "top level navigation". We've got enough widgets that we can't put them all on one page; we effectively need a landing page that gives the user a choice, which takes them to specific sub-pages that demonstrates features of individual widgets by rendering multiple versions of the sample widget. Each of the the existing example widgets would effectively be a page on this "top level" menu (although the examples themselves probably need to be cleaned up and simplified).
In addition to the "upload to App Stores" goal, this app should aim to be sufficiently rich that it can be a bug demonstrator. We should be able largely enforce a requirement that any reported bug in a widget should require a diff against the demo app making a change that causes the bug to occur.
When auditing the examples for inclusion in the new toga-demo, we should ensure that the X demo only demonstrates X. At present, the Button example also demonstrates widget positioning, button colors, and more. There should be a panel to demonstrate widget colors, a panel to demonstrate fonts, a panel to demonstrate widget positioning, etc.

Apr 16 '23 23:04 freakboy3742

Was trying the toga-demo and it won't even fire up.

/site-packages/toga/icons.py", line 32, in __get__
    value = getattr(cls, f"__{self.f.__name__}")
AttributeError: type object 'Icon' has no attribute '__APP_ICON'. Did you mean: 'APP_ICON'?

Trying to learn this but some more examples would be really helpful. Happy to contribute because this project is really exciting.

May 07 '25 14:05 eddyizm

@eddyizm Thanks for the report; however, I can't reproduce what you're seeing on macOS or Linux.

Can you share any details about how you're generated this error? Any details about your platform, environment, software versions that are installed?

May 07 '25 23:05 freakboy3742

@freakboy3742 Yeah, sorry I should have added more context. I am currently working on a small port and have a working toga environment using briefcase in a virtual environment. I am making progress and stumbled across toga-demo so figured i'd give it a go in the same repo.

pip install toga-demo

Installing collected packages: toga-demo
Successfully installed toga-demo-0.5.0

toga-demo
(replaced my path with $HOME)

Traceback (most recent call last):
  File "$HOME/env/lib64/python3.13/site-packages/toga/icons.py", line 32, in __get__
    value = getattr(cls, f"__{self.f.__name__}")
AttributeError: type object 'Icon' has no attribute '__APP_ICON'. Did you mean: 'APP_ICON'?

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "$HOME/env/lib64/python3.13/site-packages/toga_gtk/icons.py", line 36, in __init__
    native = GdkPixbuf.Pixbuf.new_from_file(str(path)).scale_simple(
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~^^^^^^^^^^^
gi.repository.GLib.GError: gdk-pixbuf-error-quark: Couldn’t recognize the image file format for file “$HOME/env/lib64/python3.13/site-packages/toga_demo/resources/toga-demo.ico” (3)

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "$HOME/env/bin/toga-demo", line 8, in <module>
    sys.exit(run())
             ~~~^^
  File "$HOME/env/lib64/python3.13/site-packages/toga_demo/__main__.py", line 6, in run
    main().main_loop()
    ~~~~^^
  File "$HOME/env/lib64/python3.13/site-packages/toga_demo/app.py", line 106, in main
    return TogaDemo("Toga Demo", "org.beeware.toga-demo")
  File "$HOME/env/lib64/python3.13/site-packages/toga/app.py", line 291, in __init__
    self.icon = Icon.APP_ICON
                ^^^^^^^^^^^^^
  File "$HOME/env/lib64/python3.13/site-packages/toga/icons.py", line 34, in __get__
    value = self.f(owner)
  File "$HOME/env/lib64/python3.13/site-packages/toga/icons.py", line 57, in APP_ICON
    return Icon(_APP_ICON)
  File "$HOME/env/lib64/python3.13/site-packages/toga/icons.py", line 121, in __init__
    self._impl = self.factory.Icon(interface=self, path=full_path)
                 ~~~~~~~~~~~~~~~~~^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "$HOME/env/lib64/python3.13/site-packages/toga_gtk/icons.py", line 45, in __init__
    raise ValueError(f"Unable to load icon from {path}")
ValueError: Unable to load icon from $HOME/env/lib64/python3.13/site-packages/toga_demo/resources/toga-demo.ico

briefcase --version
0.3.22

python --version
Python 3.13.3

 uname -a
Linux fedora 6.14.3-200.fc41.x86_64 #1 SMP PREEMPT_DYNAMIC Mon Apr 21 13:49:26 UTC 2025 x86_64 GNU/L

cat /etc/os-release
NAME="Fedora Linux"
VERSION="41 (KDE Plasma)"
RELEASE_TYPE=stable
ID=fedora
VERSION_ID=41
VERSION_CODENAME=""
PLATFORM_ID="platform:f41"
PRETTY_NAME="Fedora Linux 41 (KDE Plasma)"
ANSI_COLOR="0;38;2;60;110;180"
LOGO=fedora-logo-icon
CPE_NAME="cpe:/o:fedoraproject:fedora:41"
DEFAULT_HOSTNAME="fedora"
HOME_URL="https://fedoraproject.org/"
DOCUMENTATION_URL="https://docs.fedoraproject.org/en-US/fedora/f41/"
SUPPORT_URL="https://ask.fedoraproject.org/"
BUG_REPORT_URL="https://bugzilla.redhat.com/"
REDHAT_BUGZILLA_PRODUCT="Fedora"
REDHAT_BUGZILLA_PRODUCT_VERSION=41
REDHAT_SUPPORT_PRODUCT="Fedora"
REDHAT_SUPPORT_PRODUCT_VERSION=41
SUPPORT_END=2025-12-15
VARIANT="KDE Plasma"
VARIANT_ID=kde

May 08 '25 02:05 eddyizm

@eddyizm I've migrated this discussion to #3422, as it's a separate issue to the problem being described by this ticket.

May 08 '25 02:05 freakboy3742

5. There should be a panel to demonstrate widget colors, a panel to demonstrate fonts, a panel to demonstrate widget positioning, etc.

So are you thinking you would have a single button demo page/window/something and that something would then itself be broken down into panels for each configuration option?

Sep 03 '25 03:09 brettcannon

I think you're describing what we have in mind, but I'm not 100% sure because of terminology.

For clarity:

The ideal end state would be an app in the iOS and Android app stores (downloadable for other platforms) that is a "Toga Showcase". Launch the app, and you get a list of widgets that you can see an example of. Select one of those widgets (say, Button), and you go to a second panel of content that shows some examples of buttons - a regular button, a disabled button, a button with an icon, and so on. It wouldn't necessarily be exhaustive for every possible capability, but enough examples to show off interesting behavior and features. Those buttons would respond to actions, doing something trivial like show a dialog box.

Rinse and repeat for every widget and capability that Toga supports. On platforms where a widget isn't supported, you get a "not supported" placeholder page.

There may also be pages that aren't strictly "widget" bound - so a demonstration of colors, and of fonts, and of hardware features, and so on.

We'd then publish this app automatically as part of the Toga release process - so when we publish Toga 0.5.3, there'd be an update of the app in the App Stores.

Right now, the impediment to writing this app is having top level navigation widgets. We need a platform-native mechanism for navigating "trees" of content - the "select from list, new panel of content slides in from the right, titlebar has a Back button" navigation style for mobile; on desktop (and possibly even adaptive on iPad), you'd have the list of options down the left hand side, and selecting an item from the list shows the panel of content on the right.

Sep 03 '25 23:09 freakboy3742

It's pretty close to what I was thinking. I read more Toga docs last night and my thinking was either a ScrollContainer or some other UI mechanism (e.g. list of buttons 😅) that led to a new window that had an OptionContainer that separated out thematically the key parts of a widget. But it sounds like you don't feel the need to be that exhaustive and it might just be more of a discussion of what to show for each widget (which makes sense to me).

FYI I ended up on this issue because https://toga.readthedocs.io/en/stable/tutorial/get-started.html mentions toga-demo but it lacks a demo of MapView (which I found by finding https://github.com/beeware/toga/tree/main/examples/examples_overview via another issue).

Sep 04 '25 18:09 brettcannon

It's pretty close to what I was thinking. I read more Toga docs last night and my thinking was either a ScrollContainer or some other UI mechanism (e.g. list of buttons 😅) that led to a new window that had an OptionContainer that separated out thematically the key parts of a widget. But it sounds like you don't feel the need to be that exhaustive and it might just be more of a discussion of what to show for each widget (which makes sense to me).

The demo for each widget doesn't need to be exhaustive. A taster is plenty, followed by "see the docs for more details on what you can do".

As for the implementation - a scroll container of buttons is likely how we'd implement it if we really needed it right now - but I think we can wait until we've got the pieces.

FYI I ended up on this issue because https://toga.readthedocs.io/en/stable/tutorial/get-started.html mentions toga-demo but it lacks a demo of MapView (which I found by finding https://github.com/beeware/toga/tree/main/examples/examples_overview via another issue).

Yeah - the examples folder is really the repository of "stuff we can do" at present, but the examples are a mix of "show and tell" and "functional tests", so they aren't always good from the perspective of promotion; plus having to run a couple of dozen demos to see all the features is inconvenient.

Sep 04 '25 21:09 freakboy3742