Html Module

class epyk.core.html.Html.Body(report, vals, html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, css_attrs: Optional[dict] = None)

Add a footer to the page.

Parameters:

components –

add_header(components: Html, **kwargs)

Add a header to the page.

Parameters:

components –

add_template(css: Optional[dict] = None, defined_style: Optional[str] = None)

Add an extra layer.

Usage:

page = pk.Page()
template = page.body.add_template(defined_style="margins")
template.style.css.background = "white"

page.body.add_template(css={"background": "white"}, defined_style="doc")
Parameters:

  • css – Optional. The CSS attributes to be added to the HTML component

  • defined_style – Optional. A predefined style attached to the style property

property dom: JsHtml

Return all the Javascript functions defined for an HTML Component.

Those functions will use plain javascript by default.

Returns:

A Javascript Dom object

fromConfig(js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, components: Optional[List[HtmlModel]] = None, lang: Optional[str] = 'eng', end_point: str = '/static/configs', sync: bool = True, filename: Optional[str] = None)

Load teh configuration file in order to fill the templates with static data.

This will allow to externalise the configuration and design rich web templates.

Do not forget to use CTRL+F5 in order to refresh the browser cache to get the updates.

Usage:

title = page.ui.title(html_code="title")
page.body.onReady([
  page.body.fromConfig(components=[title], end_point="/static", lang=None)
])
Parameters:

  • js_funcs – Optional. The various transformations to be triggered from the configuration data

  • components – Optional. The various HTML Components to be updated from the configuration file

  • lang – Optional. The default lang for the configuration

  • end_point – Optional. The url for the configuration files

  • sync – Optional. Specify if the type of loading event

  • filename – Optional. The filename for the configuration

loading(status: bool = True, label: str = 'Loading...', component=None, z_index: int = 500, attrs: Optional[dict] = None)

Display a loading page.

Usage:

page.body.loading(),
...
page.body.loading(False)
Parameters:

  • status – Optional. A flag to specify the status of the loading event

  • z_index – Optional. Specifies the stack order of an element

  • label – Optional.

  • component – Optional.

  • attrs – Optional.

