Page

This class is your your main entry point to the epyk framework, this is where you’ll be able to access UI components through the report/ui interfaces or the report/js features. It takes care of writing the body section of your html page and also populating the style and scripts parts.

The below 2 lines of codes will show how to create a page object:

import epyk as pk

page  = pk.Page()

There are 6 main interfaces available through this object which will enable you to build a complete HTML page:

• UI Interface

• components

• Javascript Interface

• Outputs Interface

• Python Interface

• Data Interface

• Web Framework Interfaces

Example

import epyk as pk

page = pk.Page()
page.ui.title("This is a title")
paragraph = page.ui.texts.paragraph("This is a paragraph")
paragraph.click([
    page.js.console("This is a log on the JavaScript side")
])
page.outs.html()

Technical Documentation

class epyk.core.Page.Report(inputs: Optional[dict] = None, script: Optional[str] = None)

Main entry point for any web UI.

This class will store all the HTML components, JavaScript fragments and CSS definition in order to then render a rich web page.

This will allow Python to access the components before the JavaScript on the fly computation to change then according to the input data.

This class will also interface with plain Vanilla JavaScript feature to allow the design and definition of events and / or interactions. Most of the Web documentation in this framework is either coming from w3School or from the various external packages.

property apps: AppRoute

Change the report to a web application.

This will add extra features available on the target framework. For example this HTML page can be transformed to an Angular app, a React App or a Vue one.

Usage:

page = Report()
page.apps.react

property auth: Auth

Auth interface to allow easy sign-in pages.

Usage:

page = Report()
page.auth.

Related Pages:

https://developers.google.com/identity/sign-in/web/sign-in

Returns:

Python Auth Object.

property body: Body

Property that returns the Body element of the HTML page.

Usage:

page = Report()
page.body.onReady([page.js.alert("Loading started")])

property css: Catalog

Returns the set of CSS Classes for the HTML report.

Usage:

page = Report()
page.css.

property data: DataSrc

Python internal data source management.

This can be extended by inheriting from this epyk.core.data.DataSrc.DataSrc and adding extra entry points.

Usage:

page = Report()

Returns:

The framework available data source

dumps(result: dict)

Function used to dump the data before being sent to the Javascript layer.

This function relies on json.dumps with a special encoder in order to work with Numpy array and Pandas data structures.

As NaN is not valid on the Json side those object are not allowed during the dump. It is advised to use fillna() in your script before returning the data to the framework to avoid this issue.

Usage:

page = Report()
page.dumps(result)

Related Pages:

https://docs.python.org/2/library/json.html

Parameters:

result – The python dictionary or data structure

Returns:

The serialised data

property entities: Entities

Shortcut to the HTML Entities.

Those can be added in string in order to improve the render of a text.

Usage:

page = Report()
page.ui.text(page.entities.non_breaking_space)

Related Pages:

https://www.w3schools.com/html/html_entities.asp

framework(name: str)

Flag to change the way code is transpiled in order to fit with the destination framework.

By default the code transpiled will be used from a browser in plain Vanilla Js but this will be extended to then be compatible with other framework in order to simplify the path to production and the collaboration between teams.

Many framework will be compatible like React, Angular, Vue but also some features will be exposed to Kotlin for mobile generation.

This work is still in progress.

Usage:

page = Report()
page.ui.text("This is an example")
page.framework("Vue")

Parameters:

name – The destination framework for the page

get_components(html_codes: Union[list, str])

Retrieve the components based on their ID.

This should be used when the htmlCode is defined for a component.

Usage:

page = Report()
page.ui.button(htmlCode="Button")
but = page.get_components(["Button"])

Parameters:

html_codes – The reference of the HTML components loaded on the page

property headers: Header

Property to the HTML page header.

Usage:

page = pk.Page()
page.headers.meta.viewport({"width": "device-width"})

# Use the default DEV icon.
page.headers.dev()

property icons: IconModel

Change the icons framework used in the page. Defaults.py in the CSS module is to change the framework for all the page generated by the framework.

Usage:

page = pk.Page()
page.icons.family = "bootstrap-icons"
icons = page.ui.menus.icons([
    "bi-1-circle-fill",
    "bi-search-heart-fill",
    "bi-x-circle-fill",
])

