Documentation Brython

Version

Le module browser.webcomponent permet de créer des balises HTML personnalisées, en utilisant la technologie DOM standard WebComponent.

Un élément personnalisé est utilisé dans une page HTML sous la forme

<popup-window>Coucou !</popup-window>

Le module expose les fonctions suivantes

define(nom_balise, classe_composant[, options])

nom_balise est le nom de la balise personnalisée. La spécification Web Component impose que ce nom inclue un tiret (le caractère "-").
classe_composant est la classe qui définit le comportement du composant. Sa méthode __init__ est appelée pour créer le composant; le paramètre self référence l'élément DOM pour le composant personnalisé.

options est un dictionnaire avec les options du composant (cf la documentation de define). La seule option disponible actuellement est "extends".

class MyParagraph:
    def __init__(self):
        self.shadow = self.attachShadow({'mode': 'open'})
        self.shadow <= html.B('hello')

define('my-paragraph', MyParagraph, {'extends': 'p'})

Si la classe du composant hérite d'une classe définie dans le module browser.html, l'option "extends" est automatiquement ajoutée avec comme valeur le nom de cette classe. Le code ci-dessus peut donc être remplacé par

from browser import html

class MyParagraph(html.P):
    def __init__(self):
        self.shadow = self.attachShadow({'mode': 'open'})
        self.shadow <= html.B('hello')

define('my-paragraph', MyParagraph)

get(nom_balise)

renvoie la classe associée à nom_balise, ou None.

Exemple

Supposons que nous voulions définir une balise personnalisée <bold-italic> qui possède un attribut "data-val":

<bold-italic data-val="salut"></bold-italic>

Ce qui se produit quand la balise apparait dans le document HTML est défini par la méthode __init__ de la classe BoldItalic qui gère cette balise.

from browser import webcomponent

class BoldItalic:

    def __init__(self):
        # Create a shadow root
        shadow = self.attachShadow({'mode': 'open'})

        # Insert the value of attribute "data-val" in bold italic
        # in the shadow root
        shadow <= html.B(html.I(self.attrs['data-val']))

# Indique au navigateur de gérer la balise <bold-italic> avec la classe
# BoldItalic
webcomponent.define("bold-italic", BoldItalic)

Notez l'utilisation d'une autre technologie DOM, ShadowRoot, pour définir un sous-arbre du DOM, différent de l'arbre principal.

Gestion du cycle de vie

La technologie Web Component definit un ensemble de fonctions de rappel qui gèrent le cycle de vie d'un composant personnalisé.

Pour les implémenter en Brython, il suffit d'ajouter ces fonctions dans la définition de la classe:

import browser.webcomponent

class BoldItalic:

    def __init__(self):
        # Create a shadow root
        shadow = self.attachShadow({'mode': 'open'})

        # Insert the value of attribute "data-val" in bold italic
        # in the shadow root
        shadow <= html.B(html.I(self.attrs['data-val']))

    def connectedCallback(self):
        print("connected callback", self)

webcomponent.define("bold-italic", BoldItalic)

Pour gérer les changements apportés à certains attributs, ajouter la liste observedAttributes et la méthode attributeChangedCallback() comme ci-dessous (notez que cette fois un nouveau composant personnalisé est créé en utilisant la fonction maketag du module browser.html et ajouté dynamiquement au document):

observed_tag = html.maketag("observed-element")

class Observed:

    observedAttributes = ["data"]

    def attributeChangedCallback(self, name, old, new, ns):
        print(f"attribute {name} changed from {old} to {new}")

webcomponent.define("observed-element", Observed)

elt = observed_tag()
document <= elt
elt.attrs["data"] = "info"

Version

Introduction

Installation

Limitations du protocole "file"

Questions fréquemment posées

Syntaxe, mots-clés et fonctions intégrées

Distribution standard

Implémentation de `import`

Packages Brython

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Exemple

Gestion du cycle de vie

Version 3.133.123.113.10

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

Exemple

Gestion du cycle de vie

Version