[Question] Access to the controls in a Model View Controller approach

[vindevoy]

Question

I am fond of the MVC pattern. I would like to have this approach in Flet also, but the main problem is the access to controls. If I define a page in a function, as long as I have functions within that function, I can access my controls. But, if I want my page to be in view.py and my logic in controller.py, I simply can't easily access the controls anymore as they are scoped only within the function.

I came up with the following code to add a "name" property via the "data" property. Then, with some helper code, I can have a list of all "named controls" and get access to it that way. The solution is below.

I would appreciate it if somebody shed some light on my approach and if somebody has a similar problem or idea, if you could share your thoughts on this.

Code sample

## MAIN.PY

import flet as ft

from view import settings_window

ft.app(target=settings_window)


## CONTROLLER.PY

import flet as ft

from model import get_option_name


def __named_controls(page: ft.Control | ft.Page):
    named = {}

    try:
        for control in page.controls:
            if control.data is not None and control.data != {}:
                if "name" in control.data:
                    named[control.data["name"]] = control

            named = {**named, **__named_controls(control)}
            # add to the dict of this control, the dict of the controls deeper down the control tree
    except AttributeError:
        pass  # container does not have a controls property

    return named


def change_mode(e: ft.ControlEvent):
    p: ft.Page = e.page
    p.theme_mode = ft.ThemeMode.DARK if e.control.value else ft.ThemeMode.LIGHT
    p.update()


def dropdown_change(e: ft.ControlEvent):
    dropdown: ft.Dropdown = e.control
    textfield: ft.TextField = __named_controls(e.page)["textfield"]

    textfield.value = get_option_name(dropdown.value)
    # could use e.data also in this case
    textfield.update()


def button_click(e: ft.ControlEvent):
    dlg = ft.AlertDialog(
        modal=True,
        actions=[
            ft.TextButton("Yes", on_click=close_application),
            ft.TextButton("No", on_click=close_dialog)
        ],
        actions_alignment=ft.MainAxisAlignment.END,
        title=ft.Text(f"Close the application ?")
    )

    e.page.dialog = dlg
    dlg.open = True
    e.page.update()


def close_dialog(e: ft.ControlEvent):
    e.page.dialog.open = False
    e.page.update()


def close_application(e: ft.ControlEvent):
    e.page.window_close()


## MODEL.PY

__genders = {"M": "Male", "F": "Female", "NA": "No answer"}


def get_options():
    return list(__genders.keys())


def get_option_name(selected_value: str):
    return __genders[selected_value]


## VIEW.PY

import flet as ft

from controller import dropdown_change, button_click, change_mode
from model import get_options


def settings_window(page: ft.Page):
    page.title = "Problem Investigation"

    switch = ft.Switch(label="Dark mode", on_change=change_mode)
    options = [ft.dropdown.Option(o) for o in get_options()]
    dropdown = ft.Dropdown(options=options, on_change=dropdown_change)
    textfield = ft.TextField()
    button = ft.ElevatedButton(text="Close", on_click=button_click)
    column = ft.Column(controls=[switch, dropdown, textfield, button])

    textfield.disabled = True
    textfield.data = {"name": "textfield"}
    dropdown.data = {"name": "dropdown"}

    page.add(column)

Error message

No response

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

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

[ndonkoHenri]

what do you think of this: https://github.com/o0Adrian/flet-mvc

[vindevoy]

I had a much closer look and I am not happy with the approach. The resulting code with the Datapoints is too complicated for me. I started another approach and will reveal it later.

[vindevoy]

I have created this repo for my approach: https://github.com/vindevoy/flet_mvc

[FeodorFitsner]

I've been thinking on some approach that would allow to re-generate the entire UI (top to bottom) from a data model. The challenge here is comparing "before" and "after" UI trees to calculate the difference that need to be sent to Flutter. Hopefully, we'll be able to offer that in the future versions of Flet.

Pseudo code:

import flet as ft

def build_page(data):
    return ft.Page(
        [
            ft.Row(
                [
                    ft.Text("Hello, "),
                    ft.Text(value=data.first_name),
                    ft.Text(value=data.last_name),
                ]
            ),
            ft.ElevatedButton("Register"),
        ]
    )

[vindevoy]

@FeodorFitsner What exactly do you mean ? Do you mean that when you have another page (like the list of people), that you need to remove these Text()'s and put a Datatable ?

Based on my code in the repo mentionned above, I am going to make a UI with "2 screens", a list and a detail for example. I also would like my model to be based on SQLAlchemy.

[vindevoy]

@FeodorFitsner The above code would be a first step, I think, into integrating Flet with Django. What would eventually render the Page ?

[vindevoy]

I have released a 0.2.0 version of my approach: https://github.com/vindevoy/flet_mvc