property imports: ImportManager

Return the report/import_manager, which allows to import automatically packages for certain components to run.

By default the imports are retrieved online from CDNJS paths. This can be changed by loading the packages locally and switching off the online mode.

Usage:

page = Report()
page.imports.setVersion(page.imports.pkgs.popper_js.alias, "1.00.0")

property js: JsBase

Go to the Javascript section. Property to get all the JavaScript features.

Most of the standard modules will be available in order to add event and interaction to the Js transpiled.

Usage:

page = Report()
page.js.console.log("test")

page.js.accounting.add_to_imports()
page.js.moment.add_to_imports()

Related Pages:

https://www.w3schools.com/js/default.asp

node_modules(path: str, alias: Optional[str] = None, install: bool = False, update: bool = False)

Usage:

:param path: Optional. The nodeJs path.
:param alias: Optional.
:param install: Optional.
:param update: Optional.

onDOMContentLoaded(js_funcs: Union[str, list], profile: Optional[Union[bool, dict]] = False)

The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src=”…”> and <script type=”module”>) have downloaded and executed. It doesn’t wait for other things like images, subframes, and async scripts to finish loading.

Usage:

page = ek.Page()
div = page.ui.div("Simple Div")
page.onDOMContentLoaded([div.dom.css({"border": "1px solid red"})])

Related Pages:

https://developer.mozilla.org/fr/docs/Web/API/Window/DOMContentLoaded_event

Parameters:

• js_funcs – The Javascript functions to be added to this section

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

property outs: PyOuts

Link to the possible output formats for a page.

This will transpile the Python code to web artifacts. Those outputs are standard outputs files in web development.

The property framework should be used to link to other web framework.

Usage:

page = Report()
page.ui.text("This is an example")
page.outs.html()

property properties: Properties

Property to the different Page properties JavaScript and CSS.

property py: PyExt

Python external module section.

Those are pre-defined Python function to simplify the use of the various components.

Usage:

page = Report()
page.py.dates.today()

Related Pages:

https://www.w3schools.com/js/default.asp

register(ext_components: Union[list, dict])

This function allows you to register external Components (namely coming from Pyk Reports) by registering them you this will engrave the object within your report.

The example below will add obj1 and obj2 from an external pyk report previously required, then create a div and then add obj3 from an external file.

Usage:

page = Report()
page.register([obj1, obj2])
page.ui.div('this is a div')
page.register(obj3)

# To register a standalone component
import epyk as ek

class TestComponent(ek.standalone):
  selector = "test-color"
  component_url = "./assets/inputs/test-input.js"
  style_urls = ["./assets/inputs/test-input.css"]
  template_url = "./assets/inputs/test-input.html"

# Add the extra components to the schema
page.register([TestComponent])

Parameters:

ext_components – The external components to be added

property root__script: str

Return the name of the script creating the Page object.

property skins: Skins

Add a special skin to the page.

This could be used for special event or season during the year (Christmas for example).

Usage:

page = pk.Page()
page.ui.text("Hello World !")
page.skins.rains()
page.outs.html_file(name="test", print_paths=True)

property symbols: Symboles

Shortcut to the HTML symbols.

Those can be added in string in order to improve the render of a text.

Usage:

page = Report()
page.ui.text(page.symbols.shapes.BLACK_SQUARE)

Related Pages:

https://www.w3schools.com/html/html_symbols.asp https://www.w3schools.com/charsets/ref_utf_math.asp

property theme: <module 'epyk.core.css.themes.Theme' from '../epyk/core/css/themes/Theme.py'>

Return the currently used report/theme for the report.

Usage:

page = Report()
page.theme = themes.ThemeBlue.Blue

property ui: Components

User Interface section.

All the components which can be used in the dashboard to display the data. Within this object different categories of items can be used like (list, simple text, charts…).

Usage:

page = Report()
page.ui.text("This is a text")

Related Pages:

https://www.w3schools.com/html/default.asp

property web: WebComponents

User Interface section.

All the components which can be used in the dashboard to display the data. Within this object different categories of items can be used like (list, simple text, charts…).

Usage:

page = Report()
page.web

Related Pages:

https://www.w3schools.com/html/default.asp