Ejercicio: Creación de una aplicación web de JavaServer Faces en Tomcat
Se le pidió crear una aplicación web de Java Server Faces (JSF) que pueda controlar envíos de formularios. Creará una aplicación web y la implementará localmente en un servidor de Tomcat.
Creación de una aplicación web JSF sencilla en Tomcat
En este ejercicio, se creará un proyecto de Maven para la aplicación web de Java. Una vez que creado el proyecto, tendrá que establecer tres configuraciones. La primera consiste en agregar las bibliotecas de dependencias al archivo pom.xml. La segunda consiste en crear un archivo de configuración CDI como beans.xml para usar los contextos y la inserción de dependencias (CDI). La tercera consiste en configurar JSF en el archivo web.xml. Después de las configuraciones, se puede crear una página web de JSF y el bean de respaldo para la operación de back-end del lado servidor. Por último, se evaluará en el entorno local de Tomcat.
Creación de un proyecto de Maven
Ejecute el comando siguiente de arquetipo de Maven. Este comando creará un proyecto de Maven para la aplicación web de Java.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
Verá la salida siguiente:
[INFO] Parameter: package, Value: com.microsoft.azure.samples
[INFO] Parameter: groupId, Value: com.microsoft.azure.samples
[INFO] Parameter: artifactId, Value: azure-javaweb-app
[INFO] Parameter: packageName, Value: com.microsoft.azure.samples
[INFO] Parameter: version, Value: 1.0-SNAPSHOT
[INFO] project created from Old (1.x) Archetype in dir: /private/tmp/TMP/azure-javaweb-app
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 5.416 s
[INFO] Finished at: 2020-11-02T11:12:58+09:00
[INFO] ------------------------------------------------------------------------
Ahora están disponibles los archivos y directorios siguientes.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
Modificación del archivo pom.xml de Maven
Para usar las bibliotecas de JSF, es necesario agregar las siguientes bibliotecas de dependencias en pom.xml.
Reemplace el contenido de pom.xml por el código siguiente:
<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/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.microsoft.azure.samples</groupId>
<artifactId>azure-javaweb-app</artifactId>
<packaging>war</packaging>
<version>1.0-SNAPSHOT</version>
<name>azure-javaweb-app Maven Webapp</name>
<url>http://maven.apache.org</url>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
<failOnMissingWebXml>false</failOnMissingWebXml>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
</properties>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>4.0.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>org.glassfish</groupId>
<artifactId>javax.faces</artifactId>
<version>2.4.0</version>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>8.0</version>
</dependency>
<dependency>
<groupId>org.jboss.weld.servlet</groupId>
<artifactId>weld-servlet</artifactId>
<version>2.4.8.Final</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.12</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.mockito</groupId>
<artifactId>mockito-core</artifactId>
<version>2.23.0</version>
<scope>test</scope>
</dependency>
</dependencies>
<build>
<finalName>azure-javaweb-app</finalName>
</build>
</project>
Si quiere usar Java SE 11 en lugar de Java 8, modifique la entrada pom.xml siguiente:
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
Habilitación de contextos e inserción de dependencias
A continuación, haga que CDI esté disponible para la aplicación web. Cree un archivo beans.xml en el directorio src/main/WEB-INF y describa el contenido siguiente:
<?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_1_1.xsd"
bean-discovery-mode="all">
</beans>
Habilitación de JSF
A continuación, para reconocer todos los archivos con la extensión xhtml como Facelets de JSF, realice los cambios siguientes en web.xml en el directorio WEB-INF.
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="4.0" 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-app_4_0.xsd">
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<context-param>
<param-name>primefaces.THEME</param-name>
<param-value>nova-light</param-value>
</context-param>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.xhtml</welcome-file>
</welcome-file-list>
</web-app>
Modificación del nombre de index.jsp
Ahora que se ha completado la configuración del entorno para ejecutar JSF, es el momento de crear la página de JSF. Las páginas web de JSF se escriben en el formato de archivo XHTML en lugar de JSP, como se estableció en web.xml en el ejemplo anterior. Por tanto, cambie por index.xhtml el nombre del archivo index.jsp que se ha generado automáticamente al crear el proyecto.
mv index.jsp index.xhtml
Creación de una página web básica para JSF
Elimine todo el contenido descrito en index.xhtml y copie el código siguiente:
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Input Value Counter Sample</title>
</h:head>
<h:body>
<h:form>
<p:outputLabel value="Basic" /><br />
<p:inputText value="#{indexcontroller.inputValue}" /><br />
<p:commandButton update="ajaxUpdateText" value="Submit" action="#{indexcontroller.submitButtonAction()}" />
<br />
<p:outputLabel id="ajaxUpdateText" value="Input Value: #{indexcontroller.inputValue}" /><br />
</h:form>
</h:body>
</html>
Creación de un bean de respaldo de JSF
A continuación, cree un bean de respaldo para implementar el procesamiento de back-end del lado servidor. Cree un directorio para el paquete de Java, que se usará para crear el bean de respaldo en el directorio src/main.
mkdir src/main/java
mkdir src/main/java/com
mkdir src/main/java/com/microsoft
mkdir src/main/java/com/microsoft/azure
mkdir src/main/java/com/microsoft/azure/samples
Después, cree un archivo IndexController.java y copie y pegue el código del bean de respaldo de JSF que se indica a continuación:
package com.microsoft.azure.samples;
import java.io.Serializable;
import javax.faces.view.ViewScoped;
import javax.inject.Named;
import lombok.Getter;
import lombok.Setter;
@Named("indexcontroller")
@ViewScoped
public class IndexController implements Serializable{
private static final long serialVersionUID = 8485377386286855408L;
@Setter @Getter
private String inputValue;
private int counter;
public void submitButtonAction(){
inputValue = inputValue + " : " + counter;
counter++;
}
}
Con esta última acción se finaliza el programa. La estructura de directorios después de implementar el programa es la siguiente:
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Ejecución en un entorno local de Tomcat
Si instaló Tomcat 9.0.x en el entorno local, vaya al paso siguiente. De lo contrario, vaya a la sección siguiente.
Compile el código fuente y ejecútelo en un entorno de Tomcat instalado localmente. Ejecute el comando siguiente.
Compilación y empaquetado del proyecto de Java
Ejecute el comando siguiente para compilar el código:
mvn clean package
Copia del artefacto en el directorio de implementación en Tomcat
Copie el archivo war de artefacto en el directorio de Tomcat.
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
Inicio del servidor Tomcat
Inicie el servidor Tomcat.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
Después de iniciar Tomcat, vaya a http://localhost:8080/azure-javaweb-app/ y verá la pantalla siguiente:
Ejecutó correctamente la aplicación web de JSF en el entorno local de Tomcat.