Oefening: een JavaServer Faces-web-app maken in een Tomcat-omgeving
U bent gevraagd om een JSF-webtoepassing (JavaServer Faces) te maken die formulierinzendingen kan verwerken. U maakt een webtoepassing en implementeert deze lokaal op een Tomcat-server.
Een eenvoudige JSF-web-app maken in Tomcat
In deze oefening maakt u een Maven-project voor uw Java-webtoepassing. Nadat u het project hebt gemaakt, moet u drie configuraties instellen. De eerste is om de afhankelijkheidsbibliotheken toe te voegen aan het bestand pom.xml. De tweede is om een CDI-configuratiebestand te maken als beans.xml, om de CDI (Contexts and Dependency Injection) te gebruiken. De derde is om JSF te configureren in het bestand web.xml. Na de configuraties kunnen we een JSF-webpagina maken, en de backing bean maken voor back-endverwerking aan serverzijde. Ten slotte evalueren we de app in de lokale Tomcat-omgeving.
Een Maven-project maken
Voer de volgende Maven-archetypeopdracht uit. Met deze opdracht wordt een Maven-project voor uw Java-webtoepassing gemaakt.
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-bestand pom.xml wijzigen
Als u de JSF-bibliotheken wilt gebruiken, moet u de volgende afhankelijkheidsbibliotheken toevoegen aan pom.xml.
Vervang de inhoud van 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>
Contexts and Dependency Injection inschakelen
Maak vervolgens CDI beschikbaar voor uw webtoepassing. Maak een bestand beans.xml 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
Breng vervolgens de volgende wijzigingen aan in web.xml onder de map WEB-INF om alle bestanden met de extensie xhtml als JSF Facelets te herkennen.
<?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 de XHTML-bestandsindeling in plaats van JSP, zoals is ingesteld in web.xml in het vorige voorbeeld. Wijzig daarom de naam van het bestand index.jsp dat automatisch is gegenereerd toen het project werd gemaakt voor 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-backing bean maken
Maak vervolgens een backing bean om de back-endverwerking aan 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 bestand IndexController.java, en kopieer en plak de volgende code voor de JSF-backing bean:
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 wordt uw programma voltooid. 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 hebt geïnstalleerd in uw lokale omgeving, gaat u naar de volgende stap. Anders gaat u 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 in een pakket verpakken
Voer de volgende opdracht uit om de code te compileren:
mvn clean package
Het artefact naar de implementatiemap in de Tomcat-omgeving kopiëren
Kopieer het war-bestand van het artefact naar de map in de 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:
Het is gelukt om de JSF-webtoepassing uit te voeren in de lokale Tomcat-omgeving.