Add the Brython integration

This commit is contained in:
Michael Mintz 2020-04-13 03:57:18 -04:00
parent 1311be7853
commit 0758a586ae
4 changed files with 273 additions and 0 deletions

21
integrations/brython/ReadMe.md Executable file
View File

@ -0,0 +1,21 @@
## Getting Started with Brython
* Brython was designed for replacing JavaScript with Python.
* This tutorial will show you how to get started quickly.
### 1. Get a web server up and running:
```bash
python -m http.server
```
(You can always stop the server by using ``CTRL-C``.)
### 2. Navigate to [http://localhost:8000/](http://localhost:8000/)
Now click on the examples to see Brython in action.
### 3. For more info, see the following:
* https://brython.info/
* https://pypi.org/project/brython/
* https://github.com/brython-dev/brython

View File

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><meta charset="iso-8859-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css" />
<style>
body,td,th,h1{
font-family:sans-serif;
}
td,h1 {
border-style:solid;
border-width: 6px 6px 6px 6px;
border-color: #FFF;
padding: 8px;
}
th {
border-style: none;
border-width: 6px;
border-color: #FFF;
background-color: #91E7B4;
padding: 8px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js"></script>
</head>
<body onload="brython()">
<table>
<tbody>
<h1 id="topHeader"></h1>
<td>
<th>
<h2>
<a href="library.html">Library / Indexed DB Example</a>
</h2>
</th>
</td>
</tbody>
</table>
<script type="text/python">
import index
index.setup_page()
</script>
</body>
</html>

View File

@ -0,0 +1,5 @@
from browser import document
def setup_page():
document['topHeader'].textContent = "Brython Examples:"

View File

@ -0,0 +1,203 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"><meta charset="iso-8859-1">
<style>
body,td,th{
font-family:sans-serif;
font-size:12px;
}
td {
border-style:solid;
border-width: 0px 0px 1px 0px;
border-color: #000;
padding:3px;
}
th {
border-style:solid;
border-width: 1px;
border-color: #000;
background-color: #61D7A4;
padding: 4px;
}
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.8.8/brython.js"></script>
</head>
<body onload="brython(1)">
<script id="ascript" type="text/python">
from browser import document, window, html
IDB = window.indexedDB
def create_db(*args):
# The database did not previously exist, so create object stores and indexes.
print('create db')
db = request.result
store = db.createObjectStore("books", {"keyPath": "isbn"})
titleIndex = store.createIndex("by_title", "title", {"unique": True})
authorIndex = store.createIndex("by_author", "author")
# Populate with initial data.
store.put({"title": "Quarry Memories", "author": "Fred", "isbn": 123456})
store.put({"title": "Water Buffaloes", "author": "Fred", "isbn": 234567})
store.put({"title": "Bedrock Nights", "author": "Barney", "isbn": 345678})
def btn_click(ev):
"""Generic callback function for buttons
"""
# The text on the button indicates the action: Add, Edit, Update or Delete
action = ev.target.text
# table row of the clicked button
row = ev.target.parent.parent
if action == "Delete":
db = request.result
tx = db.transaction("books", "readwrite")
store = tx.objectStore("books")
cursor = store.delete(row.key)
# when record is deleted, update table
cursor.bind("success", show)
elif action == "Add":
values = [entry.value for entry in row.get(selector="INPUT")]
data = dict(zip(['title', 'author', 'isbn'], values))
db = request.result
tx = db.transaction("books", "readwrite")
store = tx.objectStore("books")
if action == "Add":
cursor = store.put(data)
else:
cursor = store.put(data, row.key)
# when record is added, update table
cursor.bind("success", show)
elif action == "Edit":
# Replace cells for "title" and "author" by INPUT fields
# Since isbn is he keyPath it can't be edited
cells = row.get(selector="TD")
for cell in cells[:-2]:
value = cell.text
cell.clear()
cell <= html.INPUT(value=value)
# Replace buttons "Edit" and "Delete" by button "Update"
cells[-1].clear()
update_btn = html.BUTTON("Update")
cells[-1] <= update_btn
# Bind its "click" event
update_btn.bind("click", btn_click)
elif action == "Update":
values = [entry.value for entry in row.select("INPUT")]
data = dict(zip(["title", "author"], values))
data['isbn'] = row.key # required for the "store.put" method below
db = request.result
tx = db.transaction("books", "readwrite")
store = tx.objectStore("books")
cursor = store.put(data)
# When record is added, update table
cursor.bind("success", show)
def show(ev):
"""Show the contents of store "books" in a table"""
db = request.result
tx = db.transaction("books", "readonly")
store = tx.objectStore("books")
cursor = store.openCursor()
# clear table
document["table"].clear()
# headers
t = html.TABLE()
document["table"] <= t
t <= html.TR(html.TH(x) for x in ["Title", "Author", "ISBN", "Actions"])
def add_row(ev):
"""Add a row to the table for each iteration on cursor
When cursor in empty, add a line for new record insertion
"""
res = ev.target.result
if res:
v = res.value
row = html.TR()
row <= (html.TD(getattr(v, key))
for key in ["title", "author", "isbn"])
row <= html.TD(html.BUTTON("Edit")+
html.BUTTON("Delete"))
row.key = res.key
t <= row
getattr(res, "continue")()
else:
# add empty row
row = html.TR()
row <= (html.TD(html.INPUT(name="new_%s" %key))
for key in ["title", "author", "isbn"])
row <= html.TD(html.BUTTON("Add"))
t <= row
# bind all buttons
for btn in t.get(selector="BUTTON"):
btn.bind("click", btn_click)
cursor.bind("success", add_row)
request = IDB.open("library")
# If database doesn't exist, create it
request.bind("upgradeneeded", create_db)
# Else print a table with all elements in table "books"
request.bind("success", show)
</script>
<h1>Library</h1>
<div id="table"><table><tr><th>Title</th><th>Author</th><th>ISBN</th><th>Actions</th></tr><tr><td><input name="new_title"></td><td><input name="new_author"></td><td><input name="new_isbn"></td><td><button>Add</button></td></tr></table></div>
<style>
/* colors for highlighted Python code */
span.python-string{
color: #27d;
}
span.python-comment{
color: #019;
}
span.python-keyword{
color: #950;
}
span.python-builtin{
color: #183;
}
em {
color:#339;
font-family:courier
}
strong {
color:#339;
font-family:courier;
}
button.nice{
margin-right: 15%;
color: #fff;
background: #7ae;
border-width: 2px;
border-style: solid;
border-radius: 5px;
border-color: #45b;
text-align: center;
font-size: 15px;
padding: 6px;
}
</style>
</body>
</html>