How to use Brython in the Browser
The DOM Application Program Interface in Brython
For experimenting with the Document Object Model manipulations, which are available in Brython, we will build a form for encoding the string to the Base64. The final output form will look like this:
Let’s create an HTML file, and name it index.html:
The above code of html loads the static resources, which defines the UI layout, and also initiates the compilation of Python:
- Line 7: will load the PureCSS style sheet for improving the defaut HTML style
- Line 9: will load the minimized version of Brython engine.
- Line 12: will load the minimized version of standard library of Brython.
- Line 14: will load the main.py, which will handle the dynamic logics of this static HTML page.
- Line 21: will describe the input fields. This field will take the string for encoding as an argument.
- Line 22 to line 25: will define the default button wich will trigger the main logic of the page. The user can see this logic implemented in the main.py.
- Line 26: will define the button for clearing up the data and elements on the page. This will implement in the main.py.
- Line 29: will declare the div intended to be a placeholder for the table.
The Python code which is associated, main.py.
The Python program shows the definition of callback function and the mechanism for manipulating the DOM:
- Line 1: will import the modules which the user use for interacting with the Document Object Model (DOM) and the Browser API code in the brython.min.js.
- Line 2: will import the base64, which is available in the standard library of Brython, that is brython_stdlib.min.js.
- Line 4: will declare the dictionary which the user will use for storing data during the running time of the HTML page.
- Line 6 will define the event handler, that is base64_compute(), which will encode the base54 value of the text entered in the input field with ID text-src.
- Line 7: will retrieve the value of the DOM elements identified with text-src.
- Line 18: will define the event handler, that is clear_map(), which will clear the data and presentation of the data on this page.
- Line 22: will define the display_map(), which will take the data contained in the b64_map, and display it under the form of page.
- Line 26: will retrieve the DOM elements with the ID text-src.
- Line 29: will clear the value of the DOM element with the ID text-src.
- Line 31: will bind the onclick event of the submit button to the base64_compute().
- Line 32: will bind the onclick event of the clear-btn button to clear_map().
For manipulating the DOM, Brython will use two operators:
- <= is a new operator, mainly specific to Brython. This will add a child to the node. We have used it in display_map(), which is defined in line no. 22.
- + is the substitute for Element.insertAdjacementHTML(‘afterend’) and for adding sibling nodes.
We can see these two operators in action in the one of the above statement of the display_map():
The above command can be translated as “add to the table element and table head element containing the table row element composed of two adjacent table data cell elements. It is rendering in the browser as the following HTML program.
The above HTML code shows the nested structure for the header row of the table element. We can also write this code in more readable manner.
For observing the result in the Brython console, we can enter the following code block:
'<table> <thead> <tr> <th> Text </th> <th> Base64 </th> </tr> </thead> </table>'
For executing the whole code, we need to start the website server. As previously, we have started the built-in Python website server in the same directory as the two files, main.html and index.html.
Serving HTTP on :: port 8080 (http://[::]:8080/) ...
After starting the website server, point the browser to http://localhost:8080. This page will look like this:
Importing file in the Brython
Python modules and libraries are the files with a .py extension in the root folder of their project or the Python package in the subfolder containing the _init_.py file. For importing the Python modules in their Brython program, they would have to start the website server.
If the users want to explore more about how to import Python modules into Brython code, they can look at the “Installation by using PyPI” section in the “How to install Brython” article. They have to create and activate the Python virtual environment, install the Brython, and then modify index.html.
The above HTML file will expose the modules which are imported from the core engine of the browser, from the standard library of sys, and from the local Python module, which is functional. The content of the functional.py is the following:
This module will implement the take(), which is one of the itertools receipts.take(), which will return the first ‘n’ elements of the given iterable. It will rely on the itertools.slice().
If the user tries to open the index.html from the file system with their browser, then they will get the following error in the browser console:
After importing the Python module, which is required for starting the local website server. First, start the local website server and then open the http://localhost:8080 in the browser. The user will see the following HTML page:
If there is a running website server, then the browser would be able to fetch the functional.py module after importing the functional is executed. The results of number and sys.version values are inserted in the HTML files with the help of the last two Python scripts, which are embedded and rendered by the browser.
Reduce the Import Size
Create brython_modules.js with all the modules used by the application searching brython_stdlib.js... finding packages... script in html index.html
This will be used for generating the brython_modules.js, and the user can then modify the head element of the index.html file.
Line 5 will change the original form of the script source from the brython_stdlib.js into brython_modules.js.
The user can open the index.html with their browser, or they can point the browser to the local server reduced to the same HTML page. The user can notice these points:
- They can reduce the HTML page in their browser, even without running the website server.
- The user would not need to load the brython_stdlib.js.
In this article, we have discussed how the users can use the Brython in the browsers with the help of the Base64 calculator, which is implemented for experimentation in the browser with the Document Object Model Application Program Interface. We have also explained how the user can import the Python files in the Brython and how the user can reduce the size of the Imported file.