Introducción a Tapestry 5

Introducción
a
Tapestry 5.

0. Índice de
contenidos.

• 1. ¿Qué es Tapestry?
• 2. Entorno.
• 3. Crear primer proyecto Tapestry.
• 4. Creación de la primera
  página.
• 5. Creación
  del  primer componente.
• 6. Conclusiones.

1. ¿Qué es Tapestry?

Es un framework web de código abierto pensado para
programadores
Java que trata de dar solución a los dos problemas
fundamentales del desarrollo web con Java: los JSP, que no respetan el
modelo vista controlador, al permitirnos  introducir cualquier
código Java dentro de la vista de las páginas y
la cantidad de configuración en XML o con anotaciones que se
necesitan en otros frameworks para comenzar a desarrollar con ellos.

Esta solución se la tenemos que agradecer a la persona de
Howard
Lewis Ship quien, basándose en la idea del code behind de
.NET,
donde cada página lleva un archivo asociado con los
elementos
que la componen y la lógica asociada a esos elementos que se
disparan en forma de eventos, construyó este framework para
poder
utilizar esta idea en Java.

Además es un framework que no presenta una fuerte curva de
aprendizaje y que al estar orientado a componentes lo hace altamente
productivo y reutilizable. Presenta varios componentes de serie que nos
facilitan mucho las tareas típicas de cualquier
aplicación web como la visualización de
resultados paginados, la validación de formularios o la
internacionalización entre otras y se integra a la
perfección con otros frameworks muy conocidos como Spring e
Hibernate.

2. Entorno

El tutorial está
escrito usando el siguiente entorno:

• Hardware:
  Portátil Asus G50Vseries (Core Duo P8600 2.4GHz, 4GB RAM,
  320 GB HD).
• Sistema operativo: Ubuntu
  9.04 Desktop
• Mozilla Firefox 2.0.0.20
• Maven 2.2.1
• Tapestry 5.1.0.5

3. Crear primer proyecto Tapestry

Para crear nuestro primer
proyecto en Tapestry vamos a utilizar
Maven 2, como no podría ser de otra forma, con lo que
sólo tendremos que poner en un terminal lo siguiente:

mvn archetype:generate -DarchetypeCatalog=http://tapestry.formos.com/maven-repository

De esta forma en la consola se
nos va a pedir que introduzcamos el
número del arquetipo que vamos a utilizar, en nuestro caso
el
único que hay el 1. Y luego añadimos la
información que necesita Maven. Por ejemplo, podemos
establecer
estos datos:

• groupId:
  com.autentia
• artifactId:
  prueba-tapestry
• version:
  por defecto
• package:
  por defecto

Una vez creado el proyecto lo
más cómodo es importarlo
a algún IDE que nos facilite la edición del
código. Nosotros lo vamos a importar a Eclipse con la ayuda
del
plugin para Maven.

Esto nos proporciona una aplicación web que directamente
podemos
ejecutar en un servidor Apache Tomcat desde el IDE que queramos
utilizar. La apariencia de la aplicación sin tocar una sola
línea de código es esta:

Veamos como esta estructurado
el proyecto recién creado:

Lo primero que llama la
atención es que no contamos con
ficheros con extensión .html sino que trabajamos con
ficheros
con extensión .tml. Estos ficheros son lo que van a tener el
contenido XHTML de los páginas pero con la sintaxis especial
de
Tapestry.

Luego si nos fijamos un poco
más nos damos cuenta de que
existen tantas clases Java como ficheros .tml. Esto es así
porque cada una de estas clases Java define la parte
dinámica de
los ficheros. Para aclarar esto vamos a crear nuestra página
con
Tapestry para que a medida que vayamos publicando más
tutoriales se entienda mejor el código que viene por defecto.

