Gyakorlat – JavaServer Faces-webalkalmazás létrehozása a Tomcaten
Azt a feladatot kapta, hogy hozzon létre egy olyan Java Server Faces- (JSF-) webalkalmazást, amely képes űrlapokat kezelni. Létrehoz egy webalkalmazást, majd helyileg üzembe helyezi egy Tomcat-kiszolgálón.
Egyszerű JSF-webalkalmazás létrehozása a Tomcaten
A gyakorlatban létrehozunk egy Maven-projektet és a Java-webalkalmazást. A projekt létrehozása után három konfigurációt kell megadnia. Elsőként hozzá kell adnia a függőségi kódtárakat a pom.xml fájlhoz. Ezután létre kell hoznia egy CDI-konfigurációs fájlt beans.xml fájlként a CDI (Contexts and Dependency Injection) használatához. Harmadik lépésként konfigurálnia kell a JSF-et a web.xml fájlban. A konfigurációk után létrehozhatjuk a JSF-weblapot, valamint a háttérbeant a kiszolgálóoldali háttérműveletekhez. Végül ezt kiértékeljük a helyi Tomcat-környezetben.
Maven-projekt létrehozása
Hajtsa végre a következő Maven-archetípusparancsot. Ez a parancs létrehoz egy Maven-projektet a Java-webalkalmazáshoz.
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
A következő kimenetnek kell megjelennie:
[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] ------------------------------------------------------------------------
A következő fájlok és könyvtárak válnak elérhetővé.
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
A Maven pom.xml fájl módosítása
A JSF-kódtárak használatához hozzá kell adnia a következő függőségi kódtárakat a pom.xml fájlhoz.
Cserélje le az pom.xml fájl tartalmát a következő kódra:
<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>
Ha Java 8 helyett a Java SE 11-et szeretné használni, módosítsa a következő pom.xml-bejegyzést:
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
A Contexts and Dependency Injection engedélyezése
A következőkben elérhetővé teszi a CDI-t a webalkalmazás számára. Hozzon létre egy beans.xml fájlt az src/main/WEB-INF könyvtárban, majd ismertesse az alábbi tartalmakat:
<?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>
A JSF engedélyezése
Ezután módosítsa a WEB-INF könyvtárban található web.xml fájlt, hogy az felismerje az xhtml kiterjesztéssel rendelkező fájlokat, mint JSF Facelets-fájlok.
<?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>
Az index.jsp fájl nevének módosítása
Most, hogy megadta a JSF futtatásához szükséges környezeti beállításokat, ideje létrehozni a JSF-oldalt. A JSF-weblapok a JSP helyett XHTML fájlformátumban vannak írva, az előző példában, a web.xml fájlban megadott módon. Módosítsa a projekt létrehozásakor automatikusan létrejött index.jsp fájl nevét index.xhtml-re.
mv index.jsp index.xhtml
Alapszintű weblap létrehozása JSF-hez
Törölje az index.xhtml fájlban ismertetett összes tartalmat, majd másolja ki az alábbi kódot:
<?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>
JSF – háttérbean létrehozása
Ezután hozzon létre egy háttérbeant a kiszolgálóoldali háttérfeldolgozás implementálásához. Hozzon létre egy új könyvtárat a Java-csomaghoz, amelyet a címtár alatti src/main háttérbean létrehozásához fog használni.
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
Ezután hozzon létre egy IndexController.java fájlt, majd másolja ki és illessze be az alábbi JSF háttérbean kódját:
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++;
}
}
Ez a művelet befejezi a programot. A program implementálása után a könyvtárszerkezet a következőképpen néz ki:
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
Futtatás helyi Tomcat-környezetben
Ha telepítette a Tomcat 9.0-x-et a helyi környezetben, lépjen a következő lépésre. Ellenkező esetben lépjen tovább a következő szakaszra.
Fordítsa le a forráskódot, majd futtassa egy helyileg telepített Tomcat-környezetben. Hajtsa végre a következő parancsot.
A Java-projekt fordítása és csomagolása
Hajtsa végre a következő parancsot a kód fordításához:
mvn clean package
Másolja be a munkadarabot az üzembe helyezési könyvtárba a Tomcaten
Másolja az összetevő-háborús fájlt a Tomcat könyvtárába"
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
A Tomcat-kiszolgáló elindítása
Indítsa el a Tomcat-kiszolgálót.
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
A Tomcat elindítása után nyissa meg a http://localhost:8080/azure-javaweb-app/ oldalt, ahol az alábbi képernyő jelenik meg:
Sikeresen futtatta a JSF-webalkalmazást a helyi Tomcat-környezetben.