1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
|
from pathlib import Path
from trame.app import get_server
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import client, vuetify3
def load_my_js(server):
# must run before server start
js_file = Path(__file__).with_name("my_utils.js").resolve()
server.enable_module(
dict(
# Path to serve under /my_code
serve={"my_code": str(js_file.parent)},
# JS file(s) to load
scripts=[f"my_code/{js_file.name}"],
)
)
class CustomAddOnJS:
def __init__(self, server=None, table_size=10):
self.server = get_server(server, client_type="vue3")
self.ui = self._build_ui()
# Make sure my js code get loaded on the client side
load_my_js(self.server)
@property
def state(self):
return self.server.state
@property
def ctrl(self):
return self.server.controller
def trigger_alert(self):
self.ctrl.js_eval(f"server({self.state.name})")
def _build_ui(self):
with SinglePageLayout(self.server, full_height=True) as layout:
self.ctrl.js_eval = client.JSEval(
exec="utils.my_code.actions.hello($event)"
).exec
with layout.toolbar:
vuetify3.VTextField(
v_model=("name", "world"),
density="compact",
hide_details=True,
)
vuetify3.VBtn("Local JS", click="utils.my_code.actions.hello(name)")
vuetify3.VBtn("JS from Py", click=self.trigger_alert)
with layout.content:
vuetify3.VTextField(
v_model=("text_1", "1.2"),
# Use our extended trame.utils in template definition
rules=("[utils.my_code.rules.number]",),
)
vuetify3.VTextField(
v_model=("text_2", "2"),
# Use our extended trame.utils in template definition
rules=("[utils.my_code.rules.int]",),
)
def main():
app = CustomAddOnJS()
app.server.start()
if __name__ == "__main__":
main()
|
