Övning – Skapa en JavaServer Faces-webbapp på Tomcat
Du har blivit ombedd att skapa en JSF-app (JavaServer Faces) som kan hantera sändningar av formulär. Du skapar en webbapp och distribuerar den lokalt till en Tomcat-server.
Skapa en enkel JSF-webbapp i Tomcat
I den här övningen ska vi skapa ett Maven-projekt för Java-webbappen. När du har skapat projektet måste du konfigurera tre konfigurationer. Den första är att lägga till beroendebiblioteken i filen pom.xml. Det andra är att skapa en CDI-konfigurationsfil som beans.xml, som ska använda CDI (Contexts and Dependency Injection). Den tredje är att konfigurera JSF i filen web.xml. När konfigurationerna är klara kan vi skapa en JSF-webbsida och lagringsbönan för serverdelens åtgärder. Slutligen ska vi utvärdera den i den lokala Tomcat-miljön.
Skapa ett Maven-projekt
Kör följande Maven-arketypkommando. Det här kommandot skapar ett Maven-projekt för Java-webbappen.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
Du bör se nedanstående utdata:
[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] ------------------------------------------------------------------------
Följande filer och kataloger är nu tillgängliga.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
Ändra filen pom.xml i Maven
För att kunna använda JSF-biblioteken måste vi lägga till följande beroendebibliotek i pom.xml.
Ersätt innehållet i pom.xml med följande kod:
<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>
Om du vill använda Java-SE 11 i stället för Java 8, ändrar du följande pom.xml-post:
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
Aktivera CDI (Contexts and Dependency Injection)
Sedan gör du CDI tillgänglig för din webbapp. Skapa en beans.xml-fil i katalogen src/main/WEB-INF och beskriv följande innehåll:
<?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>
Aktivera JSF
För att identifiera alla filer med xhtml-tillägget som JSF Facelets gör du följande ändringar i web.xml under katalogen 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>
Ändra namnet på index.jsp
Nu när miljöinställningarna för att köra JSF är klara är det dags att skapa JSF-sidan. JSF-webbsidor skrivs i XHTML-filformat i stället för JSP, vilket beskrivs i web.xml i föregående exempel. Ändra därför namnet på filen index.jsp (som genererades automatiskt när projektet skapades) till index.xhtml.
mv index.jsp index.xhtml
Skapa en grundläggande webbsida för JSF
Ta bort allt innehåll som beskrivs i index.xhtml och kopiera följande kod:
<?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>
Skapa en JSF-lagringsböna
Skapa därefter en lagringsböna som ska implementera bearbetning på serversidan. Skapa en ny katalog för ditt Java-paket, som du använder för att skapa den säkerhetskopierade bönan src/main under katalogen.
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
Skapa sedan en IndexController.java-fil, samt kopiera och klistra in koden för JSF-lagringsbönan nedan:
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++;
}
}
Nu är du klar med programmet. Katalogstrukturen ser ut på följande sätt efter att programmet har implementerats:
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Köra i den lokala Tomcat-miljön
Om du har installerat Tomcat 9.0.x i din lokala miljö, går du till nästa steg. Annars kan du gå vidare till nästa avsnitt.
Kompilera källkoden och kör den i en lokalt installerad Tomcat-miljö. Kör följande kommando.
Kompilera och paketera Java-projektet
Kör följande kommando för att kompilera koden:
mvn clean package
Kopiera artefakten till distributionskatalogen på Tomcat
Kopiera artefaktkrigsfilen till katalogen i Tomcat"
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
Starta Tomcat-servern
Starta Tomcat-servern.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
När du har startat Tomcat bläddrar du till http://localhost:8080/azure-javaweb-app/ så att skärmen nedan visas:
Du har nu kört JSF-webbappen i din lokala Tomcat-miljö.