JSF复习系列(3)--JSF、Primefaces标签与Html的内嵌使用

最新推荐文章于 2021-06-03 19:38:36 发布

高自强的博客

最新推荐文章于 2021-06-03 19:38:36 发布

阅读量2.4k

点赞数 1

文章标签： jsf

本文链接：https://blog.csdn.net/qq_33429968/article/details/73822876

版权

一、前言

为了让自己的前端好看一点，怎样将经常使用JSF标签与炫酷的HTML、CSS结合起来呢？同样，这也是暑假里需要解决的问题。
比较不幸的是，网上相关资料一点完整的都没有，整理一下。
今天好像就干了这一件事，中间遇到了些坎坷，还好解决了。

二、前期准备

JSF、Primefaces的命名空间
web.xml中JSF映射
相关HTML标签换成JSF、Primefaces标签

三、详细实现步骤

3.1 pom.xml文件中添加JSF、Primefaces依赖

<!-- jsf2 support -->
<dependency>
    <groupId>com.sun.faces</groupId>
    <artifactId>jsf-api</artifactId>
    <version>2.2.12</version>
    <scope>provided</scope>
</dependency>

<!-- primefaces support -->
<dependency>
    <groupId>org.primefaces</groupId>
    <artifactId>primefaces</artifactId>
    <version>6.0</version>
</dependency>

3.2 添加JSF、Primefaces的命名空间

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">

3.3 添加web.xml中JSF映射

<context-param>
        <param-name>javax.faces.DEFAULT_SUFFIX</param-name>
        <param-value>.xhtml</param-value>
    </context-param>

    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>

3.4 相关HTML标签换成JSF、Primefaces标签

<head>--><h:head>

<body>--><h:body>

<form>--><h:from>

四、代码实例

4.1 原来的代码（部分）:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发动机远程监控与智能诊断系统</title>
    <link rel="stylesheet" href="Log.css">
    <link rel="stylesheet" href="resumeANI.css">
    <link rel="stylesheet" href="resumeJump.css">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery.min.js"></script>
</head>
<body>
        <!--登录信息界面-->
        <div id="login">
            <span class="login-headline">请输入</span>
            <span class="login-close">X</span>
            <div class="login-account">
                账号<br/>
                <input type="text" class="form-control" placeholder="邮箱/手机号/用户名">
            </div>
            <div class="login-password">
                密码<br/>
                <input type="text" class="form-control" placeholder="密码">
            </div>
            <div class="login-buttonLogin">登录</div>
        </div>

        <!--注册信息界面-->
        <div id="signin">
            <span class="signin-headline">请输入</span>
            <span class="signin-close">X</span>
            <div class="signin-contact">
                邮箱/手机号<br/>
                <input type="text" class="form-control" placeholder="请输入常用邮箱/手机号">
            </div>
            <div class="signin-password">
                密码<br/>
                <input type="text" class="form-control" placeholder="5-20个英语，字符，数字，区分大小写">
            </div>
            <div class="verify-again"><span>10</span>秒后重新获取</div>
            <div class="signin-buttonSign">注册</div>
        </div>
    </div>
</body>
</html>

4.2 添加JSF、Primefaces后的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<h:head>
    <meta charset="UTF-8" />
    <title>发动机远程监控与智能诊断系统</title>
    <link rel="stylesheet" href="Log.css" />
    <link rel="stylesheet" href="resumeANI.css" />
    <link rel="stylesheet" href="resumeJump.css" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <script src="jquery.min.js"></script>
</h:head>
<h:body>
            <!--登录信息界面-->
            <div id="login">
                <span class="login-headline"></span> <span class="login-close">X</span>
                <div class="login-account">
                    账号<br />
                    <h:inputText name="login-username" value="#{temp.username}" size="10" />
                </div>
                <div class="login-password">
                    密码<br />
                    <h:inputText name="login-password" value="#{temp.password}" size="10" />
                </div>
                <div class="login-buttonLogin">
                    <h:commandButton value="登录" action="#{UserController.login}"
                        size="10" />
                </div>
            </div>

            <!--注册信息界面-->
            <div id="signin">
                <h:form>
                    <span class="signin-headline"></span>
                    <span class="signin-close">X</span>
                    <div class="signin-contact">
                        邮箱/手机号<br />
                        <h:inputText name="username" placeholder="5-20个英语，字符，数字，区分大小写"
                            value="#{UserController.user.username}" size="10" />

                    </div>
                    <div class="signin-password">
                        密码<br />
                        <h:inputText name="password" placeholder="5-20个英语，字符，数字，区分大小写"
                            value="#{UserController.user.password}" size="10" />

                    </div>
                    <div class="verify-again">
                        <span>10</span>秒后重新获取
                    </div>
                    <div class="signin-buttonSign">
                        <h:commandButton value="注册" action="#{UserController.register}"
                            size="10" />
                    </div>
                </h:form>
            </div>
            </hr>
        </div>
</h:body>
</html>