JavaServer Faces 应用程序概述

5 分钟

本单元将使用 JavaServer Faces (JSF) 作为“视图”技术来了解 JSF 的基本概念。

什么是 JavaServer Faces？

JavaServer Faces 被用作 Java 平台中的规范，Enterprise Edition (Java EE) 是 Java EE 5 (2006) 的一部分。最初，JSF 使用 Java Server Pages (JSP) 来呈现 HTML 页面。从 2.0 版开始，JSF 使用了更接近于普通 HTML 的 Facelets。

JSF 是基于组件的应用程序框架。每个组件的状态都将根据客户端的交互进行保存。请求新页面时将保存状态，返回时将恢复状态。

JSF 基本功能

JSF 应用程序大致分为以下两个函数：

Facelets：基于 XHTML 的模板引擎，用于描述屏幕布局
BackingBean：绑定到 Facelets 并设置和处理值的 Java 类

Facelets 是基于 XHTML 的模板引擎，用于描述 XHTML 编写的屏幕布局。 XHTML 符合 W3C 中定义的文档类型定义 (DTD)，并被视为扩展名为 xhtml 的文件。

BackingBean 是链接到 JSF 页的 Java 类。它包含操作方法、操作侦听器和值更改侦听器。在 Java EE 6 中，后备 Bean 是通过 JSF 托管 Bean 实现的。从 Java EE 7 开始，上下文和依赖项注入 (CDI) Bean 被用作实现。

使用 PrimeFaces 创建 JSF 页面

PrimeFaces 是第三方 JSF 实现，可轻松创建 JSF Web 组件。 PrimeFaces 是包含一个 jar 的轻量级库，零配置且没有必需的依赖项。只需要下载 PrimeFaces，将 primefaces-{version}.jar 添加到类路径并导入命名空间即可开始使用，如 xmlns:p="http://primefaces.org/ui" 中所示。

接下来举例说明。在下面的 PrimeFaces 页面中，p:outputLabel、p:inputText 和 p:commandButton 标记用于显示标签、输入字段和按钮。

<?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 value="Submit" action="#{indexcontroller.submitButtonAction()}"/><br/>
        </h:form>
    </h:body>
</html>

编写上述 XHTML 代码后，将显示以下屏幕：

Screenshot that shows a JSF Facelets sample.

PrimeFaces Ajax 支持

默认情况下，JSF 支持 Ajax 应用程序。可以动态更新屏幕的一部分，而无需刷新屏幕。

PrimeFaces 利用 update 属性轻松实现 JSF 提供的 Ajax 支持。指定应更新的组件及其目标 ID。在下面的示例中，update ="ajaxUpdateText" 属性添加到了 p:commandButton，因此在选择按钮时更新了 <div id ="ajaxUpdateText"> 部分。可在此处为任何 HTML 组件指定 id。

<div id="ajaxUpdateText">
...
</div>

<p:commandButton update="ajaxUpdateText" 
   value="Submit" action="#{indexcontroller.submitButtonAction()}"/>

JSF 后备 bean

备用 Bean 是 Java 类，可实现与 JSF 视图关联的后端处理。在下一个示例中，将引用链接到上述 XHTML 的后备 Bean IndexController。我们将使用 @Named 注释来配置 JSF 应用程序，从而可以从 JSF Facelets 中引用它。

如果在 Facelets 中写入 <p: inputText value ="#{indexcontroller.inputValue}"/>，则“输入文本”字段将显示在屏幕上。将输入的值绑定到 IndexController 类中定义的 inputValue。

另外，如果写入 <p:commandButton value ="Submit" action="#{indexcontroller.submitButtonAction()}"/>，将显示 “HTML”按钮。当选择此按钮时，它将调用 IndexController 类中定义的 submitButtonAction() 方法。

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

通过这种方式，JSF 允许构成屏幕的视图 (Facelets) 和控制器（后备 Bean）分别实现。

本单元介绍了 JSF。在下一单元中，我们将创建 JSF 应用程序并在本地运行该应用程序。

继续