html5 Library

This is a presentation with some examples about how to use our HTML5 library to write fast, extensible and modular web-apps in Python!


Start presentation

What is html5?

  • Python HTML5-DOM abstraction API
  • Used to create client-side Web-Apps running in the browser and written in Python
  • Formerly used by ViUR/vi as replacement for Pyjamas
  • ...which is a definitive benefit for whole development process!

Latest developments

  • Stand-alone library
  • Built-in HTML-parser
  • Utility functions
  • Pre-defined dialogs and ViUR ignite integration
  • Optimized to work with Pyodide
  • ... but also works with minor changes in other environments (PyJS, Transcrypt)

Fundamentals

  • Every html5.Widget corresponds to a DOM-widget
  • html5.Widget() is super-class for all elements
  • HTML-Elements are simply called e.g. html5.Div(), html5.Li(), html5.Input()*
  • Attributes accessable via index widget["attribute"]
  • Helper functions like Widget.hide(), Widget.disable(), Widget.addClass()

(*) Always only uppercase first letter, rest is lowercase, therefore html5.Textarea()


Inheritance is normal

  • Inherit from basic widgets to implement custom behavior

```python class HelloWorldSayer(html5.Div): def init(): super().init("

Hello World

") self.addClass("i-am-special") self.sinkEvent("onMouseOver") self.disable()

def onMouseOver(self, event):
    logging.info("You're over me!")

html5.Body().appendChild(HelloWorldSayer()) ```


Widget.appendChild()

  • Used to stack elements
  • Accepts other widgets, HTML-Code, compiled HTML-code, atomic values
  • Widget.prependChild() and Widget.insertChild() operate analogously

python ul = html5.Ul() ul.appendChild("<li>lol</li>") ul.prependChild(html5.Li(1337 * 42)) ul.appendChild("<li>me too</li>", html5.Li("same as I"))


Events

  • Widget.sinkEvent() sinks events to be recognized
  • html5.utils.doesEventHitWidgetOrChildren()
  • Use event.stopPropagate() and event.preventDefault() to delegate event bubbling

```python def Clicker(html5.Div): def init(): super().init("Hit me!") self.sinkEvent("onClick")

def onClick(self, event):
    html5.ext.Alert("You clicked me!")

```


HTML parser & interpreter

  • html5.fromHTML() calls generic HTML parser (returns widget list)
  • Widget.fromHTML() calls Widget-bound HTML parser (returns widget list)
  • html5.parseHTML() parses HTML for faster interpretation (returns HtmlAst)

python html5.Body.fromHTML("""<input [name]="input" class="ignt-input">""")

  • [name] binds associated name to binder, e.g. html5.Body().input
  • Use appendTo- and bindTo-arguments to change or disable appending and binding target
  • Use **kwargs-arguments to pass in variable value replaced in attributes and plain text

```python

Let's bind something added to the body to our own widget...

html5.Body.fromHTML("""""", bindTo=self)

Let replace some text

self.appendChild("

{{text}}

", text="Hello World") ```

  • Widget constructor allows for direct parameters passed to Widget.fromHTML()

Thank you!

Any questions?