# 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](https://github.com/viur-framework/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](https://github.com/iodide-project/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("
", 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}}
", 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](https://github.com/mausbrand/pyodide-app-stub)
- html5 [https://github.com/viur-framework/viur-html5/tree/pyodide](https://github.com/viur-framework/viur-html5/tree/pyodide)
- Documentation needed!
Any questions?
Github Framework
