No es quizá la mejor manera de empezar la sección de Grails, pero introducir el tema de los layouts (templates) es algo que encuentro muy importante, puesto que es lo primer que mas de uno queremos hacer cuando empezamos desde 0 una nueva aplicación.
Grails, como en otros muchos temas, hace muy sencillo la creación de las pantallas y vistas de nuestra aplicación a partir layouts.
Los layouts son templates, o lo que es lo mismo, plantillas. Grails utiliza plantillas para aplicar estilos y estructuras a todas las páginas de la aplicación. Aún así, si se desea, pueden obviarse.
Grails hace uso del framework de layouttering SiteMesh (podéis ver mas información de su funcionamiento y estructura en su web)
El main layout lo encontraremos en el apartado de views / layouts de nuestro proyecto: grails_app/views/layouts/main.gsp. No es mas que una página gsp (Grails Server Page) que contendrá la estructura básica de aquellas páginas a las que queramos aplicar dicho template. Veamos un caso práctico.
Para empezar, os recomiendo hacer las pruebas con un proyecto nuevo en blanco.
Creación de una página en blanco
Podéis probar a crear una página nueva (con su controlador) para poder realizar esta prueba. Yo lo que os recomiendo es empezar desde ya a editar vuestra aplicación. Por ello, lo que os propongo es editar vuestro index.gsp. De este modo, cualquier cambio que realicemos lo podremos ver rápidamente accediendo a la aplicación, sin necesidad de hacer nada mas. Si no tenéis nada qué perder, probad a hacer esto:
<html>
<head>
<title>Pruebas con layaouts</title>
</head>
<body>
<h1>Bienvenidos!!!</h1>
</body>
</html>
Ahora si accedéis a vuestra aplicación, veréis que el estilo es de un formato básico html. Sin mucha floritura… No es como cuando accedéis por primera vez a la aplicación después de crearla, en la que se está aplicando el estilo de Grails. Si accedéis a ver su código fuente podréis ver que es tal cuál lo que hemos editado. Sin contenidos extra en el head…
Aplicando layouts
Ahora para realizar otra prueba rápida lo que haremos es aplicarle a esta nueva página el estilo de Grails, para poder ver rápidamente cómo funciona el tinglado. El layout por defecto de una aplicación Grails nueva se llama main.gsp y podéis encontrarlo en la carpeta de layouts que os comentaba al principio: grails_app/views/layouts/main.gsp
<html>
<head>
<meta name="layout" content="main" />
<title>Pruebas con layaouts</title>
</head>
<body>
<h1>Bienvenidos!!!</h1>
</body>
</html>
Hemos añadido la directiva <meta name=”layout” content=”main” /> a nuestra página (línea 3). Esto le indica a la página que debe hacer uso del layout main. Actualizad el navegador y veréis que ahora lo que ha sucedido es que hemos aplicado los estilos y contenidos por defecto de Grails.
Este es el main layout de Grails:
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"><!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title><g:layoutTitle default="Grails"/></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico')}" type="image/x-icon">
<link rel="apple-touch-icon" href="${resource(dir: 'images', file: 'apple-touch-icon.png')}">
<link rel="apple-touch-icon" sizes="114x114" href="${resource(dir: 'images', file: 'apple-touch-icon-retina.png')}">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'main.css')}" type="text/css">
<link rel="stylesheet" href="${resource(dir: 'css', file: 'mobile.css')}" type="text/css">
<g:layoutHead/>
<r:layoutResources />
</head>
<body>
<div id="grailsLogo" role="banner"><a href="http://grails.org"><img src="${resource(dir: 'images', file: 'grails_logo.png')}" alt="Grails"/></a></div>
<g:layoutBody/>
<div class="footer" role="contentinfo"></div>
<div id="spinner" class="spinner" style="display:none;"><g:message code="spinner.alt" default="Loading…"/></div>
<g:javascript library="application"/>
<r:layoutResources />
</body>
</html>
Ahora podéis volver a consultar su código fuente. Podréis observar que se han añadido una serie de contenidos extra, tanto al head como al body. Esto es porque se ha aplicado el main layout.
Qué hay de importante aquí? Pues bastante…
- línea 10: el título por defecto, se aplicará a todas las páginas que incluyan este layout
- líneas de 11 a la 16: contenidos de estilos y scripts, que también serán incluidos en el head de nuestra
- línea 17: la directiva <g:layoutHead/>. Le indica al layout que se debe incluir en este espacio el contenido head de su posible layout padre
- línea 18: <r:layoutResources />. Del mismo modo, incluimos los recursos declarados en su layout padre.
- en la zona de body sucede lo mismo, para las directivas <g:layoutBody/> y <r:layoutResources />
De este modo, si aplicamos estas directivas a nuestra página podremos obtener los contenidos del layout…
Ahora, todas aquellas páginas que incluyan el main layout dispondrán de este contenido. Podemos tener tantos layouts como nos sea necesario, creándolos en la carpeta de layout, de modo que podamos aplicar a cada página un comportamiento diferente, según nos interese. Por ejemplo, mediante directivas if, decidir en función de la resolución uno u otro estilo, o la inclusión o no de ciertos scripts, etc…
Crear un layout “maestro”
Si seguimos este modo de trabajo, puede llegar a ser un poco costoso acordarse cada vez que creamos una pantalla nueva el incluir el layout que nos interesa. Si no precisamos cambiar muy a menudo de layout, podemos aplicar un layout maestro, o por defecto. Es tan sencillo como crear un layout llamado application.gsp. A partir de ahora, cualquier página que no lo indique explícitamente, extenderá dicho layout. Con esto conseguimos disponer de un layout por defecto sin necesidad de tener que incluirlo continuamente en todas nuestras pantallas.
A partir de aquí…
Es trabajo vuestro extender y crear vuestros propios layouts. Quizá si es la primera vez que lo veis, no os resulte muy interesante… pero a medida que tengáis un volumen de pantallas considerable a manejar, empezaréis a ver la importancia de los layouts.
Espero haber sido de ayuda.
Jordi
