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!

• Repositorys to start with:
• pyodide-app-stub https://github.com/mausbrand/pyodide-app-stub
• html5 https://github.com/viur-framework/viur-html5/tree/pyodide
• Documentation needed!

Any questions?