Documentation Brython

Version

module browser.html

Ce module définit des classes correspondant aux balises HTML, en majuscules.

Les classes définies sont :

les balises HTML4 : A, ABBR, ACRONYM, ADDRESS, APPLET, AREA, B, BASE, BASEFONT, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, DD, DEL, DFN, DIR, DIV, DL, DT, EM, FIELDSET, FONT, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HEAD, HR, HTML, I, IFRAME, IMG, INPUT, INS, ISINDEX, KBD, LABEL, LEGEND, LI, LINK, MAP, MENU, META, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, P, PARAM, PRE, Q, S, SAMP, SCRIPT, SELECT, SMALL, SPAN, STRIKE, STRONG, STYLE, SUB, SUP, SVG, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TITLE, TR, TT, U, UL, VAR
les balises HTML5 : ARTICLE, ASIDE, AUDIO, BDI, CANVAS, COMMAND, DATA, DATALIST, EMBED, FIGCAPTION, FIGURE, FOOTER, HEADER, KEYGEN, MAIN, MARK, MATH, METER, NAV, OUTPUT, PROGRESS, RB, RP, RT, RTC, RUBY, SECTION, SOURCE, SUMMARY, TEMPLATE, TIME, TRACK, VIDEO, WBR
les balises HTML5.1 : DETAILS, DIALOG, MENUITEM, PICTURE, SUMMARY

En suivant ce lien, vous trouverez la liste des balises HTML ainsi que leur documentation. Cette spécification est encore provisoire.

La syntaxe pour créer un objet (par exemple un lien hypertexte) est :

A([content, [attributes]])

content est le noeud «fils» de l'objet ; il peut s'agir d'un objet Python comme une chaîne de caractères, un nombre, etc., ou bien une instance d'une autre classe du module html.

Si content est une chaine de caractères, elle est interprétée comme du code HTML. Pour spécifier le contenu texte d'un élément il faut attribuer la valeur à sa propriété text.

attributes est une suite de mots-clés correspondant aux attributs de la balise HTML. Les traits d'union (-) doivent être remplacés par des soulignés (_) : http_equiv et pas http-equiv (sinon le - serait interprété comme le signe moins). Pour des attributs qui ne sont pas des noms Python valides parce qu'ils contiennent des caractères comme ":" on peut les passer par la syntaxe

html.BUTTON("hello", **{"v-on:click": "count++"})

Voir aussi la fonction attribute_mapper ci-dessous pour personnaliser davantage la transformation des arguments mots-clés Python en attributs de balise HTML.

Si content est un itérable autre qu'une chaine de caractères, tous les éléments sont ajoutés comme descendants de l'élément. Par exemple :

html.UL(html.LI('item %s' %i) for i in range(5))

crée une liste non ordonnée avec les balises <li> définies dans l'expression générateur.

Pour l’attribut style, la valeur fournie doit être un dictionnaire :

d = html.DIV('Brython', style={'height':100, 'width':200})

d = html.DIV('Brython', style=dict(height=100, width=200))

Les mots-clé de style doivent être écrits avec la syntaxe Javascript, pas CSS : backgroundColor et non background-color.

Pour éviter les conflits avec le mot-clé de Python, l'attribut class doit être écrit avec une majuscule :

d = html.DIV('Brython', Class="container")

On peut aussi créer un objet sans argument, puis le compléter :

pour ajouter un noeud enfant, utiliser l'opérateur <=
pour ajouter des attributs, utiliser la syntaxe : objet.attrs[cle] = valeur (voir la section Attributs et méthodes)

Exemple :

link = html.A()
link <= html.B("connexion")
link.attrs["href"] = "http://example.com"

On peut aussi créer plusieurs éléments de même niveau par addition (symbole +) :

row = html.TR(html.TH('Nom') + html.TH('Prénom'))

et on peut ajouter tous les éléments d'un itérable en une seule opération :

from browser.html import *

t = TABLE()
t <= TR(TH('Number') + TH('Square'))
t <= (TR(TD(i) + TD(i * i)) for i in range(10))

En combinant ces opérateurs et la syntaxe Python, voici comment créer une boîte de sélection à partir d'une liste :

from browser import document
from browser.html import *

document <= SELECT(OPTION(elt, value=i)
    for i, elt in enumerate(['one', 'two', 'three']))

Noter que la création d'une instance d'une classe relative aux balises HTML entraîne la création d'un unique objet DOM. Si on affecte l'instance à une variable, on ne peut pas l'utiliser à plusieurs endroits. Par exemple :

