JSF con Eclipse

Se requiere tener instalados o configurados los siguientes componentes:

• IDE Eclipse 2019-09 en adelante.
• Servidor Payara 5.2 en adelante clic aquí para ver su instalación y configuración.
• JBoss Tool Plug-in 4.5 en adelante clic aquí para ver su instalación y configuración.

Al final tendremos un proyecto Maven de JSF 2.3 con JPA 2.2, Servlets versión 4, JDK 1.8 y Java EE 8

Primer paso: crear un proyecto web dinámico Maven

Crear un nuevo proyecto como se muestra

Seleccionar la opción Maven y luego Maven Project como se muestra

Configurar el proyecto con las siguientes especificaciones

Elegir el Group Id y Artifact Id de su preferencia. Seleccionar la opción war para indicar que se trata de un proyecto Web

Finalmente se obtendrá un proyecto con la siguiente estructura:

Segundo paso: Modificar el archivo pom.xml

El archivo pom.xml se debe modificar de la siguiente manera para indicar la versión 4 de los Servlets, el JDK 1.8 y la versión 8 de Java EE:

<project xmlns="http://maven.apache.org/POM/4.0.0"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
 http://maven.apache.org/xsd/maven-4.0.0.xsd">
   <modelVersion>4.0.0</modelVersion>
   <groupId>com.jsf</groupId>
   <artifactId>proyectoJSF</artifactId>
   <version>0.0.1-SNAPSHOT</version>
   <packaging>war</packaging>
   <properties>
      <project.build.sourceEncoding>
         UTF-8
      </project.build.sourceEncoding>
      <project.reporting.outputEncoding>
         UTF-8
      </project.reporting.outputEncoding>
      <maven.compiler.source>1.8</maven.compiler.source>
      <maven.compiler.target>1.8</maven.compiler.target>
      <failOnMissingWebXml>false</failOnMissingWebXml>
   </properties>
   <dependencies>
      <dependency>
         <groupId>javax</groupId>
         <artifactId>javaee-api</artifactId>
         <version>8.0</version>
         <scope>provided</scope>
      </dependency>
   </dependencies>
</project>

El proyecto se actualizará.

Tercer paso: Configurar el proyecto

Vamos a la opción propiedades haciendo clic derecho sobre el nombre del proyecto y buscamos la opción Project Facets y modificamos los checkbox dela siguiente manera:

Las versiones de JSF y JPA se modificarán manualmente, pero debemos hacer clic en "Further configuration required..." para realizar los siguientes cambios:

Esto provocará que se genere un archivo XML llamado "persistence.xml", pero usualmente en un lugar incorrecto y debemos modificar su ubicación de "src/main/java" a "src/main/resources". Además, de agregar y/o modificar tres archivos XML más llamados "beans.xml", "web.xml" y "faces-config.xml" dentro de la carpeta WEB-INF

El archivo web.xml se debe modificar de la siguiente manera:

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xmlns="http://java.sun.com/xml/ns/javaee"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
 http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
 version="4.0">
 <display-name>proyectoJSF</display-name>
 <servlet>
  <servlet-name>facesServlet</servlet-name>
  <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
  <load-on-startup>1</load-on-startup>
 </servlet>
 <servlet-mapping>
  <servlet-name>facesServlet</servlet-name>
  <url-pattern>*.xhtml</url-pattern>
 </servlet-mapping>
</web-app>

El archivo faces-config.xml se debe modificar de la siguiente manera:

<?xml version="1.0" encoding="UTF-8"?>
<faces-config xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee 
 http://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_3.xsd"
 version="2.3">
</faces-config>

El archivo persistence.xml se debe modificar de la siguiente manera para indicar la versión 2.2 de JPA:

<?xml version="1.0" encoding="UTF-8"?>
<persistence xmlns="http://xmlns.jcp.org/xml/ns/persistence"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/persistence
 http://xmlns.jcp.org/xml/ns/persistence/persistence_2_2.xsd"
 version="2.2">
 <persistence-unit name="proyectoJSF">
 </persistence-unit>
</persistence>

El archivo beans.xml se debe modificar de la siguiente manera:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://xmlns.jcp.org/xml/ns/javaee"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
 http://xmlns.jcp.org/xml/ns/javaee/beans_2_0.xsd"
 version="2.0" bean-discovery-mode="annotated">
</beans>

Opcionalmente podemos desactivar la validación del JPA para que no se muestre un error en "persistence.xml". Para ello, vamos a las propiedades, luego a "Validation" y realizamos las siguientes modificaciones.

Cuarto paso: crear un Bean y un XHTML

Se ha creado un proyecto que sigue el patrón de diseño MVC donde el controlador es el archivo "web.xml", para tener la vista enlazada a un Bean, crearemos un nuevo paquete llamado: "proyectoJSF/view" y dentro crearemos un nuevo Bean con la herramienta CDI instalada previamente.

Modificamos el código del Bean creado por:

package proyectoJSF.view;
import javax.enterprise.context.RequestScoped;
import javax.inject.Named;
@Named
@RequestScoped
public class SaludoView {
 private String input;
 private String output;
 public void submit() {
  output = "Hola estimado " + input;
 }
 public String getInput() {
  return input;
 }
 public void setInput(String input) {
  this.input = input;
 }
 public String getOutput() {
  return output;
 }
}

En la carpeta webapp crearemos dos archivos: "index.html" y "prueba1.xhtml" con los siguientes códigos:

• index.html

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Proyecto Demo de JSF</title>
 </head>
 <body>
   <h1>Probando JSF</h1>
   <hr />
   <a href="prueba1.xhtml">Prueba #1</a>
 </body>
</html>

• prueba1.xhtml

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
   xmlns:f="http://xmlns.jcp.org/jsf/core"
   xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
   <title>Prueba 01</title>
</h:head>
<h:body>
   <h1>Saludando</h1>
   <h:form>
      <h:outputLabel for="input" value="Input" />
      <h:inputText id="input" value="#{saludoView.input}" />
      <h:commandButton value="Submit" action="#{saludoView.submit}">
         <f:ajax execute="@form" render=":output" />
      </h:commandButton>
   </h:form>
   <h:outputText id="output" value="#{saludoView.output}" />
</h:body>
</html>

Tendremos la siguiente estructura en el proyecto:

Quinto paso: Iniciar el proyecto

Debemos agregar el proyecto al servidor una vez que se encuentre activo como se indica:

Luego debe quedar así

Una vez ejecutado el proyecto debemos ir al enlace de prueba #1 e introducir un nombre para ver la respuesta de la página