PyFlaskBootstrap4
| OsProject | |
|---|---|
 edit
| |
| id | PyFlaskBootstrap4 |
| state | |
| owner | WolfgangFahl |
| title | Flask + Bootstrap 4 static components and templates for webprojects |
| url | https://github.com/WolfgangFahl/pyFlaskBootstrap4 |
| version | 0.0.4 |
| description | |
| date | 2021/01/09 |
| since | |
| until | |
What is it?
A python library to get
- https://www.python.org/
- https://palletsprojects.com/p/flask/
- https://getbootstrap.com/
- https://www.sqlalchemy.org/
as a combined solution with some extra functionality. This project builds on
and adds support for
- SQLAlchemy-Utils custom data types and utility functions
- WTForms data validation, CSRF protection, I18N and more
- pydevd remote debugging support
- Using flask inside class
- Widgets
- login blueprint
- datatables
- [#Server_Sent_Event Server Sent Event] Support
Demos
see
Installation
pip install pyFlaskBootstrap4
Tutorial
HelloWeb application
see helloweb.py
'''
Created on 2021-01-08
This is a demo application for https://github.com/WolfgangFahl/pyFlaskBootstrap4
@author: wf
'''
from fb4.app import AppWrap
from flask import render_template
class HelloWeb(AppWrap):
'''
a sample web application
'''
def __init__(self):
'''
Constructor
'''
super().__init__()
def home(self):
'''
render the home page of the HelloWeb application
'''
html = render_template("bootstrap.html", title="HelloWeb demo application",content="Welcome to the Flask + Bootstrap4 Demo web application",error=None)
return html
helloWeb=HelloWeb()
app=helloWeb.app
@app.route('/')
def home():
return helloWeb.home()
if __name__ == '__main__':
parser=helloWeb.getParser("Flask + Bootstrap4 Demo Web Application")
args=parser.parse_args()
helloWeb.optionalDebug(args)
helloWeb.run(args)
Server Sent Events
Progressbar and time display Example
Client Side Javascript / HTML
% extends 'base.html' %}
{% block content %}
<h3>Server Sent Events demo</h3>
<div id="event_div">Watch this space...</div>
<div id="progress1" class="progress">
<div class="progress-bar" style="width:0%"></div>
</div>
<pre id="sse_json"></pre>
<script>
function fillContainerFromSSE(id,url) {
var targetContainer = document.getElementById(id);
var eventSource = new EventSource(url)
eventSource.onmessage = function(e) {
targetContainer.innerHTML = e.data;
};
};
function setProgressFromSSE(pid,debugId,url) {
var eventSource = new EventSource(url)
var debugContainer = document.getElementById(debugId);
var progressContainer=document.getElementById(pid);
eventSource.onmessage = function(event) {
var data=JSON.parse(event.data);
debugContainer.innerHTML = event.data;
progressContainer.setAttribute("style","width:"+data.progress+"%");
};
}
fillContainerFromSSE("event_div","/eventfeed");
setProgressFromSSE("progress1","sse_json","/progressfeed");
</script>
{% endblock %}
Server Side Flask Code
...
@app.route('/events')
def test_events():
return self.eventExample()
@app.route('/eventfeed')
def test_eventFeed():
return self.eventFeed()
@app.route('/progressfeed')
def test_progressFeed():
return self.progressFeed()
...
def getTimeEvent(self):
'''
get the next time stamp
'''
time.sleep(1.0)
s=datetime.utcnow().strftime('%Y-%m-%d %H:%M:%S')
return s
def progressFeed(self):
'''
feed progress info as json
'''
self.pc=0
def progress():
time.sleep(0.5)
self.pc=(self.pc+5) % 100
pcdict={"progress":self.pc}
return json.dumps(pcdict)
sse=self.sseBluePrint
return sse.streamFunc(progress)
def eventFeed(self):
'''
create a Server Sent Event Feed
'''
sse=self.sseBluePrint
# stream from the given function
return sse.streamFunc(self.getTimeEvent)
def eventExample(self):
return render_template("event.html")