PyFlaskBootstrap4

From BITPlan Wiki
Jump to navigation Jump to search
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

as a combined solution with some extra functionality. This project builds on

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

Demos

see


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