Blyts – Blog

SiteMesh es un framework de decoración y layout para páginas web, que apunta a la creación de grandes sitios que contienen una gran cantidad de páginas, lo cuales requieren un consistente “look and feel”, navegación y layout.

Descripción

Sin dudas, una de las cosas más llamativas de SiteMesh es la simpleza que tiene para configurarlo y para usarlo. Uno podría pensar en Tiles para struts, o Faceletes para JSF (Ver Post sobre este tema); pero SiteMesh se independiza de cualquier Framework, lo que lo hace muy poderoso y, sin duda, algo para tener en cuenta a la hora de decorar nuestro sitio.

¿Cómo trabaja?

Es en este aspecto en donde se puede ver lo mejor de este framework. Simplemente se crea una página Layout donde se define en qué lugar se insertará el cointenido y listo. Con definir un tag “body” en cualquier página e incluir ahi los datos, SiteMesh hará el resto y tendremos nuestro sitio consistente.

Configuración y ejemplo

Configurar y ejecutar SiteMesh será la tarea más simple que tendremos que hacer en todo el desarrollo.

1 – Descarguen e instalen todos los archivos necesarios a su classpath. Deberán descargar el archivo sitemesh.jar. Dirigirse a la página oficial de SiteMesh para bajarlo.

2 - Configurar el archivo decorators.xml. Abrir el directorio WebRoot/WEB-INF/ de nuestro proyecto. Ahí crear un archivo XML, decorators.xml, e insertar el siguiente contenido:

SiteMesh is a layout and decoration Framework for web pages, thought for the creation of large sites which manage a lot of pages, and need a goof “look and feel”, navegation and layout.

Description

Without questions, one of the best features of SiteMesh is how easy is to configure it and use it. You could think of Tiles for struts, or Faceletes for JSF (See Post about this subject); but SiteMesh is independent of any Framework, which makes it quite powerfull, something to pay attention to when decorating our site.

How does it work?

This is where you will see the best of this framework. Just create a Layout page where you define where to insert the content and you are done. By defining a “body” tag on any page and including the content there, SiteMesh will do the rest and we will have a consistent web site.

Configuration and example

Configuring and executing SiteMesh will be the easiest task that we will have to do during the complete development process.

1 – Download and install all the necessary files into your classpath. You will have to download sitemesh.jar. Go to the SiteMesh official web site to do this.

2 -Configure a decorators.xml file. Open the WebRoot/WEB-INF/ directory of our proyect. Create there a XML file, decorators.xml, and insert the following content:

