What are HTML Helpers in web2py

Introduction

We are aware that web2py enables Python programming for web developers to create dynamic web content. Here in this blog, we will learn the concept of the helper class of web2py, which can be used to build HTML programmatically. We will see how the web2py helpers' mechanism is more than just a way to create HTML and exciting things related to HTML helpers.

So let us learn about HTML helpers.

HTML helpers

Check the following code in view:

{{=DIV('this', 'is', 'a', 'test', _id='123', _class='myclass')}}

It is rendered as:

<div id="123" class="myclass">thisisatest</div>

DIV is a helper class, something that can be used to construct HTML programmatically. It corresponds to the HTML <div> tag.
 
The objects enclosed between the open and close tags are how positional arguments are interpreted. Named arguments are treated as HTML tag attributes when they begin with an underscore. Some helpers also have named arguments that start without underscore; these arguments are tag-specific.

Note - Named arguments are treated as HTML tag attributes (without the underscore) when they begin with an underscore.

A helper can accept a single list or tuple as its set of components instead of a collection of nameless arguments by using the * notation, and it can accept a single dictionary as its set of attributes by using the ** notation.

For example:

{{
contents = ['this', 'is', 'a', 'test']
attributes = {'_id':'123', '_class':'myclass'}
=DIV(*contents, **attributes)
}}

(produces the same output as before).

The following set of helpers can be used for developing complex expressions that can be serialized to XML:

xmlescape, embed64, XML, XHTML, URL, UL, TT, TR, TITLE, THEAD, TH, TFOOT, TEXTAREA, TD, TBODY, TAG, TABLE, STYLE, SPAN, SELECT, SCRIPT, PRE, P, OPTION, OPTGROUP, OL, ON, OBJECT, META, MENU, MARKMIN, LINK, LI, LEGEND, LABEL, INPUT, IMG, IFRAME, I, HTML, HR, HEAD, H6, H5, H4, H3, H2, H1, FORM, FIELDSET, EMBED, EM, DIV, COLGROUP, COL, CODE, CENTER, CAT, BR, BODY, BEAUTIFY, B, ASSIGNJS, A

For example:

{{=DIV(B(I("hello ", "<world>")), _class="myclass")}}

It is rendered as:

<div class="myclass"><b><i>hello &lt;world&gt;</i></b></div>

Helpers with the __str__ and the xml methods can also be serialized into strings.

>>> print str(DIV("hello world"))

	<div>hello world</div>

>>> print DIV("hello world").xml()

	<div>hello world</div>

Note - The web2py helpers' mechanism is more than just a way to create HTML without string concatenation. It provides a server-side representation of the DOM (Document Object Model).

Helpers' components can be referenced via their position, and with respect to their components, helpers act as lists:

>>> a = DIV(SPAN('a', 'b'), 'c')
>>> print a

	<div><span>ab</span>c</div>

>>> del a[1]
>>> a.append(B('x'))
>>> a[0][0] = 'y'
>>> print a

	<div><span>yb</span><b>x</b></div>

Helpers' attributes can be referenced by name, and with respect to their attributes helpers act as dictionaries:

>>> a = DIV(SPAN('a', 'b'), 'c')
>>> a['_class'] = 's'
>>> a[0]['_class'] = 't'
>>> print a

	<div class="s"><span class="t">ab</span>c</div>

Note - A list can be used to access the entire collection of components named a.components, and a dictionary can be used to access the entire set of attributes called a.attributes.

• a[i] ≡ a.components[i], where i is an integer
• a[s] ≡ a.attributes[s], where s is a string
• # ≡ denotes - is equivalent to 

Keep in mind that the helper is given helper attributes as keyword arguments. However, in some instances, attribute names contain special characters (like hyphens) that are not permitted in Python identifiers and, therefore, cannot be used as keyword argument names. 

For example:

DIV('text', _data-role='collapsible')

This will not work because "_data-role" includes a hyphen, producing a Python syntax error.
In such cases, we have a couple of options

Option 1: We can use the data argument (without a leading underscore) to pass a dictionary of related attributes (without a leading hyphen of respective attributes), and the output will contain the desired combinations.

>>> print DIV('text', data={'role': 'collapsible'})

	<div data-role="collapsible">text</div>

Option 2: As an alternative, you can use Python's ** function arguments notation to pass the attributes as a dictionary, which converts a dictionary of (key: value) pairs into a list of keyword arguments.

>>> print DIV('textabc123', **{'_data-role': 'collapsible'})

	<div data-role="collapsible">textabc123</div>

Note - More elaborate entries will use HTML character entities, but they will still function.

For example:

>>> print DIV('textabc123', data={'options':'{"mode":"calbox", "useNewStyle":true}'})

	<div data-options="{&quot;mode&quot;:&quot;calbox&quot;, &quot;useNewStyle&quot;:true}">textabc123</div>

Special TAGs can be created dynamically also:

>>> print TAG['soap:Body'](abc123, **{'_xmlns:m':'http://www.example.xyz'})

	<soap:Body xmlns:m="http://www.example.xyz">abc123</soap:Body>