JSF aplicación de Ejemplo

En este artículo veremos un ejemplo de como crear una aplicación JSF desde cero utilizando Apache Maven. Maven es una herramienta de gestión de proyectos y automatización de compilación ampliamente utilizada que se utiliza principalmente en el desarrollo en el lenguaje Java. Proporciona un enfoque estructurado y estandarizado para administrar proyectos de software, incluida la compilación, prueba, empaquetado e implementación de aplicaciones. Maven define un ciclo de vida del proyecto que está compuesto por las fases de compilación, pruebas, empaquetado, instalación y despliegue, permitiendo automatizar todos los pasos de este ciclo de vida como así también la gestión de dependencias.

Crear el proyecto

Maven también nos ayuda a simplificar el proceso de creación del proyecto, para lo cual incorpora el concepto de arquetipo, que es básicamente una plantilla a partir de la cual podemos generar nuevos proyectos que cumplen con el estándar de la pila tecnológica que vamos a utilizar.

Es posible generar nuestros propios arquetipos a partir de proyectos que hayamos creado previamente, que cumplan con estándares y prácticas recomendadas. Esto ahora nos permitirá crear proyectos a partir de un mismo ‘template‘ con lo que conseguiremos estandarizar la estructura y configuración de este tipo de proyectos además de posibilitar crearlos rápidamente.

Además, Maven provee una serie de arquetipos para generar los tipos de proyectos más comunmente utilizados. Para crear nuestra aplicación JSF de ejemplo primero crearemos un proyecto web utilizando el arquetipo maven-archetype-webapp. Esto lo haremos ejecutando el siguiente comando en la consola:

mvn archetype:generate -DarchetypeGroupId=org.apache.maven.archetypes -DarchetypeArtifactId=maven-archetype-webapp -DarchetypeVersion=1.4

En el snippet anterior podrás observar que especificamos el número de versión del arquetipo. Puedes chequear las últimas versiones de este arquetipo aquí. Una vez ejecutado el comando Maven te pedirá que ingreses los siguientes valores:

group-id -> jsf-intro
artifact-id -> jsf-example

Ingresar a la carpeta del proyecto:

cd jsf-example

A continuación generamos el proyecto para Eclipse ejecutando el siguiente comando en la consola:

mvn eclipse:eclipse -Dwtpversion=2.0

Una vez generado el proyecto podemos importar el proyecto en Eclipse para lo cual:

  • Hacemos click derecho en el workspace de Eclipse y seleccionamos ‘Import…‘.
  • En el cuadro de diálogo seleccionamos ‘Existing Projects into Workspace‘ y hacemos click en ‘Next‘.
JSF aplicación de ejemplo Eclipse 1

  • Hacemos click en ‘Browse…‘ y navegamos a la carpeta de nuestro proyecto y hacemos click en ‘Finish‘.
JSF aplicación de ejemplo Eclipse 2

  • Una vez completados los pasos anteriores el proyecto será accesible desde el Workspace.
JSF aplicación de ejemplo Eclipse 3

Agregar JSF

En el archivo pom.xml agregar la dependencia correspondiente de acuerdo al servidor de aplicaciones que se esté utlizando.

Servidor de Aplicaciones (JBoss, WildFly, etc)

<dependency>
	<groupId>org.jboss.spec.javax.faces</groupId>
	<artifactId>jboss-jsf-api_2.3_spec</artifactId>
	<version>3.0.0.SP04</version>
	<scope>provided</scope>
</dependency>   

O bien agregar la versión deseada de jsf-api. Para ver las diferentes versiones consulta el repositorio central de Maven

<dependency>
	<groupId>javax.faces</groupId>
	<artifactId>jsf-api</artifactId>
	<version>2.1</version>
	<scope>provided</scope>
</dependency>

Servlet Container (Tomcat)

<dependency>
	<groupId>com.sun.faces</groupId>
	<artifactId>jsf-api</artifactId>
	<version>2.2.20</version>
</dependency>
<dependency>
	<groupId>com.sun.faces</groupId>
	<artifactId>jsf-impl</artifactId>
	<version>2.2.20</version>
</dependency>

Notar que en este caso se ha omitido el scope en las dependencias. Esto hará que se establezca el scope por defecto (compile), por lo cual las librerías serán incorporadas a la aplicación (cosa necesaria para servidores como Tomcat, que no vienen provistos con una implementación JSF por defecto).

En el siguiente link puedes obtener más información sobre las dependencias Maven.

Crear el Managed Bean

Un Managed Bean es un Java Bean convencional que está registrado en, y gestionado por el framework JavaServer Faces. Un Managed Bean puede contener variables (que pueden corresponder a un formulario web) con sus correspondientes getters y setters, y lógica de negocio.

El Managed Bean debe ser configurado en la aplicación para que sea reconocido por JSF, y esto puede hacerse vía XML (mecanismo de configuración heredado de antiguas versiones de JSF) o anotaciones.

import javax.faces.bean.ManagedBean;

@ManagedBean(name = "firstBean", eager = true)
public class MyFirstBean {
	public String getMessage() {
		return "The First One!";
	}
}

Crear la vista

JSF 2 soporta el formato XHTML para la creación de vistas. En este ejemplo se demuestra como acceder desde la vista a una variable en el Managed Bean utilizando EL (Expression Language).

<!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>Hello JSF 2!</title>
	</head>
	<body>
		#{firstBean.message}
	</body>
</html>

web.xml

Finalmente, en el archivo web.xml se debe configurar el servlet en el que se ejecuta JSF.

<servlet>
	<servlet-name>Faces Servlet</servlet-name>
	<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>Faces Servlet</servlet-name>
	<url-pattern>*.jsf</url-pattern>
</servlet-mapping>

Ejecutar la aplicación de ejemplo JSF

JSF aplicación de ejemplo

Conclusión

Crear una aplicación JSF básica desde cero es bastante sencillo si sigue los pasos necesarios. Primero, es importante crear un nuevo proyecto web utilizando un arquetipo Maven. Esto proporciona un proyecto básico que incluye los archivos y directorios necesarios para una aplicación. A continuación, el archivo pom.xml debe actualizarse con las dependencias Maven de JavaServer Faces para que la aplicación pueda usar las bibliotecas necesarias. Una vez hecho esto, se puede crear Managed Bean para manejar la lógica de negocio y la interacción con la vista. Después de esto, se puede crear la vista o el archivo xhtml para definir la interfaz de usuario de la aplicación. Finalmente, el archivo web.xml debe configurarse para especificar los servlets de la aplicación, que manejan las solicitudes y las respuestas. Con estos pasos básicos implementados, puede comenzar a explorar todas las capacidades de JSF y crear aplicaciones más complejas adaptadas a sus necesidades.

Referencias


Te puede interesar

Autenticación en JSF

Ejemplo básico de autenticacion en JSF mediante la implementación de una página de login de usuario.

Seguir leyendo →

Arquitectura y Ciclo de Vida JSF

Cómo funciona el ciclo de vida de una aplicación JSF. En el artículo relacionado se cubre el manejo de eventos.

Seguir leyendo →