Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

módulo browser.html

Este módulo permite acceder a las etiquetas HTML. El nombre de la etiqueta se escribe en mayúsculas.

Las etiquetas disponibles son :

  • Etiquetas 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

  • Etiquetas 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

  • Etiquetas HTML5.1 : DETAILS, DIALOG, MENUITEM, PICTURE, SUMMARY

En el siguiente enlace puedes ver un listado de las etiquetas HTML con sus referencias (Borrador).

[Nota: En los siguientes ejemplos a continuación se asume que el módulo browser.html ha sido importado de la siguiente forma: from browser import html]

La sintaxis para crear un objeto (eg un hiperenlace) es :

A([content, [attributes]])

content es el nodo hijo del objeto ; puede ser un objeto Python como un string, un número, una lista, etc, o una instancia de otra clase del módulo html.

attributes es una secuencia de palabras clave (keywords) correspondientes a los atributos de la etiqueta HTML. Si el atributo contiene un guión (-) deberá ser reemplazado por un guión bajo (_): http_equiv en lugar de http-equiv (el símbolo - será interpretado como el signo 'menos'). Para nombres de atributos más complejos se puede usar la sintaxis

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

Mira también la función attribute_mapper más abajo para mayor personalización de la traducción de palabra clave de Python a atributo de la etiqueta HTML.

Si content es un iterable (que no sea un string), todos los elementos en el iterable se convierten en hijos del objeto. Por ejemplo :

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

crea una lista desordenada con las etiquetas <li> en la expresión generador

Para el atributo style, el valor debe ser un diccionario :

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

o

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

Las palabras clave de los argumentos de style deben ser escritos usando la sintaxis Javascript en lugar de la sintaxis CSS : backgroundColor en vez de background-color.

Para evitar conflictos con la palabra clave de Python, el atributo class se debe escribir con la primera letra en mayúscula :

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

También se puede crear un objeto sin argumentos y añadirlos a posteriori:

  • Para añadir un nodo hijo hay que usar el operador <=
  • Para añadir atributos se usa la sintaxis clásica de Python : object.attrs[key] = value (ver la sección atributos y métodos)

Ejemplo :

link = html.A()
link <= html.B('connexion')
link.href = 'http://example.com'

También se pueden crear múltiples elementos al mismo nivel usando el signo más (+) :

row = html.TR(html.TH('LastName') + html.TH('FirstName'))

y puedes añadir todos los elementos en un iterable :

from browser.html import *

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

Aquí se puede ver como crear una caja de selección a partir de una lista (mediante la combinación de los operadores descritos y sintaxis Python) :

from browser import document
from browser.html import *

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

Es importante resaltar que la creación de una instancia de una clase conlleva la creación HTML a partir de un único objeto DOM. Si asignamos la instancia a una variable, no podrá ser usada en varios sitios. Por ejemplo, con este codigo :

link = html.A('Python', href='http://www.python.org')
document <= 'Official Python Website: ' + link
document <= html.P() + 'I repeat: the site is ' + link

El link solo se mostrará en la segunda línea. Una solución sería clonar el objeto original :

link = html.A('Python', href='http://www.python.org')
document <= 'Official Python Website: ' + link
document <= html.P() + 'I repeat: the site is ' + link.clone()

Como regla general, los atributos de las instancias de clases HTML tienen el mismo nombre que los objetos DOM correspondientes. Por ejemplo, podemos obtener la opción seleccionada por el atributo selectedIndex del objeto SELECT. Brython añade algunas cosas que permiten que la manipulación sea un poco más Pythónica

Veamos un ejemplo más completo. El código a continuación ha creado la estructura del panel azul. El panel azul es un elemento div con el atributo id="container".

Usaremos este div para crear una estructura HTML 'poco elegante' con un div, una tabla, un formulario y un elemento canvas HTML5:

# First of all, the import of some libraries
from browser import document
from browser import html

# All the elements will be inserted in the div with the "container" id
container = document['container']

# We create a new div element
newdiv = html.DIV(id = "new-div")
# Now we add some style
newdiv.style = {"padding": "5px", 
               "backgroundColor": "#ADD8E6"}

# Now, lets add a table with a column with numbers and a
# column with a word on each cell
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))
# Now we add some style to the table
table.style = {"padding": "5px", 
               "backgroundColor": "#aaaaaa",
               "width": "100%"}
# Now we add the table to the new div previously created
newdiv <= table + html.BR()

# a form? why not?
form = html.FORM()
input1 = html.INPUT(type="text", name="firstname", value="First name")
input2 = html.INPUT(type="text", name="lastname", value="Last name")
input3 = html.BUTTON("Button with no action!")
form <= input1 + html.BR() + input2 + html.BR() + input3

newdiv <= form + html.BR()

# Finally, we will add something more 'HTML5istic', a canvas with
# a color gradient in the newdiv previously created and below the form
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

# And finally we append the newdiv element
# to the parent, in this case the div with the "container" id
container <= newdiv

Creando nuevas etiquetas

El módulo expone la función

maketag(name)

Crea una clase nueva para una etiqueta con el nombre especificado. La clase se puede usar como aquellas asociadas con las etiquetas HTML estándar:

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

El módulo tiene un atributo relacionado:

tags

Diccionario que mapea los nombres de etiquetas con su clase. Si se añaden nuevas clases mediante la función maketag(), también se añadirán a este diccionario.

Generando atributos HTML a partir de argumentos con palabras clave Python

attribute_mapper(attr)

Para todas las clases definidas en el módulo se llamará a esta función para transformar los argumentos con palabras clave a atributos de la etiqueta HTML. Por ejemplo:

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)

Por defecto, la función reemplaza los guiones bajos (_) con guiones normales (-).