[Question] How to update the content of a page (aka view) instead switching between views (aka routing via views)

[thinkORo]

Question

I have a simple setup with a routing and differernt view files to seperate the content of the views from my main.py.

I want to use session storage to use values in different views.

Unfortunately the content of the view is loaded at startup and it is not updated while switching back and forth.

How can I achieve this? Could I adjust my own Router (and if yes "How?") or is there any other simple way?

Flow:

1. start main.py by: python main.py
2. click button to set session storage value
3. navigate to about by changing the url from /home to /about
4. on the about page the value from step 2 (here it's my github name _thinkORo) should appear. But it's None

Code sample

# main.py
import flet as ft

from views.routing import Router

def main(page: ft.Page):

    page.theme_mode = ft.ThemeMode.LIGHT
    page.title = "TEST"

    router = Router(page)

    page.on_route_change = router.route_change

    page.add(
        ft.Row(
            [
                router.body,
            ],
            expand=True,
        )
    )

    page.go('/home')
    page.update()

ft.app(target=main, port=8550, view=ft.WEB_BROWSER, assets_dir="assets", host="localhost")

# routing.py
import flet as ft
from views.view_about import AboutView
from views.view_home import HomeView


class Router:
    def __init__(self, page):
        self.page = page
        self.ft = ft
        self.routes = {
            "/home": HomeView(page),
            "/about": AboutView(page),
        }
        self.body = ft.Container(content=self.routes['/home'])

    def route_change(self, route):
        self.body.content = self.routes[route.route]
        self.body.update()

# views.view_home
import flet as ft

def HomeView(page):
    print("initialize home view")
    greetings = ft.Column()
    
    def btn_click(e):
        username = "thinkORo"
        page.session.set("username", username)
        greetings.controls.append(ft.Text(f"Hallo {username}"))
        page.update()

    clickBtn = ft.ElevatedButton(text="Set session value and update page", on_click=btn_click)

    content = ft.Column([
        clickBtn,
        greetings
        ])

    return content

# views.view_about
import flet as ft

def AboutView(page):
    print("initialize about view")
    username = page.session.get("username")
    greetings = ft.Column()
    greetings.controls.append(ft.Text(f"Hallo {username}"))

    content = ft.Column([
        greetings
        ])

    return content

Error message

n/a

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[thinkORo]

Do you know that? You formulate a question and an answer comes almost automatically?

When I wrote my question "Could I adjust my own Router?", I thought: yes, why not? And now I've simply changed the router class.

Sorry for this pointless entry.

[FuanitoMH]

Hi!, I still have the same doubt, could you tell me what changes you made to resolve it? :(

[thinkORo]

Hi Juan, as it's "a time ago" I have to double check the modifications I made.

But as a first intro: the "problem" was this part in routing.py

    def __init__(self, page):
        self.page = page
        self.ft = ft
        self.routes = {
            "/home": HomeView(page),
            "/about": AboutView(page),
        }

As you can see while initializing the class the routes are set. And because of that they were "executed".

The class now looks like:

from typing import Callable
import flet as ft

class Router:
    def __init__(self, page):
        self.page = page
        self.data = dict()
        self.routes = {}
        self.body = ft.Container()

    def set_route(self, stub: str, view: Callable):
        self.routes[stub] = view

    def set_routes(self, route_dictionary: dict):
        self.routes.update(route_dictionary)

    def route_change(self, route):
        print("route.route", route.route)

        _page = route.route.split("?")[0]
        # ORo: here we can identify and get query parameters if required
        # queries = route.route.split("?")[1:]
        # for item in queries:
        #     key = item.split("=")[0]
        #     value = item.split("=")[1]
        #     self.data[key] = value.replace('+', ' ')

        self.body.content = self.routes[_page](self)
        self.body.update()

In addition I made a change in my views/view_home.py as the classes no longer inherit from page, but from router, like:

import flet as ft

def HomeView(router):
    print("initialize home view")
    greetings = ft.Column()
    greetings.controls.append(ft.Text(f"Hallo {username}"))

    content = ft.Column([
        greetings
        ])

    return content

Now you have to adjust the main.py as well:

import flet as ft
from views.routing import Router
from views.view_home import HomeView

def main(page: ft.Page):

    page.title = "any title"
    page.window_width = 1500
    page.window_height = 1000
    page.window_center = True

    router = Router(page)
    print("initialize routes")
    router.routes = {
        "/home": HomeView,
    }
    page.on_route_change = router.route_change

    page.add(
        ft.Row(
            [
                router.body,
            ],
            expand=True,
        )
    )

    page.go('/home')
    page.update()

I have to combine this examples in one new project to double check if it's running as expected. But I think that's it. You can now add as many views as you want.

Could you please check as well if it's working for you?

[FuanitoMH]

Hello @thinkORo , thank you very much for your response, I already made the changes and it worked perfectly for me.🫡

Thank you so much for your help

[FuanitoMH]

In addition, the solution I had made, it was just modifying the Router class

import flet as ft
from views.index_view import IndexView

def myRutes(page: ft.Page, ruta: str):
    routes = {
        "/": IndexView(page)
    }
    return routes[ruta]

class Router:

    def __init__(self, page):
        self.page = page
        self.ft = ft
        self.body = ft.Container(content=myRutes(page, "/"))

    def route_change(self, route):
        print('rute: ', route.route)
        self.body.content = myRutes(self.page, route.route)
        self.body.update()

it's a propose more simple, but I think it is not the most optimal and appropriate, but it works🤓. In case anyone needs it