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
|
from trame.app import get_server
from trame.widgets import html, client
from trame.ui.html import DivLayout
server = get_server(client_type="vue3")
state, ctrl = server.state, server.controller
dyna_var_count = 1
def revert_message():
state.message = state.message[::-1]
def add_new_var():
global dyna_var_count
state[f"new_var_{dyna_var_count}"] = "hello"
dyna_var_count += 1
# Default UI
with DivLayout(server):
client.Style(".myRedBG { background: red; } body { margin: 0; }")
client.ServerTemplate(
name="loading",
style="width: 50vw; height: 100vh; position: absolute; left: 0%;",
)
client.ServerTemplate(
name="redSide",
style="width: 50vw; height: 100vh; position: absolute; left: 50%;",
)
# ?ui=loading
with DivLayout(server, template_name="loading"):
client.Loading(message="Yes the loading guy...")
# ?ui=redSide
with DivLayout(server, template_name="redSide"):
with html.Div(
"The red side...", classes="myRedBG", style="width: 100%; height: 100%;"
):
eval_js = client.JSEval(
event=("message", "hello world"),
exec="window.alert($event)",
)
ctrl.exec = eval_js.exec
html.Div("{{ message }}")
html.Button("Exec", click=ctrl.exec)
html.Button("Exec with arg", click=(ctrl.exec, "['Yes me']"))
html.Button("Change message", click=revert_message)
html.Br()
html.Button("New var", click=add_new_var)
server.start()
|
