Plantillas HTML5 en Java Con Thymeleaf

Plantillas HTML5 en Java con Thymeleaf http://www.genbetadev.com/java-j2ee/plantillas-html5-en-jav...
Portada
Lo Mejor
Productos
Respuestas
Comunidad
Java-J2EE
Plantillas HTML5 en Java con Thymeleaf

4 comentarios
Ricardo Borillo 8 de marzo de 2012 | 09:00
En las aplicaciones web desarrolladas con Java siempre se ha contado con mltiples
opciones a la hora de presentar contenido mediante plantillas.
Quiz la opcin ms bsica es la ofrecida por JSP, donde definimos la presentacin de

nuestras pginas utilizando marcado directamente o mediante JSP tags. Posteriormente,
han ido apareciendo opciones mucho ms potentes como Apache Velocity u otras ms
generales como Freemarker. En cualquier caso, la lista de posibilidades como es habitual en
Java suele ser larga.
En esta ocasin y aprovechando que el 9 de Febrero se public su versin 2.0, vamos a

examinar Thymeleaf.
Caractersticas principales
Thymeleaf es un framework de templating que promete flexibilidad y adecuacin a los
nuevos estndares como HTML5. Entre sus muchas caractersticas, cabe destacar las
siguientes:
Diseado para XML, XHTML y HTML5, pero extensible a otros formatos.

Puede ser usado en cualquier mbito, no slo Web. No tiene dependencias con el API
de servlets.
Tiene soporte para la internacionalizacin del contenido.
Ofrece una alto rendimiento gracias a la implementacin de un sistema de cach
Integracin con Spring
Fcil de utilizar y de integrar al slo proporcionar atributos que enriquecen el
1 de 13 08/03/12 22:38
marcado sin incorporar tags nuevos.

Soporte para la evaluacin de expresiones: OGNL (mdulo estndar) o SpEL
(Spring).
Estructura mnima
Para comenzar, podemos definir una primera plantilla simple.html con Thymeleaf que
recoja el valor de una variable titulo y lo muestre mediante un h1:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<h1 th:text="${titulo}">Ttulo principal de la pgina</h1>
</body>
</html>
Para poder ejecutarla y pasarle el valor de las variables que necesita, debemos completar
tres simples pasos.
Encontrar plantillas
El primero de los pasos es conseguir un TemplateResolver. Este interfaz es la base para que
Thymeleaf sea capaz de encontrar la plantilla que queremos usar, incluso si esta se
encuentra almacenada en la cach.
Tenemos varias implementaciones de este interfaz Java. Las ms comunes son

ServletContextTemplateResolver, para trabajar en el contexto de una aplicacin web o
ClassLoaderTemplateResolver para el resto de casos generales.
TemplateResolver templateResolver = new ClassLoaderTemplateResolver();

templateResolver.setTemplateMode(HTML5);
templateResolver.setSuffix(.html);
templateResolver.setCacheable(true);
templateResolver.setCacheTTLMs(3600000L);
Como vemos en el ejemplo de cdigo, en todas estas implementaciones tendremos la

posibilidad de indicar:
La ruta exacta al directorio que contiene nuestras plantillas (suffix).

El modo de trabajo que deseamos: XML, VALIDXML, XHTML, VALIDXHTML, HTML5 o
LEGACYHTML5.
Si la cach est activa o no (recomendable poner esta opcin a false durante las
pruebas).
El tiempo de cacheo de las plantillas en milisegundos.
Obtener el motor de transformacin que realice el procesamiento
Para obtener el motor de transformacin, slo debemos instanciarlo y pasarle el

TemplateResolver construido en el apartado anterior:
TemplateEngine templateEngine = new TemplateEngine();
2 de 13 08/03/12 22:38
templateEngine.setTemplateResolver(templateResolver);
Pasar los parmetros y lanzar la transformacin
Ya slo nos queda preparar los parmetros que va a necesitar la plantilla diseada. En este
caso, nicamente necesitamos un parmetro llamado titulo, y ya podemos lanzar el
procesamiento:
IContext context = new Context();

context.getVariables().put(titulo, Mi ttulo en la plantilla);
String result = templateEngine.process(simple, context);
De nuevo, tenemos varias implementaciones del interface IContext en funcin de si nuestro

entorno es web (WebContext) o no (Context).
Si examinamos el ejemplo anterior, veremos que al mtodo process del motor de

procesamiento le pasamos el nombre del fichero que contiene la plantilla pero sin la
extensin .html. Es necesario pasarle slo simple, ya que en el primer apartado ya hemos
establecido .html como suffix.
En definitiva, el resultado de la transformacin debera de ser finalmente el esperado:
<!DOCTYPE html>
<html>
<body>
<h1>Mi ttulo en la plantilla</h1>
</body>
</html>
Expresiones y el lenguaje OGNL

