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
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
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
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
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!