Web development used to be so hard (and static). (read <bold>)
Now everyone realizes (along with version control and automated testing) that decoupling views and displays from dynamic code makes everyone's life easier! (Refresh your colors and layout without having to touch your backend logic! Re-engineer your persistence layer and business logic but leave your uber wow design intact! Allow front end and back end developers to work in parallel!)
Jinja2 is an excellent framework for python developers (to go with your uwsgi + django or webapp2) to get html templates (do not repeat yourself!) that can show off all of your backend python data magic with some pizazz.
It's fairly easy to do all sorts of powerful things (like accessing variables, loops, etc.)
http://jinja.pocoo.org/docs/
When combined with css and jquery (i.e. tablesorter) you can quickly throw together a decent looking interactive experience.
http://jquery.com/download/ http://tablesorter.com/docs/#Download
http://john-pfeiffer.appspot.com/
Your webapp2 project layout and code...
<pre>
assets/css/tablesorter.css # renamed from style.css to be clearer, ALSO, modify the relative paths to be /images/tablesorter/asc.gif
assets/images/tablesorter/asc.gif (bg.gif, desc.gif, etc.)
assets/js/jquery-1.9.1.min.js
assets/js/jquery.tablesorter.min.js
mainhandler.py
templates/main.html
app.yaml (only required if using AppEngine)
main.py
routes.py
APP.YAML
application: john-jinja2
version: 1
runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico
- url: /css
static_dir: assets/css
- url: /js
static_dir: assets/js
- url: /images
static_dir: assets/images
- url: /.*
script: main.app
libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest
MAIN.PY
# -*- coding: utf-8 -*-
import webapp2
from routes import entry_points
# must be named "application" for uwsgi webapp2, in AppEngine it should be "app"
application = webapp2.WSGIApplication( entry_points , debug = False )
ROUTES.PY
# -*- coding: utf-8 -*-
import webapp2
from mainhandler import MainHandler
# Map url's to handlers in the handlers module , optionally choosing specific target method and request type
entry_points = [ webapp2.Route( '/main', handler=MainHandler, handler_method='get', methods=['GET'] ),
]
MAINHANDLER.PY
# -*- coding: utf-8 -*-
import webapp2
import jinja2
import os
# weird hack to ensure we go up a directory level to correctly find the templates directory
jinja_environment = jinja2.Environment( loader = jinja2.FileSystemLoader( os.path.dirname(__file__) ) )
class MainHandler( webapp2.RequestHandler ):
def get( self ):
result_list = [ ('apples','green'), ('bananas','yellow'), ('cherries','red') ] # a list of tuples
template = jinja_environment.get_template( 'templates/main.html' )
template_values = { 'title': 'fruits and colors',
'body_content': 'fruits and colors',
'result_list': result_list }
self.response.content_type = 'text/html'
self.response.out.write( template.render( template_values ) )
TEMPLATES/MAIN.HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{title}}</title>
<link type="text/css" rel="stylesheet" href="/css/tablesorter.css" />
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/jquery.tablesorter.min.js"></script>
</head>
<body>
{{body_content}}
<div>
<table id="results" class="tablesorter">
<thead>
<tr>
<th>Fruit</th>
<th>Color</th>
</tr>
</thead>
<tbody>
{% for item in result_list %}
<tr>
<td><a href="/{{item[0]}}">{{ item[0] }}</a></td><td>{{ item[1] }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div><br/>
<script type="text/javascript">
$(document).ready(function() {
$("#results").tablesorter( {sortList:[[0,1]]} ); # sort descending by the first element
});
</script>
</body>
</html>
IF NOT USING APPENGINE, /etc/init.d/uwsgi.sh might look like...
#!/bin/bash
# 2013-02-22 johnpfeiffer
start(){
/usr/local/bin/uwsgi --pidfile /var/www/pidfile-uwsgi.pid --touch-reload=/var/www/pidfile-uwsgi.pid --logto2 /var/www/python-john/uwsgi.log --http :8080 --wsgi-file /var/www/main.py --pythonpath /var/www/ &
}
stop(){
kill -INT `cat /var/www/pidfile-uwsgi.pid`
sleep 1
}
status(){
ps aux | grep uwsgi
}
case "$1" in
status)
status
exit 0
;;
start)
start
exit 0
;;
stop)
stop
exit 0
;;
reload|restart|force-reload)
stop
start
exit 0
;;
**)
echo "Usage: $0 {start|stop|reload}" 1>&2
exit 1
;;
esac
</pre>
# Example of modifications to tablesorter.css (style.css) to accomodate AppEngine static file paths
/* sortable tables */
table.tablesorter {
font-family: arial;
background-color: #e0e0e0;
width: 100%;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
background: #dfdfdf;
background: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#d3d3d3));
background: -moz-linear-gradient(top, #eaeaea, #d3d3d3);
background: -ms-linear-gradient(top, #eaeaea, #d3d3d3);
background: -o-linear-gradient(top, #eaeaea, #d3d3d3);
padding: 4px;
font-size: 75%;
}
table.tablesorter thead tr .header {
background-image: url('/images/tablesorter/bg.gif');
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
padding-right: 18px;
}
table.tablesorter tbody td {
color: #3D3D3D;
padding: 4px;
background-color: #FFF;
vertical-align: top;
font-size: 75%;
}
table.tablesorter thead tr .headerSortUp {
background-image: url('/images/tablesorter/asc.gif');
padding-right: 18px;
}
table.tablesorter thead tr .headerSortDown {
background-image: url('/images/tablesorter/desc.gif');
padding-right: 18px;
}