Thymeleaf soporta OGNL (Object-Graph Navigation Language) para la definicin de
expresiones y como forma de acceder a las variables que le proporcionamos a la plantilla
como entrada.
Este es un lenguaje que, en el contexto de Thymeleaf, simplifica y flexibiliza la creacin de

plantillas. A continuacin, veremos algunos ejemplos.
Variables simples
Establecidas a partir de un valor textual o de una variable:
<input type="text" name="nombre" value="Pedro Perez" th:value="${nombre}" />
O tambin a partir de un bean que contenga un mtodo getter con el nombre de la

referencia (getNombre):
<input type="text" name="nombre" value="Pedro Perez" th:value="${user.nombre}" />
Variables simples con soporte de internacionalizacin
3 de 13 08/03/12 22:38
<h1 th:text="#{bienvenida}">Texto de bienvenida</h1>
En este ejemplo, al preceder a la variable bienvenida con el caracter # en lugar del $, le

indicamos al motor que establezca su valor en funcin del Locale establecido.
Para el Locale por defecto, buscar el valor de la variable bienvenida en un fichero

.properties que deber llamarse igual que la plantilla (simple.properties si tomamos como
referencia el ejemplo inicial). As, podremos proporcionar distintas versiones en funcin del
idioma: simple_es.properties, simple_en.properties, etc
Todos estos ficheros de localizacin de cadenas, deben almacenarse en el mismo sitio que
las plantillas.
En el cdigo de nuestra aplicacin, nuestro cdigo en servidor ser el siguiente:
String result = templateEngine.process("simple_multilang", new Context(new Locale("en")));
De forma que si tenemos un fichero simple_multilang_en.properties con el siguiente

contenido:
bienvenida=Welcome to Genbeta Dev web!!
El resultado final obtenido ser:
<h1>Welcome to Genbeta Dev web!!</h1>
Bucles
Con Thymeleaf podemos iterar de forma muy sencilla sobre una coleccin que recibimos
como parmetro.
Por ejemplo, vamos a pasar un parmetro a la plantilla llamado productos. El valor de este
parmetro ser una coleccin definida por un ArrayList de instancias de tipo Producto.
Producto es un bean y sus atributos principales son id y nombre. En este escenario,
podemos iterar fcilmente sobre esta coleccin y mostrar todos sus valores:

<tr th:each="prod : ${productos}">
<td th:text="${prod.id}">Cdigo del producto</td>
<td th:text="${prod.nobre}">Nombre del producto</td>
</tr>

De forma que simplemente creando la coleccin en el cdigo del servidor:
Producto producto = new Producto();

producto.setId(1);
producto.setNombre("Producto 1");
IContext context = new Context();
context.getVariables().put("productos", Collections.singletonList(producto));
String result = templateEngine.process("colecciones", context);
Obtendremos la tabla resultado:
4 de 13 08/03/12 22:38
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<td>1</td>
<td>Producto 1</td>
</tr>
</table>
</body>
</html>
Conclusiones
Thymeleaf es un motor de procesamiento muy flexible, adaptado a las necesidades
actuales, poco intrusivo en el marcado y muy muy rpido. Si te han gustado las referencias
a las estructuras bsicas que se pueden emplear o si eres usuario de Spring Framework, no
te pierdas la documentacin oficial para una revisin de toda la potencia que ofrece.
Pgina del proyecto | Thymeleaf
Cdigo de ejemplo | Github
me gusta 0
1
Twittear 12
Categoras: Java-J2EE, Desarrollo web, Frameworks

Tags: templating
Compartir
TW
FB
MN
TT
BT
DIU
Qu prejuicio hacia los profesionales de la informtica te resulta ms molesto? La

pregunta de la semana
Mezzanine, otro ms en la familia de los CMS... pero esta vez el padre es Django
Genbetadev
pasin por el software
Hola! Entra
5 de 13 08/03/12 22:38
Mvil
RSS
Correo
Facebook
Twitter
Widget
Busca en Genbetadev con Google
Lee tambin:
Xataka
Xataka Android
Tecnologa Pyme
Ver ms
Anunciate aqu
Anunciate aqu
Anunciate aqu
Quieres saber ms?

Artculos
Artculos relacionados que probablemente tambin te interesen
LungoJS usando RESTful + Templating + Cache (screencast) hace 2 semanas
El horror de maquetar una newsletter un poco menos frustrante hace 6 das
Diseando tu nuevo proyecto web con Bootstrap 2.0 (II) hace una semana
Ringmark, conjunto de pruebas para comprobar las capacidades del navegador

