- 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
