练习 - 在 Tomcat 上创建 JavaServer Faces Web 应用

4 分钟

你需创建可处理表单提交的 JavaServer Faces (JSF) Web 应用程序。构建 Web 应用程序并将其本地部署到 Tomcat 服务器。

在 Tomcat 上创建简单的 JSF Web 应用

在该练习中，我们将为 Java Web 应用程序创建 Maven 项目。创建项目后，将需要配置三种配置。第一种配置是将依赖项库添加到 pom.xml 文件中。第二种方式是创建一个 CDI 配置文件作为 beans.xml 来使用上下文和依赖关系注入 (CDI)。第三种配置是在 web.xml 文件上配置 JSF。配置完成后，可以创建 JSF Web 页面并为服务器端后端操作创建后备 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 Facelets，请对 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.jsp 文件的名称更改为 index.xhtml。

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/，你会看到以下屏幕：

JSF HelloWorld Page.

你已在本地 Tomcat 环境中成功运行了 JSF Web 应用程序。