Plantillas Jinja2 en GAE

Posted by in HTML5, Python

Tras dos entradas hablando y probando Google App Engine con Python, seguimos profundizando, y es hora de jugar con plantillas HTML, en lugar de mezclar HTML y Python, y no a cómo se programa con ASP Clásico, que sí es mezcla. Utilizamos las plantillas Jinja2 en GAE, que son muy socorridas, muy similar a las empleadas con HandleBars en Javascript, aunque cuando requieres cosas más complejas, hay notables diferencias.

Usando plantillas jinja2

Si bien lo realizado hasta ahora es bastante interesante, no queda sino comentar que es un poco cutre tener el HTML dentro de una variable, y que seria mucho mejor utilizar plantillas, así que probamos jinja2, cuya documentación encontramos aquí: http://jinja.pocoo.org/docs/intro/#.

Para incluir plantillas, nada mejor que seguir las instrucciones de Google Developers: https://developers.google.com/appengine/docs/python/gettingstartedpython27/templates.

Lo primero es incluir la libreria en app.yaml:, que queremos usar jinja2, y la última versión:

- name: jinja2
  version: latest

Lo siguiente es crear un «ambiente» para rescatar las plantillas, ya dentro de nuestro archivo en Python:

JINJA_ENVIRONMENT = jinja2.Environment(
    loader=jinja2.FileSystemLoader(os.path.dirname(__file__)),
    extensions=['jinja2.ext.autoescape'],
    autoescape=True)

Ahora toda hacer una plantilla, que será el contenido que tenía la variable html en el anterior ejemplo, y que llamaremos formulario.html::


<html lang="es">
<head>
<meta charset="utf-8"/>
<title>Form Example</title>
</head>
<body>
<h1>Probando Jinja2 en GAE - Manejandodatos.es</h1>

<p>{{message}}</p>
<form method="post">
<label for="firstName">Name:</label>
<input name="firstName" type="text" value="{{nombre}}"/><br />
<input name="" type="submit" value="Save"/>
</form>
</body>
</html>

Y para hacer uso de una plantilla, la rescato del «ambiente», y la digo que la muestre:


def get(self):
tem_values = { 'message': 'Probando' }
template = JINJA_ENVIRONMENT.get_template('formulario.html')
self.response.write(template.render(tem_values))

Cómo en la plantilla hemos utilizado {{variable}}, es necesario enviarle un diccionario a la plantilla para que cambie los nombres por los valores. Y de esta maneja vemos el resultado:

Probando plantillas jinja2

Probando plantillas jinja2

Usando una base como plantilla

Casi que lo mejor que podemos hacer es hacernos con una plantilla «base«, que sea la que contiene el diseño de nuestra aplicación. Para ello, vamos a probar una herramienta llamada layoutit.com, donde podemos crear webs con Twitter Bootstrap, y una vez creadas, podemos hacernos con todo el código HTML, CSS y Javascript.Yo me he creado una plantilla básica, aunque luego la he modificado directamente para ajustarla a este ejemplo, y que será la base del ejemplo que aquí muestro, y que tiene el siguiente aspecto (estamos viendo un archivo estático, no desde un servidor):

 

Plantilla Manejando datos

Plantilla Manejando datos

El fichero base.html lo hemos colocado en el directorio templates, mientras que el resto de ficheros CSS, Javascript, imágenes, … lo hemos puesto en una nueva carpeta llamada static. Lanzamos la aplicación y muestra lo siguiente:

Usando una plantilla

Usando una plantilla

Cómo puede comprobarse, no carga los archivos estáticos, así que necesitamos modificar el archivo app.yaml para indicarle que el directorio static lo cargue como estático.


application: templates
version: 1
runtime: python27
api_version: 1
threadsafe: yes

handlers:
- url: /favicon\.ico
static_files: favicon.ico
upload: favicon\.ico

- url: /static
static_dir: static

- url: .*
script: ejemplo_plantilla.app

libraries:
- name: webapp2
version: "2.5.2"
- name: jinja2
version: latest

También será necesario modificar la plantilla base.html de forma que donde aparezca css/ deberá aparecer /static/css/, e igual para los img y js. Una vez cambiado, recargamos y comprobamos que ya vemos la plantilla desde el servidor:

 

Plantilla funcionando desde el servidor

Plantilla funcionando desde el servidor

La plantilla la puedes descargar gae_plantilla_manejandodatos, y el proyecto completo gae_ejemplo_templates.

Y de momento, esto es todo … que no es poco! Happy coding!