PyFlaskBootstrap4

OsProject

OsProject
edit
id	PyFlaskBootstrap4
state	active
owner	WolfgangFahl
title	Flask + Bootstrap 4 static components and templates for webprojects
url	https://github.com/WolfgangFahl/pyFlaskBootstrap4
version	0.7.0
description	Flask + Bootstrap 4 static components and templates for webprojects
date	2023-10-29
since	2021-01-08
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

• https://github.com/greyli/bootstrap-flask

and adds support for

1. SQLAlchemy-Utils custom data types and utility functions
2. WTForms data validation, CSRF protection, I18N and more
3. pydevd remote debugging support
4. Using flask inside class
5. Widgets
6. login blueprint
7. datatables
8. Server Sent Events Support

Demo

see

• http://fb4demo.bitplan.com/

Installation

pip install pyFlaskBootstrap4
# alternatively if your pip is not a python3 pip
pip3 install pyFlaskBootstrap4 
# local install from source directory of pyFlaskBootstrap4 
pip install .

upgrade

pip install pyFlaskBootstrap4  -U
# alternatively if your pip is not a python3 pip
pip3 install pyFlaskBootstrap4 -U

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")

Links

• https://icons.getbootstrap.com/
• http://helloflask.com/en/
• https://wtforms.readthedocs.io/en/2.3.x/