trame.widgets.client module

class trame.widgets.client.ClientStateChange(children=None, **kwargs)

Bases: AbstractElement

Allow the client side to trigger an event when a state element changes.

Parameters:

  • value (str) – Name of the state variable to monitor

  • immediate (bool) – Trigger change right away rather than at nextTick (default: False)

  • trigger_on_create (bool) – If set to true, the change event will be triggered when the client start. (default: False)

  • change (Function or JS expression (event)) – Event triggered when state[value] change

class trame.widgets.client.ClientTriggers(ref='trame_triggers', children=None, **kwargs)

Bases: AbstractElement

Allow to trigger an event on the client side

Parameters:

  • ref – Identifier for the client side DOM elem

  • **kwargs –

    List of events to registers with their callbacks

Built-in events are:

  • mounted

  • created

  • before_destroy

  • before_unmount

  • exit

call(method, *args)

Perform the call on the client

Parameters:

method – Key used in the kwargs at construction time

class trame.widgets.client.DeepReactive(name=None, children=None, **kwargs)

Bases: AbstractElement

Create a deeply reactive state from state variable name. The provided name can not be reactive. It needs to be statically defined in Python like in the example blow.

This component only works with client_type=”vue3”.

with DeepReactive(my_nested_var):

html.Input(v_model=my_nested_var.txt_1) html.Input(v_model=my_nested_var.txt_2)

class trame.widgets.client.Getter(children=None, value_name=None, key_name=None, update_nested_name=None, update_name=None, **kwargs)

Bases: AbstractElement

Provide means to extract a reactive state variable from its name

Parameters:

  • name – Name of the state variable to extract. This can be an expression too.

  • value_name (str) – Name of the JavaScript variable name (default: “value”)

  • key_name – Name for the JavaScript variable that will hold the evaluate expression of the “name” property.

  • update_nested_name – Method name if you aim to update the nested structure.

  • update_name – Method name if you aim to update the full value.

class trame.widgets.client.Handler(*, function: UserDefinedFunction | tuple[str, str] | ExternalScript | str, variable: str = 'input_data', **kwargs)

Bases: AbstractElement

Facilitates the execution of registered JS functions and external scripts.

The Handler simplifies calling client-side logic registered via register_external_script. It manages the execution flow between the Python state and JavaScript functions, providing events to monitor execution status.

Args:
function (UserDefinedFunction | tuple[str, str] | ExternalScript | str):

The JavaScript function to execute. Accepts: - UserDefinedFunction: Obtained from ExternalScript.function. - tuple[str, str]: A (module_name, function_name) pair. - ExternalScript: An object from register_external_script (must

contain exactly one function).

  • str: The registration identifier of an external script.

variable (str): The name of the state variable to be passed as the

primary input to the function.

trigger_on_change (bool, optional): If True, the function is automatically

invoked whenever variable changes. Defaults to True.

inputs (dict, optional): A dictionary of additional key-value pairs

to be passed as arguments to the function. Defaults to None.

Events:

completed: A generic event emitted regardless of the execution outcome. success: Emitted when the function executes and returns successfully. failure: Emitted when the function reports a handled error. error: Emitted when an unhandled exception occurs during execution.

property input_data: str

Get the JS expression that references the handler’s input data.

run(input_var: str) → str

Return a JS expression that will invoke the handler with the provided input_var as argument.

class trame.widgets.client.JSEval(children=None, **kwargs)

Bases: AbstractElement

Provide means to execute JS code

class trame.widgets.client.LifeCycleMonitor(children=None, **kwargs)

Bases: AbstractElement

LifeCycleMonitor is a debug purpose tool to validate a sub-tree get the proper expected life cycle event.

This component allow to print into the client side console when any of the monitored event happen.

Parameters:

  • name – User specific text to easily identify which component the event was coming from.

  • type – console[type](…) so you can use ‘log’, ‘error’, ‘info’, ‘warn’

  • value – Another value that is printed when an event occur

  • events – List of events to monitor such as created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed

class trame.widgets.client.Loading(children=None, **kwargs)

Bases: AbstractElement

Three circle spinning with a message

Parameters:

message – Content of the message

class trame.widgets.client.Script(script_content=None, **kwargs)

Bases: AbstractElement

Provide means to inject a global script tag

update(script_content)

Update style content

property var_name

Name the the state variable used by this widget

class trame.widgets.client.ServerTemplate(children=None, **kwargs)

Bases: AbstractElement

Template content presentation

Parameters:

  • name (str) – Name of the template to display. (default: ‘main’)

  • use_url (bool) – If true, will use the {url_key}= from the url to override the name= attribute.

  • url_key (str) – Name of the key to extract from url for use_url. (default: ‘ui’)

class trame.widgets.client.SizeObserver(_name, **kwargs)

Bases: AbstractElement

SizeObserver allow to monitor the space available in the UI and bind that information onto a state variable.

Parameters:

_name – Name of the state variable to bound the component size to

class trame.widgets.client.Style(css_content=None, **kwargs)

Bases: AbstractElement

Provide means to inject global CSS rules

update(css_content)

Update style content

property var_name

Name the the state variable used by this widget

trame.widgets.client.register_external_script(script_file_path: Path | str, *, function_names: list[str], name: str | None = None, umd: bool = False, umd_global_var_name: str | None = None) → ExternalScript

Register an external script that can be used together with the Handler widget.

Args:
script_file_path (Path | str):

The local of the script you want to register. Can be either a local or a remote script. Accepts: - Path: local path to your script on the filesystem - str: an valid URL to the script

function_names (list[str]): public API of your script that you want to expose to the Handler widget.

Accepts a list of function names that must be defined in your script.

name (str): a registration identifier for your script.

You may use it later to reference your script when instantiating the Handler widget.

umd (bool, optional): If true, your script is considered as a UMD module and treated as such.

For ES module, just keep the default value. Defaults to False.

umd_global_var_name (str | None):

Specify the global variable name the UMD module will use to register itself on the browser window object. Required if and only if umd is set to True. Defaults to None.