Tips for designing multi-screen applications

[mzebrak]

Hi. I recently started learning how Textual works and I quickly ran into some questions when designing non-trivial, more complex multi-screen applications. Examples in the documentation or in applications that I have seen so far are based on a rather static division of applications - there is one main screen and some actions take place on it.
my application will consist of many cooperating screens and already at the stage of defining two similar screens I ran into a problem that brings me some questions.

Let's say I want to create two screens which would consists of some very similar layout:

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.screen import Screen
from textual.widgets import Footer, Header, Placeholder


class First(Screen):
    BINDINGS = [
        Binding("f2", "push_screen('second')", "Show second screen"),
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Placeholder("First screen")
        yield Footer()


class Second(Screen):
    BINDINGS = [
        Binding("f2", "push_screen('first')", "Show first screen"),
    ]

    def compose(self) -> ComposeResult:
        yield Header()
        yield Placeholder("Second Screen")
        yield Footer()


class MyApp(App[None]):
    SCREENS = {
        "first": First,
        "second": Second,
    }

    def on_mount(self) -> None:
        self.push_screen("first")


if __name__ == "__main__":
    MyApp().run()

This is a very trivial example, but I hope it shows the problem here. At some stage, the application may grow so large that it will define many common elements that I would like to be visible in many screens - e.g. a custom header.

The first thing that comes to mind is to introduce some abstraction and create specific screens based on it:

from abc import ABC, abstractmethod

from textual.app import App, ComposeResult
from textual.binding import Binding
from textual.screen import Screen
from textual.widgets import Footer, Header, Placeholder


class BaseScreen(Screen, ABC):
    def compose(self) -> ComposeResult:
        yield Header(show_clock=True)
        yield from self.create_main_panel()
        yield Footer()

    @abstractmethod
    def create_main_panel(self) -> ComposeResult:
        """Should yield the main panel widgets."""


class First(BaseScreen):
    BINDINGS = [
        Binding("f2", "push_screen('second')", "Show second screen"),
    ]

    def create_main_panel(self) -> ComposeResult:
        yield Placeholder("First screen")


class Second(BaseScreen):
    BINDINGS = [
        Binding("f2", "push_screen('first')", "Show first screen"),
    ]

    def create_main_panel(self) -> ComposeResult:
        yield Placeholder("Second Screen")


class MyApp(App[None]):
    SCREENS = {
        "first": First,
        "second": Second,
    }

    def on_mount(self) -> None:
        self.push_screen("first")


if __name__ == "__main__":
    MyApp().run()

But because the MessagePumpMeta metaclass is defined in the deep, we get a nasty error:

    class BaseScreen(Screen, ABC):
TypeError: metaclass conflict: the metaclass of a derived class must be a (non-strict) subclass of the metaclasses of all its bases

I was wondering whether to issue an issue for this reason, because I think it should be possible to simply use the built-in ABC when using Textual, but maybe there are some good practices to solve this problem in another way? Of course, I can enter additional parameters in init but it introduces a lot of boilerplate, and I have the impression that the framework is strongly focused on avoiding it.

====> EDIT
Something like:

class MessagePumpMetaABCMeta(MessagePumpMeta, ABCMeta):
    """Combine MessagePumpMeta and ABCMeta into a single metaclass."""
    pass
    
class BaseScreen(Screen, metaclass=MessagePumpMetaABCMeta):
    pass

seems to be working. but is that the is that the desired way?
EDIT <===

Another question is - is there any way we can change the widgets on the screen dynamically? I was thinking about using the reactive functionality for this, but because compose is called only once, despite updating the value of the reactive attribute, it does not affect the layout.

[willmcgugan]

Nicely done figuring out the ABC metaclass issues. Personally I don't think I would use ABC here. I tend to prefer the composition over inheritance approach. Although I might consider a typing.Protocol.

As for changing the widgets, compose is called once but you can update the content in the widgets, which includes the size. You can also programatically or via CSS show / hide widgets. And you can mount or remove widgets dynamically.