Oefening: een JavaServer Faces-web-app maken in Tomcat
U bent gevraagd een JSF-webtoepassing (JavaServer Faces) te maken die formulierinzendingen kan verwerken. U bouwt een webtoepassing en implementeert deze lokaal op een Tomcat-server.
Een eenvoudige JSF-web-app maken in Tomcat
In deze oefening maken we een Maven-project voor uw Java-webtoepassing. Nadat u het project hebt gemaakt, moet u drie configuraties configureren. De eerste is het toevoegen van de afhankelijkheidsbibliotheken aan het pom.xml-bestand. De tweede is het maken van een CDI-configuratiebestand als beans.xml om de contexten en afhankelijkheidsinjectie (CDI) te gebruiken. De derde is het configureren van de JSF op het web.xml-bestand. Na de configuraties kunnen we een JSF-webpagina maken en de back-upbean maken voor de back-endbewerking aan de serverzijde. Ten slotte evalueren we deze in de lokale Tomcat-omgeving.
Een Maven-project maken
Voer de volgende Maven-archetypeopdracht uit. Met deze opdracht maakt u een Maven-project voor uw Java-webtoepassing.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
U ziet de volgende uitvoer:
[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] ------------------------------------------------------------------------
De volgende bestanden en mappen zijn nu beschikbaar.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
Het Maven-pom.xml-bestand wijzigen
Als u de JSF-bibliotheken wilt gebruiken, moeten we de volgende afhankelijkheidsbibliotheken toevoegen aan pom.xml.
Vervang de inhoud van uw pom.xml door de volgende code:
<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>
Als u Java SE 11 wilt gebruiken in plaats van Java 8, wijzigt u de volgende pom.xml vermelding:
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
Contexten en afhankelijkheidsinjectie inschakelen
Maak vervolgens CDI beschikbaar voor uw webtoepassing. Maak een beans.xml bestand onder de map src/main/WEB-INF en beschrijf de volgende inhoud:
<?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>
JSF inschakelen
Als u vervolgens alle bestanden met de extensie xhtml wilt herkennen als JSF Facelets, moet u de volgende wijzigingen aanbrengen in web.xml onder de WEB-INF map.
<?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>
De naam van index.jsp wijzigen
Nu de omgevingsinstellingen voor het uitvoeren van JSF zijn voltooid, is het tijd om de JSF-pagina te maken. JSF-webpagina's worden geschreven in XHTML-bestandsindeling in plaats van JSP, zoals ingesteld in web.xml in het voorgaande voorbeeld. Wijzig dus de naam van het index.jsp-bestand dat automatisch is gegenereerd toen het project werd gemaakt om te index.xhtml.
mv index.jsp index.xhtml
Een eenvoudige webpagina voor JSF maken
Verwijder alle inhoud die wordt beschreven in index.xhtml en kopieer de volgende code:
<?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>
Een JSF-back-up bean maken
Maak vervolgens een backing bean om de back-endverwerking van de serverzijde te implementeren. Maak een nieuwe map voor uw Java-pakket, die u gaat gebruiken om de backing bean onder de src/main-map te maken.
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
Maak vervolgens een IndexController.java-bestand en kopieer en plak de JSF-backing bean-code die volgt:
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++;
}
}
Met deze laatste actie voltooit u uw programma. De mapstructuur na de implementatie van het programma is als volgt:
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Uitvoeren in een lokale Tomcat-omgeving
Als u Tomcat 9.0.x in uw lokale omgeving hebt geïnstalleerd, gaat u naar de volgende stap. Ga anders naar de volgende sectie.
Compileer de broncode en voer deze uit in een lokaal geïnstalleerde Tomcat-omgeving. Voer de volgende opdracht uit.
Het Java-project compileren en verpakken
Voer de volgende opdracht uit om de code te compileren:
mvn clean package
Kopieer het artefact naar de implementatiemap in Tomcat
Kopieer het artefact war-bestand naar de map binnen Tomcat.
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
De Tomcat-server starten
Start de Tomcat-server.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
Nadat u Tomcat hebt gestart, bladert u naar http://localhost:8080/azure-javaweb-app/ en ziet u het volgende scherm:
U hebt uw JSF-webtoepassing uitgevoerd in uw lokale Tomcat-omgeving.