E-mail:
Contraseña:

Deseo registrarme
He olvidado mis datos de acceso

Regístrate para votar

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="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.

Esta obra está licenciada bajo licencia Creative Commons de Reconocimiento-No comercial-Sin obras derivadas 2.5