[Question]How to set callback functions for custom components

[Qye-Leisure]

Question

There is no relevant example in the documentation, I set click_callback: Optional[Callable] = field(default=None, metadata={"data_type": "function"} directly in the class properties, but this directly gives an error

Code sample

import flet as ft
from dataclasses import field
from typing import Optional,Callable

@ft.control
class ceshi(ft.Container):
    expand :bool | int | None=True
    bgcolor:ft.Colors=ft.Colors.BLUE_100
    click_callback: Optional[Callable] = field(default=None, metadata={"data_type": "function"})

    def init(self):
        self.on_click=self._on_click



    def _on_click(self,e):
        print(e)
        if self.click_callback is not None:
            self.click_callback(e)

if __name__ == "__main__":
    def main(page:ft.Page):

        a=ceshi(
        click_callback=lambda e :print(f"click_callback====:{e}")
        )

        page.add(
            a
        )

    ft.run(main)

Error message

(.venv) PS C:\Users\31264\Desktop\节点编辑器> & c:\Users\31264\Desktop\节点编辑器\.venv\Scripts\python.exe c:/Users/31264/Desktop/节点编辑器/组件/组合/ces.py
Unhandled error in main() handler
Traceback (most recent call last):
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\app.py", line 354, in on_session_created
    main(session.page)
    ~~~~^^^^^^^^^^^^^^
  File "c:\Users\31264\Desktop\节点编辑器\组件\组合\ces.py", line 31, in main
    page.add(
    ~~~~~~~~^
        a
        ^
    )
    ^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\controls\base_page.py", line 316, in add
    self.update()
    ~~~~~~~~~~~^^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\controls\page.py", line 667, in update
    self.__update(self)
    ~~~~~~~~~~~~~^^^^^^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\controls\page.py", line 691, in __update
    self.session.patch_control(c)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~^^^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\messaging\session.py", line 251, in patch_control
    self.__send_message(
    ~~~~~~~~~~~~~~~~~~~^
        ClientMessage(
        ^^^^^^^^^^^^^^
    ...<2 lines>...
        )
        ^
    )
    ^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\messaging\session.py", line 487, in __send_message
    self.__conn.send_message(message)
    ~~~~~~~~~~~~~~~~~~~~~~~~^^^^^^^^^
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\messaging\flet_socket_server.py", line 399, in send_message
    m = msgpack.packb(
        [message.action, message.body],
        default=configure_encode_object_for_msgpack(BaseControl),
    )
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\msgpack\__init__.py", line 36, in packb
    return Packer(**kwargs).pack(o)
           ~~~~~~~~~~~~~~~~~~~~~^^^
  File "msgpack/_packer.pyx", line 279, in msgpack._cmsgpack.Packer.pack
  File "msgpack/_packer.pyx", line 276, in msgpack._cmsgpack.Packer.pack
  File "msgpack/_packer.pyx", line 265, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 232, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 270, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 213, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 265, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 232, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 265, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 232, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 265, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 232, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 270, in msgpack._cmsgpack.Packer._pack
  File "msgpack/_packer.pyx", line 213, in msgpack._cmsgpack.Packer._pack_inner
  File "msgpack/_packer.pyx", line 267, in msgpack._cmsgpack.Packer._pack
  File "C:\Users\31264\Desktop\节点编辑器\.venv\Lib\site-packages\flet\messaging\protocol.py", line 203, in encode_object_for_msgpack
    raise RuntimeError(f"Cannot serialize method: {obj}") from None
RuntimeError: Cannot serialize method: <function main.<locals>.<lambda> at 0x000001E13E793F60>

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

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

[Qye-Leisure]

import flet as ft
from typing import Optional,Callable

@ft.control
class ceshi(ft.Container):
    expand :bool | int | None=True
    bgcolor:ft.Colors=ft.Colors.BLUE_100

    def __init__(self, click_callback: Optional[Callable] = None, **kwargs):
        super().__init__(**kwargs)
        self.click_callback = click_callback

    def init(self):
        self.on_click=self._on_click



    def _on_click(self,e):
        print(e)
        if self.click_callback is not None:
            self.click_callback(e)

if __name__ == "__main__":
    def main(page:ft.Page):

        a=ceshi(
        click_callback=lambda e :print(f"click_callback====:{e}")
        )

        page.add(
            a
        )

    ft.run(main)

[Qye-Leisure]

This is just a stopgap measure and prone to bugs

[Qye-Leisure]

import flet as ft
from typing import Optional,Callable

@ft.control
class ceshi(ft.Container):
    expand :bool | int | None=True
    bgcolor:ft.Colors=ft.Colors.BLUE_100

    click_callback: Optional[Callable] = None



    def init(self):
        
        self._click_callback=self.click_callback
        self.click_callback=None

        self.on_click=self._on_click




    def _on_click(self,e):
        print(e)
        if self._click_callback is not None:
            self._click_callback(e)

if __name__ == "__main__":
    def main(page:ft.Page):

        a=ceshi(
        click_callback=lambda e :print(f"click_callback====:{e}")
        )

        page.add(
            a
        )

    ft.run(main)

[Qye-Leisure]

Flet serializes all public properties of the control as MsgPack and sends them to the frontend, while function objects cannot be serialized. Adding a callback function directly to a class property is defined as a normal property, and the serialization process fails once it is passed.
Solution:
Change all event callbacks that need to be saved on the server side to private properties (starting with _), as Flets automatically skip properties that start with an underscore when serialized.
At the same time, in order to allow users to still pass parameters in the form of components (event callback=xxx), you can keep the corresponding construct parameters, but immediately export and delete the public attributes in init. However, if you directly operate del deletion, an error will be reported, because the attributes generated by the Flet's @ft.control decorator do not allow direct del deletion, and it does not affect that you can directly assign it to none

[Qye-Leisure]

This is possible, but in the future, if you inherit this custom component, then there may be problems with his custom callback function and so on, 和 you have to have super().__init__( function content = xxx ）It's a bit of a bad experience, or I'm looking for the wrong way