项目篇--Maven+Idea+ PrimeFaces+Jsf--项目搭建

news2025/1/15 20:49:53

文章目录

前言
一、PrimeFaces 和 Jsf：
- 1.1 JSF 基础：
- 1.2 PrimeFaces 扩展：
二、项目搭建：
- 2.1 Maven 项目的创建：
- 2 xml 配置：
- - 2.1 pom.xml 配置
  - 2.2web.xml 配置：
- 2.3 代码：
- - 2.3.1 页面：
  - 2.3.2 bean ：
- 2.4 运行：
- 2.4.1 通过maven 构建war 包
- 2.4.2 tomcat 运行：
- - 2.4.2.1 添加tomcat：
总结

前言

PrimeFaces 是对JSF 的一层封装，使用PrimeFaces+Jsf 进行前端组件的开发，由于PrimeFaces 官网对项目的搭建并没有详细的步骤，固本文对项目的搭建过程及遇到的问题进行整理。
PrimeFaces 官网传送门
本文使用环境及版本：

idea： IntelliJ lDEA 2023.3.7
maven: maven apache-maven-3.9.8
jdk: jdk8

一、PrimeFaces 和 Jsf：

1.1 JSF 基础：

JSF 是一种基于组件的 Web 应用程序框架，它提供了一种声明式的方式来构建用户界面。JSF 由 Java 规范请求（JSR）定义，并且在 Java EE 平台中得到广泛支持。
JSF 提供了基本的 UI 组件（如输入文本框、按钮等）、页面导航、表单处理和验证等功能。

1.2 PrimeFaces 扩展：

PrimeFaces 是在 JSF 的基础上构建的，它扩展了 JSF 的功能，提供了更多高级的 UI 组件和功能。
PrimeFaces 的组件与 JSF 的生命周期和事件处理机制紧密集成，开发人员可以使用 JSF 的标准方式来处理 PrimeFaces 组件的事件和数据绑定。

二、项目搭建：

2.1 Maven 项目的创建：

(1)file -> new->project
在这里插入图片描述 (2) 使用maven 脚手架创建项目：
（3）设置maven 仓库地址：

（4）设置项目的编码：
在这里插入图片描述

2 xml 配置：

工程目录结构：
在这里插入图片描述

2.1 pom.xml 配置

（1） 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/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>primefaces_test</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>primefaces_test</name>
  <url>http://maven.apache.org</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>3.8.1</version>
      <scope>test</scope>
    </dependency>

    <!-- PrimeFaces -->
    <!-- https://mvnrepository.com/artifact/org.primefaces/primefaces -->
    <dependency>
      <groupId>org.primefaces</groupId>
      <artifactId>primefaces</artifactId>
      <!--<version>6.0</version>-->
      <version>7.0</version>
    </dependency>


    <!-- JSF 2 -->
    <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-api</artifactId>
      <!--<version>2.1.11</version>-->
      <version>2.2.0</version>
    </dependency>
    <dependency>
      <groupId>com.sun.faces</groupId>
      <artifactId>jsf-impl</artifactId>
    <!--  <version>2.1.11</version>-->
      <version>2.2.8</version>
    </dependency>
    <!--servlet  -->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>servlet-api</artifactId>
      <version>2.5</version>
    </dependency>

    <dependency>
      <groupId>javax.servlet.jsp</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.1</version>
    </dependency>

    <!-- EL -->
    <dependency>
      <groupId>org.glassfish.web</groupId>
      <artifactId>el-impl</artifactId>
      <version>2.2</version>
    </dependency>

    <!-- Tomcat 6 need this
    <dependency>
        <groupId>com.sun.el</groupId>
        <artifactId>el-ri</artifactId>
        <version>1.0</version>
    </dependency>
    -->

  </dependencies>
  <build>
    <plugins>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-compiler-plugin</artifactId>
        <version>2.3.2</version>
        <configuration>
          <source>1.8</source>
          <target>1.8</target>
        </configuration>
      </plugin>
      <plugin>
        <groupId>org.apache.maven.plugins</groupId>
        <artifactId>maven-war-plugin</artifactId>
        <version>3.3.2</version>
        <configuration>
          <failOnMissingWebXml>false</failOnMissingWebXml>
          <warSourceDirectory>src/main/webapp</warSourceDirectory>
        </configuration>
      </plugin>
    </plugins>
  </build>
</project>

（2） PrimeFaces 不同版本与 JSF 版本的一般兼容关系：
PrimeFaces 3.x：

通常与 JSF 2.0 兼容。

PrimeFaces 4.x 和 5.x：

与 JSF 2.1 和 2.2 兼容性较好。

PrimeFaces 6.x：

如前面所述，与 JSF 2.2 及更高版本兼容较好。

PrimeFaces 7.x 和 8.x：

建议与 JSF 2.3 及更高版本搭配使用。

（3）PrimeFaces 官网的的参考版本：
https://primefaces.github.io/primefaces/14_0_0/#/gettingstarted/dependencies
在这里插入图片描述

2.2web.xml 配置：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
         http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

    <display-name>PrimeFaces Application</display-name>
    <context-param>
        <param-name>javax.faces.PROJECT_STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>
    <servlet>
        <servlet-name>Faces Servlet</servlet-name>
        <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.faces</url-pattern>
    </servlet-mapping>
    <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>

2.3 代码：

2.3.1 页面：

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:utils="http://java.sun.com/jsf/composite/utils">
<h:head>
    <title>Simple PrimeFaces Form</title>
</h:head>
<h:body>
    <h:form id="form">
        <p:outputLabel for="username" value="Username:" />
        <p:inputText id="username" value="#{userBean.username}"  />

        <p:outputLabel for="password" value="Password:" />
        <p:password id="password" value="#{userBean.password}"  />

        <p:commandButton  value="Submit" actionListener="#{userBean.submit}"  />
    </h:form>
</h:body>
</html>

2.3.2 bean ：

UserBean

package org.example.bean;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import java.io.Serializable;

@ManagedBean(name = "userBean")
@ViewScoped
public class UserBean implements Serializable {
    private String username;
    private String password;

    public String getUsername() {
        return username+"456";
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password+"123";
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String submit() {
        System.out.println("Username: " + username);
        System.out.println("Password: " + password);
        return "index1";
    }
}