Skip to content

Commit 35375b1

Browse files
jourdainjourdain
committed
docs(examples): modernize code sample
1 parent e298cb8 commit 35375b1

3 files changed

Lines changed: 119 additions & 124 deletions

File tree

‎examples/core_features/events.py‎

100644100755
Lines changed: 51 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,68 @@
1-
from trame.app import get_server
1+
#!/usr/bin/env -S uv run --script
2+
#
3+
# /// script
4+
# requires-python = ">=3.10"
5+
# dependencies = [
6+
# "trame",
7+
# ]
8+
# ///
9+
from trame.app import TrameApp
10+
from trame.decorators import controller
211
from trame.ui.html import DivLayout
312
from trame.widgets import html
413

5-
# -----------------------------------------------------------------------------
6-
# Trame app
7-
# -----------------------------------------------------------------------------
814

9-
server = get_server()
10-
state, ctrl = server.state, server.controller
15+
class Events(TrameApp):
16+
def __init__(self, server=None):
17+
super().__init__(server)
1118

12-
# -----------------------------------------------------------------------------
13-
# State setup
14-
# -----------------------------------------------------------------------------
19+
# setup state
20+
self.state.a = 1
1521

16-
state.a = 1
22+
# build ui
23+
self._build_ui()
1724

18-
# -----------------------------------------------------------------------------
19-
# Methods call
20-
# -----------------------------------------------------------------------------
25+
# Can be defined after usage
26+
self.ctrl.alias_3 = self.method_4
2127

28+
def _build_ui(self):
29+
with DivLayout(self.server) as self.ui:
30+
html.Div(
31+
"State a={{ a }}",
32+
style="padding: 20px; margin: 20px; border: solid 1px #333;",
33+
)
34+
html.Button("Method 1", click=self.method_1)
35+
html.Button("Method 2", click=(self.method_2, "['hello', 'world']"))
36+
html.Button("Method 3", click=(self.method_3, "[1, 2]", "{ x: 3, y: 4 }"))
37+
html.Button("alias_1", click=(self.ctrl.alias_1, "[2]", "{ z: 4 }"))
38+
html.Button("alias_2", click=(self.ctrl.alias_2, "[3]", "{ z: 5 }"))
39+
html.Button("alias_3", click=(self.ctrl.alias_3, "[4]", "{ z: 6 }"))
40+
html.Button("a+", click="a+=1")
2241

23-
@ctrl.set("alias_1")
24-
def method_1(*args, **kwargs):
25-
print(f"Server: method_1 {args=} {kwargs=}")
26-
state.a += 1
42+
@controller.set("alias_1")
43+
def method_1(self, *args, **kwargs):
44+
print(f"Server: method_1 {args=} {kwargs=}")
45+
self.state.a += 1
2746

47+
@controller.add("alias_2")
48+
def method_2(self, *args, **kwargs):
49+
print(f"Server: method_2 {args=} {kwargs=}")
50+
self.state.a += 2
2851

29-
@ctrl.add("alias_2")
30-
def method_2(*args, **kwargs):
31-
print(f"Server: method_2 {args=} {kwargs=}")
32-
state.a += 2
52+
@controller.add("alias_2")
53+
def method_3(self, *args, **kwargs):
54+
print(f"Server: method_3 {args=} {kwargs=}")
55+
self.state.a += 3
3356

57+
def method_4(self, *args, **kwargs):
58+
print(f"Server: method_4 {args=} {kwargs=}")
59+
self.state.a += 10
3460

35-
@ctrl.add("alias_2")
36-
def method_3(*args, **kwargs):
37-
print(f"Server: method_3 {args=} {kwargs=}")
38-
state.a += 3
3961

62+
def main():
63+
app = Events()
64+
app.server.start()
4065

41-
def method_4(*args, **kwargs):
42-
print(f"Server: method_4 {args=} {kwargs=}")
43-
state.a += 10
44-
45-
46-
# -----------------------------------------------------------------------------
47-
# UI setup
48-
# -----------------------------------------------------------------------------
49-
50-
with DivLayout(server):
51-
html.Div(
52-
"State a={{ a }}", style="padding: 20px; margin: 20px; border: solid 1px #333;"
53-
)
54-
html.Button("Method 1", click=method_1)
55-
html.Button("Method 2", click=(method_2, "['hello', 'world']"))
56-
html.Button("Method 3", click=(method_3, "[1, 2]", "{ x: 3, y: 4 }"))
57-
html.Button("alias_1", click=(ctrl.alias_1, "[2]", "{ z: 4 }"))
58-
html.Button("alias_2", click=(ctrl.alias_2, "[3]", "{ z: 5 }"))
59-
html.Button("alias_3", click=(ctrl.alias_3, "[4]", "{ z: 6 }"))
60-
html.Button("a+", click="a+=1")
61-
62-
63-
# Can be defined after usage
64-
ctrl.alias_3 = method_4
65-
66-
# -----------------------------------------------------------------------------
67-
# start server
68-
# -----------------------------------------------------------------------------
6966

7067
if __name__ == "__main__":
71-
server.start()
68+
main()

‎examples/core_features/reserved_state.py‎