onLoad(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Add a JavaScript function in the builder section which correspond to the JavaScript onload.

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

onReady(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Add set of event / actions which will be triggered after the build of the object.

usually this can be used to add js functions on a chart or a table.

Usage:

network = page.ui.charts.vis.network()
network.onReady([
  network.js.setData({"nodes": [{"id": 0, "label": "test"}], "edges": []}),
])
Parameters:

  • js_funcs – Javascript function to be added once the object is built

  • profile – Optional. A flag to set the component performance storage

scroll(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

The onscroll event occurs when an element’s scrollbar is being scrolled.

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The source target for the event

set_background(start_color: Optional[str] = None, end_color: Optional[str] = None, from_theme: bool = False)

Change the body background color.

Usage:

page.body.set_background("#101626", "#374F67")
Parameters:

  • start_color – Optional. The first code color

  • end_color – Optional. The last code color

  • from_theme – Optional. Default to the code colors defined in the theme

set_content(page: PageModel, page_content: str)

Function to allow the templating of the report.

This can be overridden by a generic class which can be shared within a set of report

Parameters:

  • page – The main report object

  • page_content – The html content of the page

Returns:

The Body HTML object

property style: ClassPage

A property to the CSS style of the DOM component.

Each component will have default CSS style but they can be overridden.

property template

Shortcut to the body template component.

This will just be an intermediate div tag on which all the component will be attached.

Usage:

page = pk.Page()
page.body.template.margins(5)
page.body.template.style.css.background = "white"

# Add a predefined template
page.body.template.style.configs.doc(max_width=900, background="white")
class epyk.core.html.Html.Components
add(component: HtmlModel)

Standard way to add a component to the rendered dictionary.

Parameters:

component – HTML component.

css(attrs: dict)

Set the CSS style for all the inner components.

Parameters:

attrs – The CSS attributes.

class epyk.core.html.Html.EventTouch(page)
cancel(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

The touchcancel event occurs when the touch event gets interrupted.

Different devices will interrupt a touch event at different actions, and it is considered good practice to include this event to clean up code if this “error” should occur.

Usage:

cancel([page.js.alert("Test")])

Related Pages:

Parameters:

  • js_funcs – Javascript functions.

  • profile – Optional. A flag to set the component performance storage.

  • source_event – Optional. The source target for the event.

end(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

The touchend event occurs when the user removes the finger from an element.

Note: The touchend event will only work on devices with a touch screen.

Tip: Other events related to the touchend event are:

Usage:

end([page.js.alert("Test")])

Related Pages:

Parameters:

  • js_funcs – Javascript functions.

  • profile – Optional. A flag to set the component performance storage.

  • source_event – Optional. The source target for the event.

move(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

The touchmove event occurs when the user moves the finger across the screen.

The touchmove event will be triggered once for each movement, and will continue to be triggered until the finger is released.

Usage:

move([page.js.alert("Test")])

Related Pages:

Parameters:

  • js_funcs – Javascript functions.

  • profile – Optional. A flag to set the component performance storage.

  • source_event – Optional. The source target for the event.

start(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

The touchstart event occurs when the user touches an element.

Note: The touchstart event will only work on devices with a touch screen.

Tip: Other events related to the touchstart event are:

Usage:

start([page.js.alert("Test")])

Related Pages:

Parameters:

  • js_funcs – Javascript functions.

  • profile – Optional. A flag to set the component performance storage.

  • source_event – Optional. The source target for the event.

swap(js_funcs_left: Union[List[Union[str, JsDataModel]], str], js_funcs_right: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = False, source_event: Optional[str] = None)

Add swap event functions.

Parameters:

  • js_funcs_left – Javascript functions.

  • js_funcs_right – Javascript functions.

  • profile – Optional. A flag to set the component performance storage.

  • source_event – Optional. The source target for the event.

class epyk.core.html.Html.Html(page: PageModel, vals, html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[List[Union[str, JsDataModel]], str]] = None, css_attrs: Optional[dict] = None)

Parent class for all the HTML components. All the function defined here are available in the children classes. Child class can from time to time re implement the logic but the function will always get the same meaning (namely the same signature and return).

add(component: HtmlModel)

Add items to a container.

The added HTML component will not be managed by the page by default. This means it might not be visible on the JavaScript page if it is not by default managed by the main HTML component.

For example containers are designed to handle subcomponents.

Usage:

div = page.ui.div()
div.add(page.ui.button("Run"))
Parameters:

component – Component added to the val main component

add_banner(component: HtmlModel, css: Optional[dict] = None)

Add a banner to a component.

This will change the position of the container.

Parameters:

  • component – The banner component

  • css – Optional. A dictionary with the CSS style to be added to the component

add_checkbox(flag: bool, css: Optional[dict] = None, attrs: Optional[dict] = None, position: str = 'before')

Add an elementary checkbox component.

Parameters:

  • flag – The state of the checkbox component

  • css – Optional. The CSS style to be added to the component

  • attrs – Optional. The HTML tag attributes

  • position – Optional. Specific Python options available for this component

add_helper(text: str, css: Optional[dict] = None)

Add an elementary helper icon.

The helper is not managed by the main page and should be written in the component.

Parameters:

  • text – The helper content

  • css – Optional. The CSS style to be added to the component

add_icon(text: str, css: Optional[dict] = None, position: str = 'before', family: Optional[str] = None, html_code: Optional[str] = None)

Add an icon to the HTML object.

Usage:

checks.title.add_icon("wrench") # For cross family icon definition
checks.title.add_icon("fas fa-align-center") # for font awesome icon
Parameters:

  • text – The icon reference from font-awesome website

  • css – Optional. A dictionary with the CSS style to be added to the component

  • position – Optional. The position compared to the main component tag

  • family – Optional. The icon framework to be used (preferred one is font-awesome)

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

Returns:

The Html object.

add_input(text: str, css: Optional[dict] = None, attrs: Optional[dict] = None, position: str = 'before', options: Optional[Union[bool, dict]] = None)

Add an elementary input component.

Parameters:

  • text – The title content

  • css – Optional. The CSS style to be added to the component

  • attrs – Optional. The HTML tag attributes

  • position – Optional. Specific Python options available for this component

  • options – Optional. Specific Python options available for this component

add_label(text: str, css: Optional[dict] = None, position: str = 'before', for_: Optional[str] = None, html_code: Optional[str] = None, options: Optional[Union[bool, dict]] = None)

Add an elementary label component.

Related Pages:

Parameters:

  • text – The label content

  • css – Optional. A dictionary with the CSS style to be added to the component

  • position – Optional. The position compared to the main component tag

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

  • options – Optional. Specific Python options available for this component

  • for – Optional. Specifies which form element a label is bound to

Add an elementary label component.

Usage:

div = page.ui.div()
div.add_link("test.py", name="Click to go to the test report")
Parameters:

  • text – The value of the link displayed in the page

  • url – Optional. The URL path

  • script_name –

  • report_name –

  • name –

  • icon –

  • css – Optional. A dictionary with the CSS style to be added to the component

  • position – Optional. The position compared to the main component tag

  • options –

add_menu(context_menu: HtmlModel)

Attach a context menu to an existing component. A context menu must have a component attached to otherwise the report will not be triggered.

Parameters:

context_menu – A Python context menu object

add_options(options: Optional[Union[bool, dict]] = None, name: Optional[str] = None, value: Optional[str] = None)

Change the Javascript options of the component.

This will change the options sent to the Javascript.

Parameters:

  • options – Optional. the extra options to be added to the component

  • name – Optional. The key. The option name

  • value – Optional. The value. The option value

Returns:

self to allow the chains

add_span(text: str, css: Optional[Union[bool, dict]] = None, position: str = 'before', html_code: Optional[str] = None, i: Optional[int] = None)

Add an elementary span component.

Related Pages:

Parameters:

  • text – The Span content

  • css – Optional. The CSS style to be added to the component

  • position – Optional. The position compared to the main component tag

  • html_code – Optional. An identifier for this component (on both Python and Javascript side)

  • i – Optional. The index of the span element to be created

add_style(css_classes: Optional[Union[list, str]] = None, css_attrs: Optional[dict] = None, clear_first: bool = False, keep_css_keys: Optional[tuple] = ('width', 'height'))

Add CSS styles (inline and classes) to the component.

This function could also remove all the predefined CSS style first. To create inline CSS it will use the underlying css function.

Parameters:

  • css_classes – Optional. The CSS class reference

  • css_attrs – Optional. The CSS attributes

  • clear_first – Optional. Remove all the predefined CSS Inline style and classes for the component

  • keep_css_keys – Optional. List of attributes to maintain (default width and height)

add_title(text: str, level: Optional[int] = None, css: Optional[dict] = None, position: str = 'before', options: Optional[Union[bool, dict]] = None)

Add an elementary title component.

Parameters:

  • text – The title content

  • level – Optional. The level of title

  • css – Optional. The CSS style to be added to the component

  • position – Optional. The position compared to the main component tag

  • options – Optional. Specific Python options available for this component

append_child(component: HtmlModel, profile: Optional[Union[bool, dict]] = None)

Wrapper to the Javascript method appendChild to append an HTML component.

Usage:

for i in range(10):
  component = page.ui.texts.label("Add Label %s" % i).css({"width": "100%", "display": 'block'})
  select.append_child(component)

Related Pages:

Parameters:

  • component – The html component

  • profile – Optional. A flag to set the component performance storage

Returns:

The HTML component.

property aria: Aria

Accessible Rich Internet Applications is a [HTML] specification module. Web developers MAY use the ARIA role and aria-* attributes on HTML elements.

Related Pages:

build(data: Union[str, JsDataModel, float, dict, list, bool] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, component_id: Optional[str] = None, dataflows: List[dict] = None)

Return the JavaScript fragment to refresh the component content.

Usage:

dt = page.ui.rich.update()
page.ui.button("Update").click([dt.refresh()])
Parameters:

  • data – Optional. Component data

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • component_id – Optional. The object reference ID

  • dataflows – Chain of data transformations

build_from_url(options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, component_id: Optional[str] = None, dataflows: Optional[List[dict]] = None)

Return the JavaScript fragment to refresh the component content from url parameters. This could be usually used at the start when component is loaded.

Data will come from the url from the html_code defined for this component.

Usage:

dt = page.ui.rich.update(html_code='updt')
page.ui.button("Update").onReady([dt.build_from_url()])
Parameters:

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • component_id – Optional. The object reference ID

  • dataflows – Chain of data transformations

click(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The onclick event occurs when the user clicks on an element.

Usage:

div = page.ui.div()
div.click([
  page.js.alert("This is a test")
])

Related Pages:

Parameters:

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

  • source_event – Optional. The source target for the event

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property component: Component

The static component definition on the Javascript Side.

This will be then used by the different framework to define the elementary bricks on which the complex component will be based on.

property content

Get the HTML content of the component as a string.

contextMenu(menu, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None)

Attach a context menu to a component and set a function to called before the display.

TODO Test context menu

Parameters:

  • menu –

  • js_funcs – Optional. The Javascript functions

  • profile – Optional. A flag to set the component performance storage

css(key: Optional[Union[str, dict]] = None, value: Optional[str] = None, reset: bool = False)

Change the CSS Style of a main component. This is trying to mimic the signature of the Jquery css function.

Related Pages:

Parameters:

  • key – Optional. The key style in the CSS attributes (Can also be a dictionary)

  • value – Optional. The value corresponding to the key style

  • reset – Optional. Specify if the CSS styles need to be emptied first

Returns:

The python object itself.

dblclick(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

The ondblclick event occurs when the user double-clicks on an element.

Related Pages:

Parameters:

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function on the console

  • source_event – Optional. The source target for the event

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

property dom: JsHtml

Return all the Javascript functions defined for an HTML Component. Those functions will use plain javascript available for a DOM element by default.

Usage:

div = page.ui.div(htmlCode="testDiv")
print(div.dom.content)
Returns:

A Javascript Dom object.

draggable(js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, options: Optional[Union[bool, dict]] = None, profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Set the component as a draggable item.

Parameters:

  • js_funcs – Javascript functions

  • options – Optional. Specific Python options available for this component

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The source target for the event

drop(js_funcs: Union[List[Union[str, JsDataModel]], str], prevent_default: bool = True, profile: Optional[Union[bool, dict]] = None)

Add a drag and drop property to the element.

Usage:

d = page.ui.div()
d.drop([page.js.objects.data.toRecord([1, 2, 3, 4], "result")])
Parameters:

  • js_funcs – A Javascript Python function

  • prevent_default – Optional. Specify if the event should have a default behaviour on the page

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

Returns:

Return self to allow the chaining

event_fnc(event: str)

Function to get the generated JavaScript method in order to then reuse it in other components.

This will return the event function in a string already transpiled.

Parameters:

event – The event function

focusout(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

The onfocusout event occurs when the user select an element.

Usage:

div = page.ui.div()
div.focusout([
  page.js.alert("This is a test")
])

Related Pages:

Parameters:

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function in the console

  • source_event – Optional. The source target for the event

get_attrs(with_id: bool = True, css_class_names: Optional[List[str]] = None)

Return the string line with all the attributes.

All the attributes in the div should use double quote and not simple quote to be consistent everywhere in the framework and also in the javascript. If there is an inconsistency, the aggregation of the string fragments will not work

Parameters:

  • with_id – Optional. Add the ID tag. This is handled by the framework. (Default true)

  • css_class_names – Optional. The Python class names

Returns:

A string with the dom attributes

hover(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Add a mouse hover event on the component.

Usage:

div = page.ui.div()
div.hover([
  page.js.alert("This is a test")
])
Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The source target for the event

html()

Render the HTML component to the JavaScript.

This will be the main function called by the page to render all the component.s

property htmlCode: str

Unique reference for any HTML component in the framework. This must be defined in the interface and cannot be changed in the report.

This reference can be used in the Python to get the html object from components in the page but it is also used in any web framework by the JavaScript to get the DOM object and apply the necessary transformations.

There is no setter for this property in order to ensure a consistency in Python and JavaScript.

Usage:

div = page.ui.div(htmlCode="testDiv")
print(div.htmlCode)
property html_code: str

Unique reference for any HTML component in the framework. This must be defined in the interface and cannot be changed in the report.

This reference can be used in the Python to get the html object from components in the page but it is also used in any web framework by the JavaScript to get the DOM object and apply the necessary transformations.

There is no setter for this property in order to ensure a consistency in Python and JavaScript.

Usage:

div = page.ui.div(html_code="testDiv")
print(div.html_code)
insert(i: int, component: HtmlModel)

Add a component to the sub list of components for a container at a defined position. This is a user-friendly shortcut to the self.val feature.

Usage:

comp_title.style.css.float = "left"
comp_title.style.css.font_size = self.page.body.style.globals.font.normal(-2)
comp_title.style.css.color = self.page.theme.greys[-2]
menu_items.insert(0, comp_title)
Parameters:

  • i – The position for the component in the container

  • component – Component added to the val main component

property js: JsBase

Javascript base function.

Return all the Javascript functions defined in the framework. THis is an entry point to the full Javascript ecosystem.

Usage:

div = page.ui.div(htmlCode="testDiv")
div.click([
  div.js.alert("Hello")
])
Returns:

A Javascript object

property keydown: KeyCode

The onkeydown event occurs when the user is pressing a key (on the keyboard).

Related Pages:

property keypress: KeyCode

The onkeypress event occurs when the user presses a key (on the keyboard).

Related Pages:

property keyup: KeyCode

The onkeypress event occurs when the user presses a key (on the keyboard).

Related Pages:

mouse(on_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, out_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Wrapper function fot the mouse event.

This function will cover the on mouse hover event and mouse out.

More specific events are possible using the generic out function.

Tip: As function are defined to be chaining in most of the components use .r to get the string representation and clean the cache.

Usage:

span.mouse([
    span.dom.css("color", "red"),
    span.dom.css("cursor", "pointer").r],
  span.dom.css("color", "blue").r)
Parameters:

  • on_funcs – Optional. The Javascript events

  • out_funcs – Optional. The Javascript events

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The source target for the event

Returns:

self to allow the chains.

move()

Move the component to this position in the page.

on(event: str, js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None, on_ready: bool = False)

Add an event to the document ready function.

This is to mimic the Jquery on function.

Tip: use the r function to not have side effects when Python is building the JavaScript:

span.on(“mouseover”, span.dom.css(“color”, “red”).r) span.on(“mouseleave”, span.dom.css(“color”, “blue”))

Related Pages:

Parameters:

  • event – The Javascript event type from the dom_obj_event.asp

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

  • source_event – Optional. The source target for the event

  • on_ready – Optional. Specify if the event needs to be trigger when the page is loaded

Returns:

self to allow the chains.

onReady(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None)

Add set of event / actions which will be triggered after the build of the object. Usually this can be used to add js functions on a chart or a table.

Usage:

network = page.ui.charts.vis.network()
network.onReady([
  network.js.setData({"nodes": [{"id": 0, "label": "test"}], "edges": []}),
])
Parameters:

  • js_funcs – Javascript functions

  • profile – A flag to set the component performance storage

property options: Options

Property to set all the possible object for a button.

Usage:

div = page.ui.div(htmlCode="testDiv")
div.options.inline = True
paste(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event=None, components=None)

Add a paste event to the component.

Parameters:

  • js_funcs – Javascript functions

  • profile – Optional. A flag to set the component performance storage

  • source_event – Optional. The source target for the event

  • components – Optional.

prepend_child(component: HtmlModel, profile: Optional[Union[bool, dict]] = None)

Wrapper to the Javascript method insertChild to add an HTML component.

Usage:

for i in range(10):
  comp = page.ui.texts.label("Add Label %s" % i).css({"width": "100%", "display": 'block'})
  select.prepend_child(comp)

Related Pages:

Parameters:

  • component – The html component

  • profile – Optional. A flag to set the component performance storage

Returns:

The HTML component.

refresh()

Component refresh function. Javascript function which can be called in any Javascript event.

Tip: This function cannot be used in a plan Python section but in a JavaScript one defined in an event for example.

scroll(js_funcs: Union[List[Union[str, JsDataModel]], str], profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

The onscroll event occurs when an element’s scrollbar is being scrolled.

Related Pages:

Parameters:

  • js_funcs – A Javascript Python function

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

  • source_event – Optional. The source target for the event

set_attrs(attrs: Optional[dict] = None, name: Optional[str] = None, value: Optional[Any] = None, remove_if_none: bool = True)

Function to update the internal dictionary of object attributes. Those attributes will be used when the HTML component will be defined.

Basically all sort of attributes can be defined here: CSS attributes, but also data, name… Either the attrs or the tuple (name, value) can be used to add information to the dom object.

All the attributes should be Python object which are ready to use on the Javascript side. For example True should be written ‘true’.

Tips: It is possible to use the data- attributes to store any kind of information in the dom.

Related Pages:

Parameters:

  • attrs – Optional. All the HTML tags attributes

  • name – Optional. A python string with the name of the attribute

  • value – Optional. A python string with the value of the attribute

  • remove_if_none – Optional. Remove attribute if true

set_builder(name: str, all_components: bool = True)

Change the default builder definition.

This method can be used to externalise the JavaScript expression to dedicated modules. If nothing is defined the default one defined in the class property _js__builder__ will be used.

Usage:

page = pk.Page()
page.properties.js.add_text('''
function NewButton(htmlObj, data, options){
  htmlObj.style.color = "red"; htmlObj.innerHTML = data}
''')
page.properties.js.set_constructor("NewButton")
btn = page.ui.button("click")
btn.set_builder("NewButton")
btn2 = page.ui.button("click 2")
btn.click([btn.build("Clicked"), btn2.build("Clicked")])
Parameters:

  • name – The builder name (alias but also function name)

  • all_components – Apply the builder change to all components generated from this class

sticky(anchor: HtmlModel, css_attrs: Optional[dict] = None)

Change the CSS style of the component to be sticky on the page.

This will add a class to the component. It is possible to set some attributes in order to change its style.

Parameters:

  • anchor – the component which will be used to check the position

  • css_attrs – Optional. The CSS attributes of the component once sticky

property style: ClassHtml

The CSS style (class and attributes) of the HTML component. This property will allow to custom any component in the page.

Usage:

div = page.ui.div()
div.style.css.background = 'black'
subscribe(socket, channel: str, data=None, options: Optional[dict] = None, js_funcs: Optional[Union[List[Union[str, JsDataModel]], str]] = None, profile: Optional[Union[bool, dict]] = None)

Subscribe to a socket channel.

Data received from the socket are defined as a dictionary with a field data.

The content of data will be used by this component.

Related Pages:

Parameters:

  • socket – Socket. A python socket object

  • channel – The channel on which events will be received

  • data –

  • options – Optional. Specific Python options available for this component

  • js_funcs – Optional. Javascript functions

  • profile – Optional. A flag to set the component performance storage

property touch: EventTouch

Shortcut property to all the Touch event.

Events that occur when user touches a touch-based device, belongs to the TouchEvent Object.

Related Pages:

Usage:

component.touch.
property val

Property to get the jquery value of the HTML object in a python HTML object.

This method can be used in any jsFunction to get the value of a component in the browser. This method will only be used on the javascript side, so please do not consider it in your algorithm in Python.

Returns:

Javascript string with the function to get the current value of the component

viewport(js_funcs: Union[List[Union[str, JsDataModel]], str], options: Optional[dict] = None, profile: Optional[Union[bool, dict]] = None, source_event: Optional[str] = None)

Trigger an event when the component is visible.

The result of the event can be on the component itself (the observer) or another component (to load / add items).

Usage:

text = page.ui.text("This is a text")
text.viewport([
  page.js.delay([text.build("Change the value")], 5),
  text.dom.css("color", "red")
])
Parameters:

  • js_funcs – A Javascript Python function

  • options – Optional.

  • profile – Optional. Set to true to get the profile for the function on the Javascript console

  • source_event – Optional. The source target for the event

with_profile(profile: Optional[Union[bool, dict]], event: Optional[str] = None, element_id: Optional[str] = None) → dict

Return the profile options.

Parameters:

  • profile – Optional. A flag to set the component performance storage.

  • event – Optional. The event name.

  • element_id – Optional. A DOM component reference in the page.

class epyk.core.html.options.Options(component: HtmlModel, attrs: Optional[dict] = None, options: Optional[dict] = None, js_tree: Optional[dict] = None, page: Optional[PageModel] = None)
property builder

Add a JavaScript Builder function to the options.

This will be used to automatically map the Python component to its corresponding JavaScript builder function used by the build method.

Usage:

but = page.ui.button()
but.options.builder = "Button"
Prop value:

The JavaScript builder function name.

property config_default

The default value for the configuration in case of template.

Default value is an empty string.

Usage:

component.options.config_default = {"value": "test"}
config_html()

Return the HTML options used by the python and passed to the HTML.

Those options will not be available in the JavaScript layer and they are only defined either to build the HTML from Python or to set some HTML properties.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

config_js(attrs: Optional[dict] = None)

Return the JavaScript options used by the builders functions.

Builder functions can be defined in the framework or external from the various packages.

The returned dictionary is a copy so it can be changed or used in other processes. To change the internal component property, the options property should be used.

Parameters:

attrs – Optional. The extra or overridden options

custom_config(name: str, value: Any, js_type: bool = False)

Add a custom JavaScript configuration.

Usage:

chart = page.ui.charts.apex.scatter()
chart.options.chart.zoom.custom_config("test", False)
Parameters:

  • name – The key to be added to the attributes

  • value – String or JString. The value of the defined attributes

  • js_type – Optional. Specify if the parameter is a JavaScript fragment

details()

Retrieve the defined properties details.

This function will return a dictionary with all the component attributes (required and optional) ones. It will provide the full available description of those components.

Usage:

but = page.ui.button()
pprint.pprint(but.options.details(), indent=4)
from_json(vals: dict, schema: Optional[dict] = None)

Load the option schema for a component from a json string.

TODO: add more feature to handle functions and enumeration

Parameters:

  • vals – The input schema

  • schema – The full object schema

has_attribute(cls_obj, name: Optional[str] = None)

Add an extra sub layer to the data structure.

The key in the object representation will be the function name.

Parameters:

  • cls_obj – Class. The sub data class used in the structure definition

  • name – The sub attribute name

isJsContent(property_name: str)

Check if the content of a property is defined to always be a JavaScript fragment.

Thus the framework will not convert it to a Json content.

Usage:

div = page.ui.div()
print(div.options.isJsContent("inline"))
Parameters:

property_name – The property name

property managed

Boolean flag to set if the component needs to be added to the page.

If set to False the component has to be managed manually in the page.

Usage:

but = page.ui.button()
but.options.managed = False
Prop bool:

Flag to specify if this component is automatically managed by the page

optional()

Return all options not added to the HTML component by default.

Those are options which will impact either the Python or the JavaScript builders.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.optional(), indent=4)
property profile

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Flag to display / hide warning logs generated by the framework.

required()

Return all the mandatory / required options with the default values.

Those options are added by the framework to provide a default for the HTML components but they can be changed.

System options are also added to this category as they are always available in any HTML components.

To get the full definition of options the details method should be used.

Usage:

but = page.ui.button()
pprint.pprint(but.options.required(), indent=4)
set_attrs(vals: dict)

Set the object internal attributes.

Parameters:

vals – All the attributes to be added to the component

property style

Change some CSS attributes to the internal HTML component.

Related Pages:

Prop values:

The CSS attributes.

update_config(attrs: dict)

Update the option configuration.

Parameters:

attrs – The attributes to set

property verbose

Boolean flag to set if extra logs need to be displayed.

This could help in debugging, default is the page verbose flag (default is false).

Usage:

but = page.ui.button()
but.options.verbose = True
Prop flag:

Boolean. Flag to display / hide warning logs generated by the framework.

class epyk.core.html.Html.Required(page: PageModel)
add(package: str, version: Optional[str] = None, verbose: bool = True)

Add the package to the main page context.

TODO: Use the version number

Parameters:

  • package – The package alias.

  • version – Optional. The package version number.

  • verbose – Optional. Display version details (default True).