En este tutorial
sólo comentar que la única
configuración XML que encontramos para hacer funcionar el
proyecto se encuentra dentro del fichero web.xml y son estas pocas
líneas:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
  <display-name>prueba-tapestry Tapestry 5 Application</display-name>
  <context-param>
    <param-name>tapestry.app-package</param-name>
    <param-value>com.autentia</param-value>
  </context-param>
  <filter>
    <filter-name>app</filter-name>
    <filter-class>org.apache.tapestry5.TapestryFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>app</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>
</web-app>

De las cuales las
más importantes son las referidas al parámetro
«tapestry.app-package» donde le indicamos a partir de que nivel de la
estructura de paquetes tiene que empezar a buscar las
páginas, componentes, etc…

4. Creación de la primera
página.

Como no podía ser de
otra forma para ilustrar la
creación de una página con Tapestry vamos a
utilizar un
HolaMundo (si tuviera una máquina del tiempo
volvería a
atrás y patentaría el HolaMundo). Como ya
se ha
dicho las páginas se componen de una parte visual en XHTML y
de
un fichero Java asociado.

Primero vamos a crear la
página con extensión .tml
dentro de la ruta resources/com/autentia/pages y la vamos a llamar
HolaMundo.tml con el siguiente contenido:

<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd">
  <head>
    <title>Primera página con Tapestry 5</title>
  </head>
  <body>
     <p>${helloWorld} </p>
  </body>
</html>

Ahora vamos a crear la clase
Java asociada a esta clase y que va a
contener la lógica de recuperar el mensaje de bienvenida con
el
siguiente código:

package com.autentia.pages;
public class HolaMundo {
  public String getHolaMundo(){
    return "Hola Mundo Tapestry 5!!!";
  }
}

Ahora si ejecutamos la
página de esta forma
http://localhost:8080/prueba-tapestry/holaMundo veremos que Tapestry
responde con el siguiente error, mucho más descriptivo que
el
típico de Apache Tomcat:

Como vemos se marca la
línea donde esta el error y se ha
producido porque la clase Java asociada no contiene una propiedad con
el nombre helloWorld y ofrece otras propiedades que si contiene como
holaMundo. Entonces editamos el fichero HolaMundo.tml y sustituimos
«helloWorld» por «holaMundo» sin reiniciar el servidor,  ya
que
estas es otra de las ventajas que tiene trabajar con Tapestry, no hace
falta reiniciar el servidor cuando se modifica un .tml y cuando se
modifica la clase Java asociada el servidor se reinicia
automáticamente de una forma muy rápida.

La sintaxis
${holaMundo} sirve para indicar a Tapestry que
sustituya ese valor buscando en la clase Java asociada un
método llamado getHolaMundo() que ahora si que va a
encontrar,
mostrando el mensaje de bienvenida por pantalla sólo
refrescando
la página.

5. Creación del
primer componente

Un componente en Tapestry es un
elemento que se va a poder reutilizar en todo el proyecto. Para
ilustrar la creación de nuestro primer componente, vamos a
crear un componente de tipo Layout que aplicaremos a la
página creada anteriormente. Tenemos un ejemplo en el
código que se ha creado por defecto, Layout.tml y
Layout.java.

Basándonos en ese
ejemplo vamos a crear nuestro propio layout mucho más
sencillo y didáctico. Para ello creamos el fichero
src/main/resources/com/autentia/components/LayoutAutentia.tml con todo
el contenido XHTML que queramos, en el caso de este ejemplo este va a
ser el contenido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
          xmlns:p="tapestry:parameter">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>${titulo}</title>
  </head>
  <body>
    <div id="header">
      <div id="logo">
        <img src="/wp-content/uploads/tutorial-data/layout/images/logo_autentia.png"/>
      </div>
      <div>
        <p>${autor}</p>
      </div>
    </div>
    <div id="page">
      <t:body/>
    </div>
  </body>
</html>

Este layout va a mostrar el
contenido de la página donde se aplique más un
logo de la empresa con el nombre del autor y el titulo de la
página que tienen que ser proporcionados por cada una de las
páginas que vayan a utilizar este layout. La etiqueta
<t:body/> indica donde se va a mostrar el contenido de la
página que utiliza el layout.