mvil hace una semana
Jira 5 en profundidad, resea desde la misma Atlassian hace una semana
Ver ms
Respuestas
Preguntas sobre este tema que ha contestado la comunidad
Te has quedado con dudas?
Para enviar tu pregunta tienes que identificarte
6 de 13 08/03/12 22:38
Entra
o conctate con Facebook
Connect
+ Deja tu comentario
Comentarios
Ms valorados
Recientes
Cronolgico
!
Carlitos Way |
Hola. El enlace a Thymeleaf en el prrafo introductorio no funciona...
Responder
8 mar 2012 14:20
Karma 8 (0 votos) | normal
Respondiendo a #1:
2
!
borillo | xml-utils.com
Toda la razn. Ya est corregido. Gracias por el aviso :)
Responder
8 mar 2012 14:38
3
!
crucoba |
Bienvenido/a en ingls es "Welcome" con una "L" solo.
-- editado por ltima vez a las 14:42
Responder
9 mar 2012 14:41
Respondiendo a #3:
4
7 de 13 08/03/12 22:38
!
borillo | xml-utils.com
Ups :) Thx. Corregido tambin.
Responder
9 mar 2012 14:49
Escribir un comentario
Para hacer un comentario es necesario que te identifiques: ENTRA o conctate con
Facebook Connect
Mejor comentario
Hola. El enlace a Thymeleaf en el prrafo introductorio no funci...
Carlitos Way
Destacados
8 de 13 08/03/12 22:38
Editores
Txema Rodrguez
Jorge Rubira
Fernando Siles
mangrar
Oscar Campos
Juan Quijano
Johnbo
Ricardo Borillo
lvaro Aroca
Envanos pistas
Anunciate aqu
Comentarios
ltimos
Lo+comentado
1. Mezzanine, otro ms en la familia de los CMS... pero esta vez el padre es Django
2. Plantillas HTML5 en Java con Thymeleaf
3. Qu prejuicio hacia los profesionales de la informtica te resulta ms molesto? La
pregunta de la semana
4. Sublime Text 2 el editor de texto definitivo?
5. Los rincones de trabajo de los genbetadeveros: el resultado final
6. Cmo se distribuye el empleo entre los desarrolladores de iOS y Android
7. Por qu no deberas contratar ms programadores
8. Visual Studio 11 Beta, una primera opinin
9. Por qu Google sigue siendo el buscador por excelencia en una sla imagen
9 de 13 08/03/12 22:38
10. El horror de maquetar una newsletter un poco menos frustrante
Secciones
Algoritmos
Desarrolladores
Desarrollo freelance
Formacin
Trabajar como desarrollador
Desarrollo de aplicaciones
Bases de datos
Desarrollo aplicaciones mviles
Desarrollo web
Frameworks
Gestores de contenido
Herramientas
Metodologas de programacin
Paradigmas de programacin
Programacin de videojuegos
Programacin en la nube
Seguridad informtica
Sistemas de control de versiones
General
Actualidad
Desarrolladores
Entrevistas
Genbeta Dev
Modelos de negocio
Software libre y licencias
Lenguajes de programacin
Lenguajes y plataformas
C#/.NET
C/C++
Java-J2EE
JavaScript
Objective-C / Cocoa
PHP
10 de 13 08/03/12 22:38
Python
Ruby
Archivo
Contenidos recomendados en Genbetadev

Especiales
Desarrollo en equipo
Entrevistas de trabajo para desarrolladores
Herramientas Imprescindibles para Desarrolladores
Consejos para desarrolladores
Consejos para trabajar como freelance

Mejora tu concentracin con Pomodoro
Guas
Diseo de base de datos de poblaciones, pases y provincias

Novedades en Firefox 4 para desarrolladores
Secciones de Genbeta Dev
La pregunta de la semana
WSL Weblogs SL
Tecnologa
Xataka
Xataka Mvil
Xataka Foto
Xataka On
Xataka Ciencia
Genbeta
Applesfera
VidaExtra
Nacin Red
Xataka Android
Genbeta Dev
Genbeta Social Media
Entretenimiento
11 de 13 08/03/12 22:38
Blog de cine
Vaya tele!
Hipersnica
Diario del viajero
Papel en blanco
Poprosa
Zona Fandom
Fandemia
Estilos de vida
Trendencias
Bebs y ms
Directo al paladar
Compradiccin
Decoesfera
Embelezzia
Vitnica
Ambiente G
Trendencias Belleza
Trendencias Hombre
Peques y ms
Motor y deportes
Motorpasin
Motorpasin F1
Motorpasin Moto
Notas de ftbol
Fuera de lmites
Motorpasin Futuro
Economa
El Blog Salmn
Pymes y Autnomos
Tecnologa Pyme
Ahorro diario
Participamos en
eBayers
Circula seguro
Actibva
Anexo-m
Happing Magazine
Blog Sage
12 de 13 08/03/12 22:38
Optimismo Digital
1001 experiencias
En Naranja
Publicaciones en Latinoamrica
Tecnologia
Xataka Brasil
Xataka Mxico
Estilos de vida
tRendncias Brasil
Motor y deportes
Motorpasin Brasil
volver arriba
Acerca de Genbetadev | Condiciones de uso | Aviso legal | Publicidad | Ayuda | Contacto
13 de 13 08/03/12 22:38

