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
class HelloWorldSayer(html5.Div):
    def __init__():
        super().__init__("<h1>Hello World</h1>")
        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

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

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)

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

# Let's bind something added to the body to our own widget...
html5.Body.fromHTML("""<input [name]="input" class="ignt-input">""", bindTo=self)
# Let replace some text
self.appendChild("<h2>{{text}}</h2>", text="Hello World")

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

Thank you!

Any questions?