Pushing and popping views

[jacobtomlinson]

I've been playing around textual this week and am trying to build an app with multiple pages.

I see there is a push_view method on the App which makes me think there must be a way to push new views onto a stack and pop them off again. For example one view could have a bunch of buttons and when you click them they push a new view on top. Then have a back button that would pop them off again.

I notice there is not a corresponding pop_view method, so I had a go at implementing one myself but it doesn't seem to work.

If I push a view on nothing is displayed, but when I pop it off again the first view shows again.

from textual.app import App, DockView
from textual import events
from textual.app import App
from textual.widgets import Placeholder


class ViewPushPop(App):
    async def on_load(self, event: events.Load) -> None:
        await self.bind("u", "push_view", "Push View")
        await self.bind("o", "pop_view", "Pop View")

    async def on_mount(self, event: events.Mount) -> None:
        await self.view.dock(Placeholder(name="First"), edge="top")

    async def pop_view(self) -> None:
        if len(self._view_stack) > 1:
            view = self._view_stack.pop()
            await self.remove(view)
            self.refresh()

    async def action_push_view(self):
        new_view = DockView()
        await new_view.dock(Placeholder(name="Second"), edge="top")
        await self.push_view(new_view)

    async def action_pop_view(self):
        await self.pop_view()


ViewPushPop.run(title="View Push/Pop App", log="/tmp/textual.log")

My question is, am I going down the right path here for making multi-view apps?

I've also explored clearing all widgets from the original view and drawing new ones for each page, but it feels like View is a better abstraction for this and the push_view method seems like it's going in this direction.

[willmcgugan]

I'm afraid the view stack functionality is missing, but you have correctly deduce how it should work. Expect it in a future version...

[jacobtomlinson]

Ah awesome ok I'll look forward to it! In the meantime do you think the clearing and replacing widgets in a single view is a reasonable road to go down?

[nmoya]

@jacobtomlinson Did you find a workaround? I tried your code in an effort to debug textual (I thought I had a good understanding), but couldn't figure it out why it doesn't show up.

I have also tried to swap widgets between the current view and the new view, but it also didn't work.

@willmcgugan If you could give us some clue on the next steps for the view stack functionality, I would follow your leads and dig deeper.

[jacobtomlinson]

To work around in the mean time I've been removing all widgets from the default view and loading new ones. Feels cludgy but works.

Here's a WIP PR that makes use of this.

https://github.com/dask-contrib/dask-ctl/pull/19/files#diff-95a7922c95475fc4b9e6cf3c3c3f34b5aaca8ed1817859953d9c99bbf2f7d710R74-R168

[nmoya]

This is very helpful! Thank you very much!

[j1o1h1n]

Try adding a call to on_resize:

from textual.geometry import Size

...

    async def action_push_view(self):
        view = DockView()
        await view.dock(Placeholder(name="Second"), edge="top")
        resize = events.Resize(self, Size(self.console.size))
        await view.on_resize(resize)
        await self.push_view(view)

[jacobtomlinson]

This is awesome, that definitely works as a workaround.

Given that @willmcgugan said to expect this functionality in a future version this will probably break soon. I'll probably go with this for now with a comment to fix it later, might need a hard pin dependency though.

[j1o1h1n]

I quite like the director/scene API from Cocos2D. The following puts the "pop_view" into a helper class.

To activate a particular view, you call await self.director.set_scene(button_name)

from textual.app import App, DockView
from textual import events
from textual.widgets import Header, Footer, Button, ButtonPressed
from textual.geometry import Size


class Director:

    def __init__(self, app):
        self.app = app
        self.scenes = {}

    def create_scene(self, name):
        if name in self.scenes:
            raise ValueError(f"Scene {name} already exists")
        self.scenes[name] = DockView(name=name)
        return self.scenes[name]

    def delete_scene(self, name):
        del self.scenes[name]

    async def set_scene(self, scene_name):
        view = self.scenes[scene_name]
        resize = events.Resize(self.app, Size(self.app.console.size))
        await self.pop_view()
        await view.on_resize(resize)
        await self.app.push_view(view)

    async def pop_view(self) -> None:
        if len(self.app._view_stack) > 1:
            view = self.app._view_stack.pop()
            await self.app.remove(view)
            self.app.refresh()


class MultiPageApp(App):

    async def on_load(self, event: events.Load) -> None:
        await self.bind("q", "quit", "Quit")
        await self.bind("escape", "pop_view", "Escape")
        await self.bind("a", "set_scene('Alpha')", "Alpha")
        await self.bind("b", "set_scene('Beta')", "Beta")

    async def on_mount(self, event: events.Mount) -> None:

        def make_button(text: str, style: str) -> Button:
            return Button(f"| {text} |", style=style, name=text)

        async def assemble(view, header, footer, names, styles):
            await view.dock(header, edge="top")
            await view.dock(footer, edge="bottom")
            grid = await view.dock_grid()
            btns = [make_button(n, s) for n, s in zip(names, styles)]

            grid.add_column("c1", fraction=1, max_size=30)
            grid.add_column("c2", fraction=1, max_size=30)
            grid.add_row("r1", fraction=1, max_size=10)
            grid.add_row("r2", fraction=1, max_size=10)
            grid.place(*btns)

        self.director = Director(self)
        header, footer = Header(), Footer()
        h_style, a_style, b_style = "red", "blue", "green"

        await assemble(self.view, header, footer,
                       ["Alpha", "Beta"], [a_style, b_style])

        view = self.director.create_scene("Alpha")
        await assemble(view, header, footer,
                       ["Home", "Beta"], [h_style, b_style])

        view = self.director.create_scene("Beta")
        await assemble(view, header, footer,
                       ["Home", "Alpha"], [h_style, a_style])

    async def action_pop_view(self):
        await self.director.pop_view()

    async def action_set_scene(self, scene_name):
        await self.director.set_scene(scene_name)

    async def handle_button_pressed(self, message: ButtonPressed) -> None:
        assert isinstance(message.sender, Button)
        button_name = message.sender.name
        if button_name == "Home":
            await self.director.pop_view()
        else:
            await self.director.set_scene(button_name)


MultiPageApp.run(title="Multi Page App", log="textual.log")