link = html.A('Python', href='http://www.python.org')
doc <= 'Site officiel de Python : ' + link
doc <= html.BR() + 'Je répète : le site est ' + link

le lien ne sera montré que dans la deuxième ligne. Une solution est de cloner l'objet initial :

link = html.A('Python', href='http://www.python.org')
doc <= 'Site officiel de Python : ' + link
doc <= html.BR() + 'Je répète : le site est ' + link.clone()

En général, les classes relatives au HTML ont des attributs portant le même nom que l’objet DOM correspondant. Par exemple, on a accès à l’option choisie par l’utilisateur au travers de l’attribut selectedIndex d’un objet SELECT. Brython permet une approche encore plus pythonique avec quelques ajouts.

Voyons un exemple plus complet. Le code ci-dessous a généré la structure dans la partie bleue (une div identifiée par id=container). Nous allons insérer une structure HTML fictive dans cette div : une div, un table, un form et un canvas HTML5 :

# Tout d’abord, l’import de quelques bibliothèques.
from browser import document
from browser import html

# Nous allons ajouter les éléments à la div identifiée "container".
container = document['container']

# Création d’une nouvelle div,
newdiv = html.DIV(id = "new-div")
# à laquelle on ajoute du style.
newdiv.style = {"padding": "5px",
               "backgroundColor": "#ADD8E6"}

# Créons un tableau à deux colonnes, une pour le numéro de ligne,
# une pour les mots.
text = "Brython is really cool"
textlist = text.split()
table = html.TABLE()
for i, word in enumerate(textlist):
    table <= html.TR(html.TD(i + 1) +
                     html.TD(word))
# Un peu de style pour ce tableau:
table.style = {"padding": "5px",
               "backgroundColor": "#aaaaaa",
               "width": "100%"}
# Maintenant, on ajoute le tableau à la div précédemment créée
newdiv <= table + html.BR()

# Un formulaire? Pourquoi pas!
form = html.FORM()
input1 = html.INPUT(type="text", name="firstname", value="Prénom")
input2 = html.INPUT(type="text", name="lastname", value="Nom")
input3 = html.BUTTON("Bouton inactif pour l’exemple!")
form <= input1 + html.BR() + input2 + html.BR() + input3

newdiv <= form + html.BR()

# Finalement, quelque chose de plus orienté HTML5, un canvas avec un
# gradient de couleurs.
canvas = html.CANVAS(width = 300, height = 300)
canvas.style = {"width": "100%"}
ctx = canvas.getContext('2d')
ctx.rect(0, 0, 300, 300)
grd = ctx.createRadialGradient(150, 150, 10, 150, 150, 150)
grd.addColorStop(0, '#8ED6FF')
grd.addColorStop(1, '#004CB3')
ctx.fillStyle = grd
ctx.fill()

newdiv <= canvas

# La div est finalement insérée dans le conteneur.
container <= newdiv

1	Brython
2	is
3	really
4	cool

Création de nouvelles balises

Le module expose la fonction

maketag(nom)

Crée une nouvelle classe pour une balise avec le nom indiqué. On peut utiliser cette classe comme celles associées aux noms des balises HTML :

p2 = maketag('P2')
document <= p2('test')

Le module possède un autre attribut :

tags

Dictionnaire qui associe des noms de balises (chaines de caractères) aux classes correspondantes. Si de nouvelles balises sont ajoutées par la fonction maketag() elles sont ajoutées à ce dictionnaire.

Génération des attributs HTML à partir de mots-clés Python

attribute_mapper(attr)

Pour toutes les classes définies dans le module, cette fonction est appelée pour transformer les attributs passés comme mots-clés en attributs de la balise HTML. Par exemple:

import re
def f(attr):
    return re.sub("^v_(.*)_(.*)$", r"v-\1:\2", attr)

html.attribute_mapper = f
print(html.BUTTON("hello", v_on_click="count++").outerHTML)

Par défaut, la fonction remplace les soulignés (_) par des tirets(-)

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

module browser.html

Création de nouvelles balises

Génération des attributs HTML à partir de mots-clés Python

Version 3.133.123.113.10

Interface avec le navigateur

Modules intégrés propres à Brython

Travailler avec Brython

Recettes

module browser.html

Création de nouvelles balises

Génération des attributs HTML à partir de mots-clés Python

Version