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):"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("
  • lol
  • ") ul.prependChild(html5.Li(1337 * 42)) ul.appendChild("
  • me too
  • ", 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("""""") ``` - `[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="Hello World") ``` - Widget constructor allows for direct parameters passed to `Widget.fromHTML()` - # Thank you! - Repositorys to start with: - pyodide-app-stub []( - html5 []( - Documentation needed! Any questions?