Plantillas HTML5 en Java Con Thymeleaf

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Plantillas HTML5 en Java Con Thymeleaf

Transféré par

Droits d'auteur :

Formats disponibles

Plantillas HTML5 en Java con Thymeleaf http://www.genbetadev.com/java-j2ee/plantillas-html5-en-jav...

Plantillas HTML5 en Java con Thymeleaf

Ricardo Borillo 8 de marzo de 2012 | 09:00

Quiz la opcin ms bsica es la ofrecida por JSP, donde definimos la presentacin de

En esta ocasin y aprovechando que el 9 de Febrero se public su versin 2.0, vamos a

Diseado para XML, XHTML y HTML5, pero extensible a otros formatos.

marcado sin incorporar tags nuevos.

Tenemos varias implementaciones de este interfaz Java. Las ms comunes son

TemplateResolver templateResolver = new ClassLoaderTemplateResolver();

Como vemos en el ejemplo de cdigo, en todas estas implementaciones tendremos la

La ruta exacta al directorio que contiene nuestras plantillas (suffix).

Obtener el motor de transformacin que realice el procesamiento

Para obtener el motor de transformacin, slo debemos instanciarlo y pasarle el

TemplateEngine templateEngine = new TemplateEngine();

Pasar los parmetros y lanzar la transformacin

IContext context = new Context();

De nuevo, tenemos varias implementaciones del interface IContext en funcin de si nuestro

Si examinamos el ejemplo anterior, veremos que al mtodo process del motor de

En definitiva, el resultado de la transformacin debera de ser finalmente el esperado:

Expresiones y el lenguaje OGNL

Este es un lenguaje que, en el contexto de Thymeleaf, simplifica y flexibiliza la creacin de

Establecidas a partir de un valor textual o de una variable:

<input type="text" name="nombre" value="Pedro Perez" th:value="${nombre}" />

O tambin a partir de un bean que contenga un mtodo getter con el nombre de la

<input type="text" name="nombre" value="Pedro Perez" th:value="${user.nombre}" />

Variables simples con soporte de internacionalizacin

<h1 th:text="#{bienvenida}">Texto de bienvenida</h1>

En este ejemplo, al preceder a la variable bienvenida con el caracter # en lugar del $, le

Para el Locale por defecto, buscar el valor de la variable bienvenida en un fichero

En el cdigo de nuestra aplicacin, nuestro cdigo en servidor ser el siguiente:

String result = templateEngine.process("simple_multilang", new Context(new Locale("en")));

De forma que si tenemos un fichero simple_multilang_en.properties con el siguiente

bienvenida=Welcome to Genbeta Dev web!!

El resultado final obtenido ser:

<h1>Welcome to Genbeta Dev web!!</h1>

De forma que simplemente creando la coleccin en el cdigo del servidor:

Producto producto = new Producto();

Obtendremos la tabla resultado:

Pgina del proyecto | Thymeleaf

Cdigo de ejemplo | Github

Categoras: Java-J2EE, Desarrollo web, Frameworks

Qu prejuicio hacia los profesionales de la informtica te resulta ms molesto? La

pasin por el software

Busca en Genbetadev con Google

Quieres saber ms?

Artculos relacionados que probablemente tambin te interesen

LungoJS usando RESTful + Templating + Cache (screencast) hace 2 semanas

El horror de maquetar una newsletter un poco menos frustrante hace 6 das

Ringmark, conjunto de pruebas para comprobar las capacidades del navegador

Jira 5 en profundidad, resea desde la misma Atlassian hace una semana

Preguntas sobre este tema que ha contestado la comunidad

Te has quedado con dudas?

Para enviar tu pregunta tienes que identificarte

o conctate con Facebook

Hola. El enlace a Thymeleaf en el prrafo introductorio no funciona...

Toda la razn. Ya est corregido. Gracias por el aviso :)

Bienvenido/a en ingls es "Welcome" con una "L" solo.

-- editado por ltima vez a las 14:42

Ups :) Thx. Corregido tambin.

10. El horror de maquetar una newsletter un poco menos frustrante

Contenidos recomendados en Genbetadev

Consejos para desarrolladores

Consejos para trabajar como freelance

Diseo de base de datos de poblaciones, pases y provincias