x burger

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.appendChild(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 vars-argument 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)

--

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

Thank you!

Any questions?

#ilovefs 2020
This website uses cookies and similar technologies on its pages. You automatically confirm in case that you continue to browse through our website. What are cookies? I'm OK with that!