x burger

html-parser for html5 (PyJS)

In the latest versions of our html5 library, a new feature was added that allows to parse HTML code from a string, and generates the elements of the provided HTML as html5.Widget() objects and their inherited objects. Take a look at the presentation provided below to get a first introduction...


Start presentation

HTML template for an adventure game

  • Enter name in the input field
  • Output name in both spans
<div class="wrap">
    <div class="left">
        <label>
            Your Name:
            <input type="text" placeholder="Name" maxlengh="20">
        </label>
    </div>
    <div class="right">
        <h2>Hello <span class="name">Name</span></h2>
        Your mission is not easy, <span class="name">Name</span>
    </div>
</div>

Writing the game the old way, part 1

(to be continued...)

import html5

class game(html5.Div):
    def __init__(self, *args, **kwargs):
        super(game, self).__init__()
        self.addClass("wrap")

        left = html5.Div()
        left.addClass("left")
        self.appendChild(left)

        lbl = html5.Label()
        lbl.appendChild("Your Name:")
        left.appendChild(lbl)

        self.input = html5.Input()
        self.input["type"] = "text"
        self.input["placeholder"] = "Name"
        self.input["maxlength"] = "20"
        lbl.appendChild(self.input)

        # more to come...

Writing the game the old way, part 2

Continuation from above!

class game(html5.Div):
    def __init__(self, *args, **kwargs):

        # ...here comes the rest!

        right = html5.Div()
        right.addClass("right")
        self.appendChild(right)

        h2 = html5.H2()
        h2.appendChild("Hello ")
        right.appendChild(h2)

        self.span1 = html5.Span()
        self.span1.addClass("name")
        self.span1.appendChild("Name")
        h2.appendChild(self.span1)

        right.appendChild("Your mission is not easy, ")
        self.span2 = html5.Span()
        self.span2.addClass("name")
        self.span2.appendChild("Name")

A new approach

html5.parse.fromHTML()

  • A parser for HTML build into the html5-library
  • Constructs the DOM nodes like hand-written
  • Allows to bind nodes as variables to their container
  • Easier to handle for both designers and developers!

Let's give it a try!

class game(html5.Div):
    def __init__(self, *args, **kwargs):
        super(game, self).__init__()
        self.addClass("wrap")

        self.fromHTML(
        """
            <div class="wrap">
                <div class="left">
                    <label>
                        Your Name:
                        <input type="text" placeholder="Name" maxlength="20">
                    </label>
                </div>
                <div class="right">
                    <h2>Hello <span class="name">Name</span></h2>
                    Your mission is not easy, <span class="name">Name</span>
                </div>
            </div>
        """)

Finishing the game!

class game(html5.Div):
    def __init__(self, *args, **kwargs):
        super(game, self).__init__()
        self.addClass("wrap")

        self.fromHTML(
        """
            <div class="wrap">
                <div class="left">
                    <label>
                        Your Name:
                        <input [name]="input" type="text" placeholder="Name" maxlength="20">
                    </label>
                </div>
                <div class="right">
                    <h2>Hello <span [name]="span1" class="name">Name</span></h2>
                    Your mission is not easy, <span [name]="span2" class="name">Name</span>
                </div>
            </div>
        """)

        self.sinkEvent("onChange")

    def onChange(self, event):
        if html5.utils.doesEventHitWidgetOrChildren(event, self.input):
            self.span1.removeChild(self.span1.children(0))
            self.span2.removeChild(self.span2.children(0))

            self.span1.appendChild(self.input["value"])
            self.span2.appendChild(self.input["value"])

Thank you!

Any questions?

ViUR Sprint 2017
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!