Update MainWindow in Toga, Beeware, Python

Question

I'm Trying to create a cross platform app with Beeware, at the begining I'm showing two buttons for the user to choose the view he wants to go, so once the button is clicked the mainwindow should update its content and show the view that the user chose.

This is the main window when the app is started:

Once I click on "First View" the First Views' content is added behind the start content and looks like this:

The expected behavior is the mainwindow to delete the buttons and just show the text, the same should happen for the second view button.

This is the code:

import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW


class exampleApp(toga.App):

    def startup(self):
        """
        Construct and show the Toga application.

        Usually, you would add your application to a main content box.
        We then create a main window (with a name matching the app), and
        show the main window.
        """
        main_box = toga.Box(style=Pack(direction=COLUMN))
    
        ###        
        # Main Screen
        first_view = toga.Button('First View', on_press=self.first_view, style=Pack(padding=2))
        second_view = toga.Button('Second View', on_press=self.second_view, style=Pack(padding=2))

        home_box = toga.Box(style=Pack(direction=ROW, padding=2))
        home_box.add(first_view)
        home_box.add(second_view)

        main_box.add(home_box)
        ###

        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = main_box
        self.main_window.show()

    def first_view(self, widget):
        new_box = toga.Box()
        screen_text = toga.Label('This screen will allow you to see your First View')
        new_box.add(screen_text)
        self.main_window.content = new_box

    def second_view(self, widget):
        new_box = toga.Box()
        screen_text = toga.Label('This screen will allow you to see your Second View')
        new_box.add(screen_text)
        self.main_window.content = new_box

def main():
    return exampleApp()

Does somebody know how to get the expected output?

Thanks in advance.

Answer 1

Fixed.

What I understood is that we have to create a general box that we can play with (self.main_box), with a general children for this box (self.view_box), that way we can delete and reset the content for the general children and every time that the content is modified, the MainWindow refresh itself by default, so self.main_window.content = self.main_box is not needed everytime we are modifing content.

import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW


class exampleApp(toga.App):

    def startup(self):
        """
        Construct and show the Toga application.

        Usually, you would add your application to a main content box.
        We then create a main window (with a name matching the app), and
        show the main window.
        """
        self.main_box = toga.Box(style=Pack(direction=COLUMN))
        self.view_box = toga.Box()
        
        ###
        # Main Screen
        first_view = toga.Button('First View', on_press=self.first_view, style=Pack(padding=2))
        second_view = toga.Button('Second View', on_press=self.second_view, style=Pack(padding=2))

        self.view_box.style = Pack(direction=ROW, padding=2)
        self.view_box.add(first_view)
        self.view_box.add(second_view)
        ###
        
        self.main_box.add(self.view_box)

        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = self.main_box
        self.main_window.show()

    def first_view(self, sender):
        self.main_box.remove(self.view_box)

        self.view_box = toga.Box()
        self.view_box.style = Pack(direction=ROW, padding=2)
        
        screen_text = toga.Label('This screen will allow you to see your First View')
        self.view_box.add(screen_text)
        
        self.main_box.add(self.view_box)
        self.main_window.show()

    def second_view(self, widget):
        self.main_box.remove(self.view_box)

        self.view_box = toga.Box()
        self.view_box.style = Pack(direction=ROW, padding=2)

        screen_text = toga.Label('This screen will allow you to see your Second View')
        self.view_box.add(screen_text)

        self.main_box.add(self.view_box)
        self.main_window.show()

def main():
    return exampleApp()