IntroductionInstallationLimitations of the "file" protocolFrequently asked questionsSyntax, keywords and built-in functionsStandard distributionimport implementationBrython packagesBrowser interface
Introduction - DOM API
Creating a document Accessing elements Attributes, properties and methods Events Mouse events Keyboard events Focus events Drag events Query string Interactions with Javascript Brython-specific built-in modules
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 Widgets browser.widgets.dialog browser.widgets.menu interpreter javascript Working with BrythonCookbook |
module browser.htmlThis module exposes the HTML tags. The tag name is in uppercase letters The classes defined are :
In the following link you can find the index of HTML tags with references (DRAFT).[Note: In the following examples we assume that the browser.html module has been imported as follows: from brower import html ]
The syntax to create an object (e.g. a hyperlink) is :
A( [content, [attributes]])
content is the child node of the the object ; it can be a Python object such as a string, a number, etc., or an instance of another class in the html module
If content is a string, it is interpreted as HTML code. To specify the
text content of an element, set it as the value of property
attributes is a sequence of keywords corresponding to the attributes of the HTML tag. If the attribute contains a hyphen (-) it must be replaced by an underscore (_) : html.BUTTON("hello", **{"v-on:click": "count++"})
See also the function
If content is an iterable (other than a string), all the items in the
iterable become children of the object. For instance :
creates an unordered list with thehtml.UL(html.LI('item %s' %i) for i in range(5)) <li> tags in the generator expression
For the style attribute, the value must be a dictionary :
ord = html.DIV('Brython', style={'height':100, 'width':200}) The keyword arguments of style must be written by the Javascript syntax, not CSS : backgroundColor and not background-color. To avoid conflicts with the Python keyword, the attribute class must be capitalized :d = html.DIV('Brython', style=dict(height=100, width=200)) You can also create an object without argument, then build it up:d = html.DIV('Brython', Class="container")
You can also create multiple elements at the same level by using the plus (+) sign :link = html.A() link <= html.B('connexion') link.href = 'http://example.com' and you can add all the items in an iterable :row = html.TR(html.TH('LastName') + html.TH('FirstName')) Here is how to create a selection box from a list (by combining these operators and Python syntax) :from browser.html import * t = TABLE() t <= TR(TH('Number') + TH('Square')) t <= (TR(TD(i)+TD(i * i)) for i in range(10)) It is important to note that the creation of an instance of a class involves creating HTML from a single DOM object. If we assign the instance to a variable, you can not use it in several places. For example, with this code :from browser import document from browser.html import * document <= SELECT(OPTION(elt, value=i) for i, elt in enumerate(['one', 'two', 'three'])) the link will only show in the second line. One solution is to clone the original object :link = html.A('Python', href='http://www.python.org') document <= 'Official Python Website: ' + link document <= html.P() + 'I repeat: the site is ' + link As a rule of thumb, instances of HTML classes have the same attribute names as the corresponding DOM objects. For example, it can retrieve the option selected by thelink = html.A('Python', href='http://www.python.org') document <= 'Official Python Website: ' + link document <= html.P() + 'I repeat: the site is ' + link.clone() selectedIndex attribute of the SELECT object. Brython adds
a few things to make the manipulation a bit more Pythonic
Let's see a more complete example. The code below have created the structure
in the blue panel. The blue panel is a div element with id="container"
attribute.
We will use this div to create an 'ugly' html structure inside with a div, a
table, a form and a HTML5 canvas:
Creating new tagsThe module exposes the functionmaketag( name)
Creates a new class for a tag with the specified name. The class can be used like those associated with standard HTML tags : The module has a related attribute :p2 = maketag('P2') document <= p2('test') tags
Dictionary mapping tag names to the matching class. If new classes are
added by function
Generating HTML attributes from Python keyword argumentsattribute_mapper( attr)
For all the classes defined in the module, this function is called to transform the keyword arguments into HTML tag attributes. For example: 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) By default, the function replaces underscores (_) by hyphens (-). |