docs: update basic example with new TrameApp

jourdain · jourdain · commit 3a7f8f2e9740 · 2025-05-31T21:37:32.000-06:00
diff --git a/docs/vitepress/examples/core/basics.md b/docs/vitepress/examples/core/basics.md
@@ -20,7 +20,7 @@ The examples presented below are meant to be executed and explored so you can un
 <<< @/../../examples/core_features/multi_layout.py
 :::
 
-## Life Cycle 
+## Life Cycle
 
 <<< @/../../examples/core_features/life_cycle.py
 
@@ -30,7 +30,7 @@ Trame as opposed to many frameworks out there is stateful which make things more
 
 For that reason, the "hot reload" is at the execution and not on file save.
 
-Basically, with trame, you need to interact with the application in order to re-excute some new code rather than saving your file and getting the new app ready to go. In fact you can have pieces of your application that will properly execute the edited code, while other will be stuck with the original version. 
+Basically, with trame, you need to interact with the application in order to re-excute some new code rather than saving your file and getting the new app ready to go. In fact you can have pieces of your application that will properly execute the edited code, while other will be stuck with the original version.
 
 Once hot-reload is enabled by either using the `TRAME_HOT_RELOAD` environment variable or by using the extra `--hot-reload` arg, only the methods executed on the controller or via `@state.change` properly re-evaluate the new code version. If you want to enable such behavior on your own function, you can use the `@trame.decorators.hot_reload` decorator.
 
@@ -40,4 +40,6 @@ But in the following example, you can use `watchdog` to execute the UI update on
 
 ## Class for trame application
 
-<<< @/../../examples/core_features/app.py
+<<< @/../../examples/core_features/app.py
+
+Then with such a class that inherit `trame.app.TrameApp` you can instantiate it and return it to display its user interface.
diff --git a/examples/core_features/app.py b/examples/core_features/app.py
@@ -1,22 +1,13 @@
-from trame.app import get_server
-from trame.decorators import TrameApp, change, controller, life_cycle, trigger
+from trame.app import TrameApp
+from trame.decorators import change, controller, life_cycle, trigger
 from trame.ui.html import DivLayout
 from trame.widgets import html
 
 
-@TrameApp()
-class App:
+class App(TrameApp):
     def __init__(self, name=None):
-        self.server = get_server(name)
-        self.ui()
-
-    @property
-    def state(self):
-        return self.server.state
-
-    @property
-    def ctrl(self):
-        return self.server.controller
+        super().__init__(server=name)
+        self._build_ui()
 
     @trigger("exec")
     def method_call(self, msg):
@@ -34,8 +25,8 @@ def one_slider(self, resolution, **kwargs):
     def on_ready(self, *args, **kwargs):
         print("on_ready")
 
-    def ui(self):
-        with DivLayout(self.server):
+    def _build_ui(self):
+        with DivLayout(self.server) as self.ui:
             html.Input(
                 type="range",
                 min=3,