Ahora vamos a crear el archivo
asociado Java en la ruta
src/main/java/com/autentia/components/LayoutAutentia.java
con el
siguiente contenido:

package com.autentia.components;

import org.apache.tapestry5.*;
import org.apache.tapestry5.annotations.*;
import org.apache.tapestry5.ioc.annotations.*;
import org.apache.tapestry5.BindingConstants;

public class LayoutAutentia{
  @Property 
  @Parameter(required = true,defaultPrefix = BindingConstants.MESSAGE)
  private String titulo;
  
  @Property
  @Parameter(required=true, defaultPrefix=BindingConstants.LITERAL)
  private String autor;
}

Dentro de esta clase hemos
definido las dos propiedades que utiliza el layout «titulo» y «autor».
Las anotaciones que las preceden quieren decir que titulo y autor van a
ser una propiedades que obligatoriamente tienen que ser proporcionar
las páginas que hagan uso de este componente si no se
mostrará un error por pantalla. La diferencia entre ellas es
que el valor que se le de a titulo se va a utilizar como key para
buscar el valor en el fichero de idioma correspondiente, mientras que,
el valor de autor se va a interpretar tal cual.

Para utilizar el componente
editamos el fichero HolaMundo.tml  modificando la cabecera de
esta forma:

<html t:type="layoutAutentia" title="hola-mundo" autor="Ruben Aguilera" xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" xmlns:p="tapestry:parameter">

Para que se muestre
correctamente el titulo de la página tenemos que tener
creado el fichero de idioma correspondiente. Si sólo
queremos que este texto este disponible para el ámbito de
esta página, crearemos el fichero
src/main/resources/com/autentia/pages/HolaMundo.properties, si por el
contrario queremos que este texto sea accesible desde cualquier parte
de la aplicación tendremos que editar el fichero
src/main/webapp/WEB-INF/app.properties. En cualquiera de los dos casos
deberemos introducir la entrada «hola-mundo» con un valor cualquiera,
«Esto es un Hola Mundo con Tapestry» y replicado en tantos ficheros
como idiomas queramos que soporte la aplicación.

Sólo falta un
pequeño detalle para habilitar la
internacionalización y es editar el fichero
src/main/java/com/autentia/services/AppModule.java y buscar el
método contributeApplicationDefaults para añadir
en la configuración todos los idiomas que queramos soportar:

public static void contributeApplicationDefaults( MappedConfiguration<String, String> configuration){
  configuration.add(SymbolConstants.SUPPORTED_LOCALES, "en,es");
}

En este caso nuestra
aplicación va a soportar el inglés y el
castellano. Ahora si volvemos a ejecutar la URL
http://localhost:8080/prueba-tapestry/holaMundo veremos
el resultado:

Para aplicar estilos y
Javascript a la página tenemos dos formas de hacerlo, la
habitual que sería incluyendo las referencias dentro del
fichero .tml y al estilo Tapestry con anotaciones en la clase del
componente. Por ejemplo en nuestro caso sería:

@IncludeStylesheet("context:layout/layout.css")
@IncludeJavaScriptLibrary("context:layout/layout.js")
public class LayoutAutentia{...}

Donde estamos indicando a Tapestry que busque las referencias dentro
del contexto colgando de la carpeta layout. Esto es en realidad
src/main/webapp/layout.

6. Conclusiones

En este pequeño
tutorial sólo hemos podido ver un
pequeño esbozo de lo que nos ofrece Tapestry, en posteriores
tutoriales
vamos a ver como hacer los procedimientos típicos de una
aplicación web como: internacionalización,
creación de CRUDs con paginación,
internacionalización e incluso AJAX de una manera muy
sencilla gracias a este estupendo framework. Aconsejo a los
más intrépidos e impacientes que hagan pruebas
con el
proyecto de ejemplo para ir viendo como funciona sobre todo la parte de
creación de menús que abordaremos en otro
tutorial.

Saludos.