Esta entrada quiero que sea una compilación de varias cosas que hemos visto por separado. Por un lado, trabajar con Flask y Blueprints (el microframework de Python para desarrollo web) para el lado del servidor, y utilizar Bootstrap en el cliente. Se trata de aprender a utilizar una plantilla de Bootstrap, con un ejemplo real, y cómo en pocos minutos tener un entorno de trabajo para comenzar a trabajar.
El ejercicio consistirá en aprovechar una plantilla creada con Bootstrap, y modificar el menú para que muestre varias informaciones, que sólo se cargan una vez (usar tabs, desde el menú principal).
Acerca del por qué de esta entrada
He dedicido escribir esta entrada porque mi idea inicial era escribir un montón de código Javascript para hacer esa funcionalidad, que …. más adelante he comprobado cómo de fácil es realizarlo usando las clases de Twitter Bootstrap.
Quiero ofrecer un sencillo ejemplo también de integración de varias tecnologías de las que he hablado en el blog por separado, o bien con ejemplos sencillos, que no tienen nada que ver con la complejidad que luego surge al realizar proyectos.
Espero que os sirva, pues tecnologías muy diferentes se acoplan a la perfección. En este caso, Flask por parte de Python, y Twitter Bootratrap mediante HTML5, CSS, Javascript.
Plantilla de Flask
En la entrada sobre Flask para grandes aplicaciones os dejé una plantilla que incluía trabajar con Blueprints. Está todo preparado para descargar y funcionar. Será la base del proyecto. Sin embargo, necesitamos utilizar otra plantilla que se ajuste más a lo que necesitamos.
Descarga de plantillas Bootstrap
Dando un vistazo por StartBootstrap, un sitio donde puedes descargarte plantillas realizadas con Bootstrap, decido descargarme esta: http://startbootstrap.com/template-overviews/the-big-picture/. Si descomprimes todo, y abres index.html, verás en local la plantilla descargada (hasta aquí, nada es nuevo).
Siguiendo las indicaciones de la plantilla Flask que vamos a utilizar, los directorios css, javascript y fonts los ponemos en el directorio static.
El fichero index.html lo renombramos a base.html y lo ponemos en templates (de app, no del blueprint)
Modificando la plantilla
Para ajustar la plantilla para trabajar con Flask, hay que realizar una importante modificación en la plantilla base.html: todas las referencias a archivos CSS o JS deben modificarse, y en lugar de
<link href=”css/bootstrap.min.css” rel=”stylesheet”>
hay que cambiar a
<link href=”{{ url_for(‘static’, filename=’css/bootstrap.min.css’) }}” rel=”stylesheet”>
Con este cambio, nuestra plantilla base.html ya tendrá la referencia correcta a los ficheros estáticos.
Preparando los DIVs con la información dentro del contenedor principal
Dentro del contenedor principal, vamos a crear tres DIVs con lo que se quiere mostrar. Cada DIV estará vinculado a un item del menú:
<div id="bloque-1" class="tab-pane fade in active">Bloque 1</div> <div id="bloque-2" class="tab-pane fade">Bloque 2</div> <div id="bloque-3" class="tab-pane fade">Las modificaciones a realizar en el menú consistirán en seguir las indicaciones para crear tabs, esto es, asignar data-toggle y la referencia correcta, quedando así:
<!-- Collect the nav links, forms, and other content for toggling --><divclass="collapse navbar-collapse"id="main_menu"><ulclass="nav navbar-nav"><li><adata-toggle="tab"href="#bloque-1">Info</a></li><li><adata-toggle="tab"href="#bloque-2">Datos</a></li><li><adata-toggle="tab"href="#bloque-3">Graficos</a></li></ul></div>Para asociar el menú con los DIVs, de nuevo hay que modificar los DIVs primeros, que hay que agrupar en un contenedor con la clase tab-content, y cada div asignar la clase tab-pane fade, tal que así:
<!-- Page Content --><divclass="container"><divclass="tab-content"><divid="bloque-1"class="tab-pane fade in active">Bloque 1</div><divid="bloque-2"class="tab-pane fade">Bloque 2</div><divid="bloque-3"class="tab-pane fade">{% block content %}{% endblock %}</div></div></div>En el tercer bloque hemos habilitado un block para que jinja2 (el motor de plantillas utilizado por Flask) sea el que trabaje.
Tenéis el proyecto disponible en GitHub. También he subido la plantilla modificada para incluir este comportamiento, donde la diferencia con el original está en la creación de tab desde el menú. Podéis ver su funcionamiento aquí.
Espero que hayáis comprobado cómo se reutilizan plantillas HTML5 para integrarlas en proyectos Flask, que con mínimas modificaciones nos permiten ahorrar mucho tiempo y esfuerzo para concentrarnos en el desarrollo, y no en preparar un entorno.
Happy conding!