docs(examples): use best practice with TrameApp

Author: UlysseDurand

examples/03_markdown/01_markdown.py

@@ -5,55 +5,65 @@
 
 import os
 
-from trame.app import get_server
+from trame.app import TrameApp
 from trame.ui.vuetify3 import SinglePageLayout
-from trame.widgets import markdown, vuetify3
+from trame.widgets import markdown
+from trame.widgets import vuetify3 as v3
+from trame.decorators import change
 
 # -----------------------------------------------------------------------------
 # Trame setup
 # -----------------------------------------------------------------------------
 
-server = get_server(client_type="vue3")
-state, ctrl = server.state, server.controller
 
-# -----------------------------------------------------------------------------
-# Read markdown file
-# -----------------------------------------------------------------------------
+class MarkdownApp(TrameApp):
+    def __init__(self, server=None):
+        super().__init__(server)
+        self._build_ui()
 
+    # -----------------------------------------------------------------------------
+    # Read markdown file
+    # -----------------------------------------------------------------------------
 
-@state.change("file_name")
-def update_md(file_name, **kwargs):
-    md_file_path = os.path.join(os.path.dirname(__file__), file_name)
-    with open(md_file_path, encoding="utf-8") as md:
-        ctrl.md_update(md.read())
+    @change("file_name")
+    def update_md(self, file_name, **kwargs):
+        md_file_path = os.path.join(os.path.dirname(__file__), file_name)
+        with open(md_file_path, encoding="utf-8") as md:
+            self.ctrl.md_update(md.read())
 
+    # -----------------------------------------------------------------------------
+    # GUI
+    # -----------------------------------------------------------------------------
 
-# -----------------------------------------------------------------------------
-# GUI
-# -----------------------------------------------------------------------------
-
-state.trame__title = "MD Viewer"
+    def _build_ui(self):
+        self.state.trame__title = "MD Viewer"
 
-with SinglePageLayout(server) as layout:
-    layout.title.set_text("Markdown Viewer")
+        with SinglePageLayout(self.server) as self.ui:
+            self.ui.title.set_text("Markdown Viewer")
 
-    with layout.toolbar:
-        vuetify3.VSpacer()
-        vuetify3.VSelect(
-            v_model=("file_name", "demo.md"),
-            items=("options", ["demo.md", "sample.md", "module.md"]),
-            hide_details=True,
-            dense=True,
-        )
+            with self.ui.toolbar:
+                v3.VSpacer()
+                v3.VSelect(
+                    v_model=("file_name", "demo.md"),
+                    items=("options", ["demo.md", "sample.md", "module.md"]),
+                    hide_details=True,
+                    dense=True,
+                )
 
-    with layout.content:
-        md = markdown.Markdown(classes="pa-4 mx-2")
-        ctrl.md_update = md.update
+            with self.ui.content:
+                md = markdown.Markdown(classes="pa-4 mx-2")
+                self.ctrl.md_update = md.update
 
 
 # -----------------------------------------------------------------------------
 # Main
 # -----------------------------------------------------------------------------
 
+
+def main():
+    mdApp = MarkdownApp()
+    mdApp.server.start()
+
+
 if __name__ == "__main__":
-    server.start()
+    main()