Add the Brython integration
This commit is contained in:
parent
1311be7853
commit
0758a586ae
|
@ -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
|
|
@ -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>
|
|
@ -0,0 +1,5 @@
|
|||
from browser import document
|
||||
|
||||
|
||||
def setup_page():
|
||||
document['topHeader'].textContent = "Brython Examples:"
|
|
@ -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>
|
Loading…
Reference in New Issue