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