Ćwiczenie — Tworzenie aplikacji internetowej JavaServer Faces na serwerze Tomcat

Ukończone

Poproszono Cię o utworzenie aplikacji internetowej JavaServer Faces (FSF), która może obsługiwać przesyłanie formularzy. Utworzysz aplikację internetową i wdrożysz ją lokalnie na serwerze Tomcat.

Tworzenie prostej aplikacji internetowej JSF na serwerze Tomcat

W tym ćwiczeniu utworzymy projekt Maven dla aplikacji internetowej w języku Java. Po utworzeniu projektu trzeba skonfigurować trzy konfiguracje. Pierwsza z nich polega na dodaniu bibliotek zależności do pliku pom.xml. Druga polega na utworzeniu pliku konfiguracji CDI jako beans.xml do użycia kontekstów i iniekcji zależności (CDI). Trzecia polega na skonfigurowaniu struktury JSF w pliku web.xml. Po utworzeniu konfiguracji można utworzyć stronę internetową JSF oraz utworzyć ziarno bazowe dla operacji zaplecza po stronie serwera. Na koniec ocenimy ją w lokalnym środowisku serwera Tomcat.

Tworzenie projektu Maven

Wykonaj następujące polecenie archetypu Maven. To polecenie utworzy projekt Maven dla aplikacji internetowej w języku Java.

mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false

Zostaną wyświetlone następujące dane wyjściowe:

[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] ------------------------------------------------------------------------

Teraz dostępne są następujące pliki i katalogi.

├── pom.xml
└── src
 └── main
     ├── resources
     └── webapp
         ├── WEB-INF
         │   └── web.xml
         └── index.jsp

Modyfikowanie pliku pom.xml projektu Maven

Aby móc korzystać z bibliotek JSF, musimy dodać następujące biblioteki zależności do pliku pom.xml.

Zastąp zawartość pliku pom.xml poniższym kodem:

<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>

Jeśli chcesz użyć wersji Java SE 11 zamiast Java 8, zmodyfikuj następujący wpis w pliku pom.xml:

 <maven.compiler.source>11</maven.compiler.source>
 <maven.compiler.target>11</maven.compiler.target>

Włączanie funkcji kontekstu i wstrzykiwania zależności

Następnie należy udostępnić ziarno CDI dla aplikacji internetowej. Utwórz plik beans.xml w katalogu src/main/WEB-INF i opisz następującą zawartość:

<?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>

Włączanie struktury JSF

Następnie, aby rozpoznawać wszystkie pliki z rozszerzeniem xhtml jako facelety JSF, wprowadź następujące zmiany w pliku web.xml w katalogu 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>

Modyfikowanie nazwy pliku index.jsp

Teraz, gdy ustawienia środowiska na potrzeby uruchomienia struktury JSF zostały skompletowane, nadszedł czas na utworzenie strony struktury JSF. Strony internetowe struktury JSF są pisane w formacie pliku XHTML zamiast JSP, jak określono w pliku web.xml w poprzednim przykładzie. W związku z tym zmień nazwę pliku index.jsp, która została wygenerowana automatycznie podczas tworzenia projektu, na index.xhtml.

mv index.jsp index.xhtml

Tworzenie podstawowej strony internetowej dla struktury JSF

Usuń całą zawartość pliku index.xhtml i skopiuj następujący 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>

Tworzenie ziarna bazowego JSF

Następnie utwórz ziarno bazowe w celu zaimplementowania przetwarzania zaplecza po stronie serwera. Utwórz nowy katalog dla pakietu Java, którego użyjesz do utworzenia fasoli zapasowej w src/main katalogu .

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

Następnie utwórz plik IndexController.java oraz skopiuj i wklej następujący kod ziarna bazowego struktury JSF:

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++;
    }
}

Po wykonaniu tej ostatniej czynności program jest gotowy. Struktura katalogów po zaimplementowaniu programu jest następująca:

├── pom.xml
└── src
    └── main
        ├── java
        │   └── com
        │       └── microsoft
        │           └── azure
        │               └── samples
        │                   └── IndexController.java
        ├── resources
        └── webapp
            ├── WEB-INF
            │   ├── beans.xml
            │   └── web.xml
            └── index.xhtml

Uruchamianie w lokalnym środowisku serwera Tomcat

Jeśli w swoim środowisku lokalnym masz zainstalowany program Tomcat 9.0.x, przejdź do następnego kroku. W przeciwnym razie przejdź do następnej sekcji.

Skompiluj kod źródłowy i uruchom go w środowisku Tomcat zainstalowanym lokalnie. Uruchom następujące polecenie.

Kompilowanie i pakowanie projektu Java

Wykonaj następujące polecenie, aby skompilować kod:

mvn clean package

Kopiowanie artefaktu do katalogu wdrożenia na serwerze Tomcat

Skopiuj plik war artefaktu do katalogu w usłudze Tomcat"

cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/

Uruchamianie serwera Tomcat

Uruchom serwer Tomcat.

$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh

Po uruchomieniu serwera Tomcat przejdź do adresu http://localhost:8080/azure-javaweb-app/. Zobaczysz poniższy ekran:

JSF HelloWorld Page.

Twoja aplikacja internetowa JSF została pomyślnie uruchomiona w lokalnym środowisku serwera Tomcat.