100644100755
Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,47 @@
1+
#!/usr/bin/env -S uv run --script
2+
#
3+
# /// script
4+
# requires-python = ">=3.10"
5+
# dependencies = [
6+
# "trame",
7+
# ]
8+
# ///
19
import time
210

3-
from trame.app import get_server
11+
from trame.app import TrameApp
412
from trame.ui.html import DivLayout
513
from trame.widgets import html
614

7-
# -----------------------------------------------------------------------------
8-
# Trame app
9-
# -----------------------------------------------------------------------------
1015

11-
server = get_server()
12-
count = 1
16+
class ReservedState(TrameApp):
17+
def __init__(self, server=None):
18+
super().__init__(server)
19+
self._count = 1
20+
self._build_ui()
1321

22+
def make_server_busy(self):
23+
time.sleep(1)
1424

15-
def make_server_busy():
16-
time.sleep(1)
25+
def update_title(self):
26+
self.state.trame__title = f"T({self._count})"
27+
self._count += 1
1728

29+
def update_favicon(self):
30+
self.state.trame__favicon = f"https://picsum.photos/id/{self._count}/32/32"
31+
self._count += 10
1832

19-
def update_title():
20-
global count
21-
server.state.trame__title = f"T({count})"
22-
count += 1
33+
def _build_ui(self):
34+
with DivLayout(self.server) as self.ui:
35+
html.Div("trame__busy: {{ trame__busy }}")
36+
html.Button("Make server busy", click=self.make_server_busy)
37+
html.Button("Update title", click=self.update_title)
38+
html.Button("Update favicon", click=self.update_favicon)
2339

2440

25-
def update_favicon():
26-
global count
27-
server.state.trame__favicon = f"https://picsum.photos/id/{count}/32/32"
28-
count += 10
41+
def main():
42+
app = ReservedState()
43+
app.server.start()
2944

3045

31-
# -----------------------------------------------------------------------------
32-
# UI setup
33-
# -----------------------------------------------------------------------------
34-
35-
with DivLayout(server) as layout:
36-
html.Div("trame__busy: {{ trame__busy }}")
37-
html.Button("Make server busy", click=make_server_busy)
38-
html.Button("Update title", click=update_title)
39-
html.Button("Update favicon", click=update_favicon)
40-
41-
42-
# -----------------------------------------------------------------------------
43-
# start server
44-
# -----------------------------------------------------------------------------
45-
4646
if __name__ == "__main__":
47-
server.start()
47+
main()

‎examples/core_features/state.py‎

100644100755
Lines changed: 36 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,16 @@
1-
from trame.app import get_server
1+
#!/usr/bin/env -S uv run --script
2+
#
3+
# /// script
4+
# requires-python = ">=3.10"
5+
# dependencies = [
6+
# "trame",
7+
# ]
8+
# ///
9+
from trame.app import TrameApp
10+
from trame.decorators import change
211
from trame.ui.html import DivLayout
312
from trame.widgets import html
413

5-
# -----------------------------------------------------------------------------
6-
# Trame app
7-
# -----------------------------------------------------------------------------
8-
9-
server = get_server()
10-
state = server.state
11-
12-
# -----------------------------------------------------------------------------
13-
# State setup
14-
# -----------------------------------------------------------------------------
15-
16-
# Creating new entries to the shared state
17-
state.a = 1
18-
state["b"] = 2
19-
20-
# Force state.d to be client side only
21-
state.client_only("b")
22-
# state.trame__client_only += ["b"]
23-
24-
# -----------------------------------------------------------------------------
25-
# UI setup
26-
# -----------------------------------------------------------------------------
27-
2814

2915
# UI helper to extent layout
3016
def create_ui_for_state_var(name):
@@ -42,24 +28,36 @@ def create_ui_for_state_var(name):
4228
html.Button(f"set({name}=5)", click=f"set('{name}', 5)")
4329

4430

45-
# Start with some UI to control a
46-
with DivLayout(server) as layout:
47-
create_ui_for_state_var("a")
48-
create_ui_for_state_var("b")
31+
class StateUsage(TrameApp):
32+
def __init__(self, server=None):
33+
super().__init__(server)
34+
self.state_setup()
35+
self._build_ui()
36+
37+
def state_setup(self):
38+
# Creating new entries to the shared state
39+
self.state.a = 1
40+
self.state["b"] = 2
41+
42+
# Force state.d to be client side only
43+
self.state.client_only("b")
44+
# self.state.trame__client_only += ["b"]
4945

50-
# -----------------------------------------------------------------------------
51-
# State Listener
52-
# -----------------------------------------------------------------------------
46+
def _build_ui(self):
47+
with DivLayout(self.server) as self.ui:
48+
create_ui_for_state_var("a")
49+
create_ui_for_state_var("b")
5350

51+
@change("a", "b")
52+
def state_change(self, a, b, **_):
53+
"""State listener"""
54+
print(f"State updated a={a} b={b}")
5455

55-
@state.change("a", "b")
56-
def state_change(a, b, **kwargs):
57-
print(f"State updated a={a} b={b}")
5856

57+
def main():
58+
app = StateUsage()
59+
app.server.start()
5960

60-
# -----------------------------------------------------------------------------
61-
# start server
62-
# -----------------------------------------------------------------------------
6361

6462
if __name__ == "__main__":
65-
server.start()
63+
main()

0 commit comments

Comments
 (0)