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
 

El módulo browser.webcomponent se usa para crear etiquetas HTML personalizadas, usando el tecnología estándar DOM WebComponent.

Un elemento personalizado se puede usar en una página HTML de la siguiente forma

<popup-window>¡Hola!</popup-window>

El módulo expone una única función

define(tag_name, component_class)

tag_name es el nombre de la etiqueta personalizada. La especificación para Web Component obliga a que el nombre de la etiqueta incluya un guión (el caracter "-").

component_class es la clase que define el comportamiento del componente. Su método __init__ es el usado para crear el componente; el parámetro self referencía al elemento DOM para el componente personalizado.

Ejemplo

Supón que queremos definir una etiqueta personalizada <bold-italic> con un atributo "data-val":

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

Lo que sucede pasa cuando se encuentra una etiqueta en el documento HTML será definido mediante el método __init__ de la clase Web Component BoldItalic.

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']))

# Tell the browser to manage <bold-italic> tags with the class BoldItalic
webcomponent.define("bold-italic", BoldItalic)

Nota para usar otra tecnología del DOM, ShadowRoot, para definir un subárbol DOM, diferente al árbol principal del DOM.

Gestión del ciclo de vida

El Web Component define un conjunto de callback functions que gestionan el ciclo de vida de un componente personalizado.

Para implementarlo en Brython añade las funciones en la definición de la clase:

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)