1
2
3
4
5
6
7
8
9
10
11
12
13

 
<?xml version="1.0" encoding="UTF-8"?>
<decorators defaultdir="/decorators">
 
     <excludes>
         <pattern>/login.jsp</pattern>
    </excludes>
 
    <decorator name="layout" page="layout.jsp">
  	  <pattern>/*</pattern>
    </decorator>
 
</decorators>

Just as simple as that. In the WebRoot/decorators directory, we will have all the decorators we define, in this case we have created only one, layout.jsp.
We define it with the “decorator” tag and by specifying the “/*” “pattern”, we tell SiteMesh to apply it to all the pages of the application.
But we may not want to decorate all the pages (for example the login it is accustomed to have a complete different design from the rest of the pages), therefore, that page that we do not want to decorate we add it to the “excludes” and we are done.

3 – Define a decorator. Create a layout.jsp file in the WebRoot/decorators directory.

Tan simple como eso. En el directorio WebRoot/decorators tendremos todos nuestros decorators, en este caso tenemos uno solo, layout.jsp.
Lo definimos con el tag “decorator” y al definir el “pattern” “/*” le decimos a SiteMesh que se lo aplique a todas las páginas de la aplicación.
Pero puede ser que no querramos decorar todas las páginas (por ejemplo el login suele tener un diseño completamente diferente al resto de las páginas), por lo tanto esa página que no queremos decorar la agregamos a la lista de “excludes” y listo.

3 – Definir un decorator. Crear un archivo layout.jsp en la el directorio WebRoot/decorators.

layout.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<%@ taglib uri="http://www.opensymphony.com/sitemesh/decorator" prefix="decorator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
 
	<title><decorator:title default="SiteMesh" /></title>
	<decorator:head />
	<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/styles/styles.css"/>
	<script language="javascript" src="<%=request.getContextPath() %>/js/menu.js"></script>
	</head>
	<body>
		<div id="mainLayout">
			<%@ include file="header.jsp"%>
			<decorator:body/>
			<%@ include file="footer.jsp"%>
		</div>
	</body>
</html>

En el decorator tendremos que agregar la url para poder usar los tags de SiteMesh. Después es simplemente definir nuestros estilos y el html para después definir el tag “decorator:body”. Este tag insetará en ese lugar el contenido del tag “body” de todos nuestros jsp´s.

4 – Crear una página. Crear un archivo de prueba para aplicar SiteMesh, por ejemplo test.jsp.

In the decorator we will have to add the url in order to use SiteMesh´s tags. After that, we just have to define our styles and the htlm code so we can define the “decorator:body” tag. This tag will insert in that place the content of the “body” tag of all our jsp´s.

4 – Create a page. Create a file to test SiteMesh, for example test.jsp.

test.jsp

1
2
3
4

 
<body>
	SITEMESH APP
</body>

Nuestro decorator insertará el contenido del tag “body” dentro del “decorator:body” layout.jsp y listo!

Para más información dirigirse al sitio oficial de SiteMesh.

Our decorator will insert the content of the “body” tag into the “decorator:body” tag on the layout.jsp and that´s all!

For further information go to SiteMesh´s official site.

Facelets is a design/layout framework really easy to use and configure. Unfortunately, the lack of good tutorials over the internet, gabe me the idea to write this post to explain how to configure it and use it.

If you are building a JSF application, then Facelets is the perfect match for your layout configuration (although Facelets is independent of the languge and can be used almost anywhere). Facelets is to JSF what Tiles is to Struts.

Facelets properties

• Easy components composition.
• Logic labels creation.
• Expression functions.
• Friendly development for the graphic designero.
• Component libraries creation.

Basically you will have to add some configuration to your web.xml file, modify you .jsp extentions to .xhtml (or .xjsp), create the layout and learn how to use it.

1 – Download and install all the necesary files into your claspath. You wil have to download the jsf-facelets.jar. Refer to Faces Developer Center to download it.

2 - Configure the web.xml. The first parameter tells Facelets which suffix will your pages have, and the second will let you see a console debug. Add these lines to your web.xml:

Facelets es un framework de diseño de páginas muy facil de usar y configurar. La falta de buenos tutoriales en internet, me dio la idea para escribir este post y explicar cómo configurarlo y usarlo.

Si estás contruyendo una aplicación con JSF, entonces Facelets es el agregado ideal para la configuración del “layout” (aunque Facelets es independiente del lenuguaje y puede ser usado en cualquier tipo de aplicación). Facelets es para JSF lo que Tiles es para Struts.

Propiedades de Facelets

• Trabajo basado en plantillas.
• Fácil composición de componentes.
• Creación de etiquetas lógicas a la medida.
• Funciones para expresiones.
• Desarrollo amigable para el diseñador gráfico.
• Creación de librerías de componentes.

Básicamente, se deberá agregar configuración al archivo web.xml, modificar sus extensiones .jsp a .xhtml (or .xjsp), crear el “layout” y aprender cómo usarlo.

1 – Descarguen e installen todos los archivos necesarios a su classpath. Deberán descargar el archivo jsf-facelets.jar. Dirigirse a Centro de desarrollo de JSF para bajarlo.

2 - Configurar el archivo web.xml. El primer paámetro le dice a Facelets qué sufijo tendrán las páginas, y el segundo va a permitir ver el debug en la consola. Agregar estas líneas al web.xml:

1
2
3
4
5
6
7
8

<context-param>
  <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
  <param-value>.xhtml</param-value>
</context-param>
<context-param>
  <param-name>facelets.DEVELOPMENT</param-name>
  <param-value>true</param-value>
</context-param>

3 – Define a layout. Create a layout.xhtml and the included pages of the layout (footer.xhtml, header.xhtml and navigation.xhtml, for example).

3 – Definir un “layout”. Crear un archivo layout.xhtml y las páginas que serán incluidas (por ejemplo footer.xhtml, header.xhtml and navigation.xhtml).

layout.xhtml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets">
 
	<body>
 
		<div>
			<div>
				<ui:include src="header.xhtml" />
			</div>
			<div>
				<ui:include src="navigation.xhtml" />
			</div>
			<div>
				<ui:insert name="body">
                     Default Content
                </ui:insert>
			</div>
			<div>
				<ui:include src="footer.xhtml" />
			</div>
		</div>
 
	</body>
</html>

Then difine the pages that are in the layout: footer.xhtml, header.xhtml and navigation.xhtml. I will put one of these as an example.

Después definir las páginas que están en el layout: footer.xhtml, header.xhtml and navigation.xhtml. Voy a poner una de las mismas como ejemplo.

header.xhtml

1
2
3
4
5
6
7
8
9
10
11
12

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
 
	<body>
		<p>
 
			HEADER
		</p>
	</body>
</html>

4 – Rename files. Rename any file you haven’t in your Navigation Rules in the faces-congif.xml file to “.xhtml”.

5 – Use your configuration. Now all the configurarion is done, you have to try it. The only difference now with your old JSF files is that you don`t longer use the f:view to begin your JSF code. You will have to use ui:composition to tell Facelets wich layout this page will apply to and ui:define name=”body” to insert in your template the code inside the tag.

4 – Renombrar archivos. Renombrar todos los archivos en las Navigation Rules en el archivo faces-congif.xml a “.xhtml”.

5 – Usar la confiuguración. Ahora que la configuración está terminada, hay que probarla. La única diferencia con los archivos viejos de JSF es que ahora no hay que usar mas el tag f:view al empezar a escribir código JSF. Ahora hay que aplicar ui:composition para decirle a Facelets a qué layout se aplicará la página y ui:define name=”body” para instertar en el template el código dentro del tag.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
 
<body>
<ui:composition template="layout.xhtml">
 
	<ui:define name="body">
 
		<h:form>
			<h:panelGrid columns="2">
 
			<h:outputLabel value="User Name:"/>
			<h:outputLabel id="username" value="#{UserBean.userName}"></h:outputLabel>
 
			</h:panelGrid>
 
			<h:commandButton value="Back to list"
							rendered="true" action="#{UserBean.listUsers}" id="submit" />
		</h:form>
	</ui:define>
</ui:composition>
</body>
</html>

By defining ui:define name=”body”, we tell Facelets to insert in the tag named “body” of the layout page all the code of the tag. Notice that the f:view is gone and replaced by the ui:composition tag.

Definiendo ui:define name=”body”, le decimos a Facelets que inserte en el tag llamado “body” de la página del layout, todo el código del tag. Observar que f:view ya no está mas y fue reemplazado por el tag ui:composition.

Una de las tantas facilidades que trae la nueva JDK (versión 5) son las llamadas Annotations. Son como meta-tags que se agregan al código y se aplican a declaraciones de paquetes, tipos, contructores, métodos, atributos, parámetros y variables. Como resultado, tendremos una fácil manera de indicar si los métodos dependen de otros, si son incompletos, si las clases hacen referencia a otras, etc.

Desarrollar en base a annotations nos permite evitar código sucio, ya que el mismo se puede generar automáticamente mediante las annotations en el código fuente. Esto conlleva a programación declarativa, donde el programador dice qué deberia hacerse y las herramientas simplemente emiten el código para hacerlo.

Java Persistant Api

Una de las API que trae la nueva JDK, es la api de JPA, para persistencia con bases de datos basada en annotations. La misma es muy fácil de usar y voy a citar algunos claros ejemplos de los tipos de mapeos que existen, ya que particularmente no suelo encontrar buenos ejemplos en internet.
El modelo aquí expuesto es muy simple: Artículo y Lista de Precios son muchos a muchos, conectados por una tabla que une a las otras 2. Por otro lado, artículo tiene asociado un grupo y un transporte.


One of the many features that brings us the new JDK (version 5) are Annotations. Annotations are like meta-tags that you can add to your code and apply them to package declarations, type declarations, constructors, methods, fields, parameters, and variables. As a result, you will have helpful ways to indicate whether your methods are dependent on other methods, whether they are incomplete, whether your classes have references to other classes, and so on.

Annotation-based development lets us avoid writing boilerplate code under many circumstances by enabling tools to generate it from annotations in the source code. This leads to a declarative programming style where the programmer says what should be done and tools emit the code to do it.

Java Persistant Api

JPA is one of the best innovations of this new release. Designed for database persistence, it is based on annotations, and can be implemented with other known frameworks (such as Toplink and Hibernate). It is really easy to use and I am going to expose some examples of the different mappings, because I usually cannot find good examples over the internet.
The model is quite simple: Article and PriceList are many to many, connected by a middle table. On the other hand, article has a group and a transport associated.

Many To Many

Artículo
Article

1
2
3
4
5
6
7

 
@ManyToMany(fetch = FetchType.LAZY, cascade = CascadeType.ALL)
@JoinTable( name = "article_list",
 	    joinColumns = { @JoinColumn(name = "article_id", unique = true) },
 	    inverseJoinColumns = @JoinColumn(name = "list_id" )
 	    )
private Set<priceList> priceLists;

ListaPrecios
PriceList

1
2

@ManyToMany( mappedBy="priceLists")
private Set<article> articles;

ManyToOne

Articulo
Article

10
11
12

@ManyToOne(fetch = FetchType.LAZY,cascade = CascadeType.ALL)
@JoinColumn(name = "gruou_id", nullable = false)
private Grouo group;

Grupo
Group

10
11

@OneToMany(fetch = FetchType.LAZY, mappedBy = "group", cascade=CascadeType.ALL)
private Set<article> articles;

OneToOne

Articulo
Article

15
16
17

@OneToOne(fetch = FetchType.LAZY,cascade = CascadeType.ALL)
@JoinColumn(name = "transport_id", nullable = false)
private Transport transport;