Difference between revisions of "PyFlaskBootstrap4"

From BITPlan Wiki
Jump to navigation Jump to search
 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
=OsProject=
 +
 
{{OsProject
 
{{OsProject
 
|id=PyFlaskBootstrap4
 
|id=PyFlaskBootstrap4
 +
|state=dropped
 
|owner=WolfgangFahl
 
|owner=WolfgangFahl
|title=Flask + Bootstrap 4 static components and templates for webprojects  
+
|title=Flask + Bootstrap 4 static components and templates for webprojects
 
|url=https://github.com/WolfgangFahl/pyFlaskBootstrap4
 
|url=https://github.com/WolfgangFahl/pyFlaskBootstrap4
|version=0.0.4
+
|version=0.7.0
|date=2021/01/09
+
|description=Flask + Bootstrap 4 static components and templates for webprojects
 +
|date=2023-10-29
 +
|since=2021-01-08
 
|storemode=property
 
|storemode=property
 
}}
 
}}
= Installation =
+
=tickets=
<source lang='bash'>
+
= What is it? =
pip install pyFlaskBootstrap4
+
A python library to get
</source>
+
* 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
 +
# [https://sqlalchemy-utils.readthedocs.io/en/latest/ SQLAlchemy-Utils custom data types and utility functions]
 +
# [https://wtforms.readthedocs.io/en/2.3.x/ WTForms data validation, CSRF protection, I18N and more]
 +
# [https://pypi.org/project/pydevd/ pydevd remote debugging support]
 +
# [https://stackoverflow.com/a/65448164/1497139 Using flask inside class]
 +
# [https://github.com/WolfgangFahl/pyFlaskBootstrap4/issues/4 Widgets]
 +
# [https://github.com/WolfgangFahl/pyFlaskBootstrap4/issues/9 login blueprint]
 +
# [https://datatables.net/examples/styling/bootstrap4 datatables]
 +
# [[Server Sent Events]] Support
 +
 
 +
= Demo =
 +
see
 +
* http://fb4demo.bitplan.com/
 +
 
 +
{{pip|pyFlaskBootstrap4}}
 +
 
 
= Tutorial =
 
= Tutorial =
 
== HelloWeb application ==
 
== HelloWeb application ==
Line 56: Line 85:
 
     helloWeb.run(args)
 
     helloWeb.run(args)
 
</source>
 
</source>
 +
= Server Sent Events =
 +
== Progressbar and time display Example ==
 +
=== Client Side Javascript / HTML ===
 +
<source lang='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 %}
 +
</source>
 +
=== Server Side Flask Code ===
 +
<source lang='python'>
 +
...
 +
        @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")
 +
</source>
 +
 +
= Links =
 +
* https://icons.getbootstrap.com/
 +
* http://helloflask.com/en/
 +
* https://wtforms.readthedocs.io/en/2.3.x/

Latest revision as of 10:16, 29 October 2023

OsProject

OsProject
edit
id  PyFlaskBootstrap4
state  dropped
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  

tickets

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

Demo

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