練習 - 在 Tomcat 上建立 JavaServer Faces Web 應用程式
您的主管要求您建立可處理表單提交的 JavaServer Faces (JSF) Web 應用程式。 您將建置 Web 應用程式，並部署到 Tomcat 伺服器本機。
在 Tomcat 上建立簡單的 JSF Web 應用程式
在此練習中，我們將建立適用於您 Java Web 應用程式的 Maven 專案。 建立專案之後，您必須設定三個設定。 第一個是將相依性程式庫新增至 pom.xml 檔案。 第二個是將 CDI 設定檔建立為 beans.xml，以使用內容和相依性插入 (CDI)。 第三個是在 web.xml 檔案上設定 JSF。 設定後，我們就可以建立 JSF 網頁，並建立用於伺服器端後端作業的支援 Bean。 最後，我們會在本機 Tomcat 環境上加以評估。
建立 Maven 專案
執行下列 Maven 原型命令。 此命令會建立適用於您 Java Web 應用程式的 Maven 專案。
mvn archetype:generate \
-DgroupId=com.microsoft.azure.samples \
-DartifactId=azure-javaweb-app \
-DarchetypeArtifactId=maven-archetype-webapp \
-Dversion=1.0-SNAPSHOT \
-DinteractiveMode=false
您將會看到下列輸出:
[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] ------------------------------------------------------------------------
現已提供下列檔案與目錄。
├── pom.xml
└── src
└── main
├── resources
└── webapp
├── WEB-INF
│ └── web.xml
└── index.jsp
修改 Maven pom.xml 檔案
若要使用 JSF 程式庫，我們必須在 pom.xml 中新增下列相依性程式庫。
以下列程式碼取代您 pom.xml 的內容：
<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>
如果您想要使用 Java SE 11，而非 Java 8，請修改下列 pom.xml 項目：
<maven.compiler.source>11</maven.compiler.source>
<maven.compiler.target>11</maven.compiler.target>
啟用內容和相依性插入
接下來，將 CDI 提供給您的 Web 應用程式。 在 src/main/WEB-INF 目錄下建立 beans.xml 檔案，並描述下列內容：
<?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
接下來，將所有副檔名為為 xhtml 的檔案識別為 JSF Facelet，對 WEB-INF 目錄下的 web.xml 進行下列變更。
<?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>
修改 index.jsp 的名稱
完成執行 JSF 的環境設定後，就可以開始建立 JSF 網頁。 JSF 網頁是以 XHTML 檔案格式撰寫，而非 JSP，如在先前範例的 web.xml 中所設定。 所以要變更在 index.xhtml 中建立專案時會自動產生的 index.jsp 檔案名稱。
mv index.jsp index.xhtml
建立 JSF 的基本網頁
刪除 index.xhtml 中所述全部內容，並複製下列程式碼：
<?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 支援 Bean
接下來，建立支援 Bean 以實作伺服器端後端處理。 建立 Java 套件的新目錄，用以在 src/main 目錄下建立支援 Bean。
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
接著建立 IndexController.java 檔案，再複製並貼上以下 JSF 支援 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++;
}
}
這最後一個動作會完成您的程式。 實作程式之後的目錄結構如下所示：
├── pom.xml
└── src
└── main
├── java
│ └── com
│ └── microsoft
│ └── azure
│ └── samples
│ └── IndexController.java
├── resources
└── webapp
├── WEB-INF
│ ├── beans.xml
│ └── web.xml
└── index.xhtml
在本機 Tomcat 環境中執行
如果您已在本機環境上安裝 Tomcat 9.0.x，請移至下一個步驟。 否則，請移至下一節。
編譯原始程式碼，並在安裝 Tomcat 環境的本機中執行。 執行以下命令。
編譯和封裝 Java 專案
執行下列命令以編譯程式碼:
mvn clean package
將成品複製到 Tomcat 的部署目錄
將成品 war 檔案複製到 Tomcat 的目錄
cp target/azure-javaweb-app.war /$INSTALL_DIR/apache-tomcat-9.0.39/webapps/
啟動 Tomcat 伺服器
啟動 Tomcat 伺服器。
$INSTALL_DIR/apache-tomcat-9.0.39/bin/startup.sh
啟動 Tomcat 之後，請瀏覽至 http://localhost:8080/azure-javaweb-app/，您將會看到下列畫面：
您已在本機 Tomcat 環境中成功執行您的 JSF Web 應用程式。