1. 简介
Primefaces 是一个用于 Java Server Faces (JSF) 应用的开源 UI 组件库。
本教程将带你快速入门 Primefaces，演示如何配置它并使用其核心功能。
2. 概述
2.1 Java Server Faces
Java Server Faces 是一个面向组件的 Java Web 应用 UI 框架。JSF 规范通过 Java Community Process 正式化，是一种标准化的显示技术。
更多关于 Spring 环境中的 JSF 内容可参考这里。
2.2 Primefaces
Primefaces 构建于 JSF 之上，通过提供预构建的 UI 组件支持快速应用开发，这些组件可直接集成到任何项目中。
除了核心库，还有Primefaces Extensions项目。这个社区驱动的开源项目提供了标准组件之外的扩展组件。
3. 应用搭建
为了演示 Primefaces 组件，我们用 Maven 创建一个简单的 Web 应用。
3.1 Maven 配置
Primefaces 配置非常轻量，只需一个 JAR 包。在 pom.xml 中添加依赖：
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.2</version>
</dependency>
最新版本可在这里查看。
3.2 控制器 – Named Bean
创建组件对应的 Bean 类：
@Named("helloPFBean")
public class HelloPFBean {
}
必须使用 @Named 注解将控制器绑定到视图组件。
3.3 视图
在 .xhtml 文件中声明 Primefaces 命名空间：
<html xmlns:p="http://primefaces.org/ui">
4. 组件示例
启动服务器并访问以下地址渲染页面：
http://localhost:8080/jsf/pf_intro.xhtml
4.1 PanelGrid
使用 PanelGrid 作为标准 JSF panelGrid 的扩展：
<p:panelGrid columns="2">
<h:outputText value="#{helloPFBean.firstName}"/>
<h:outputText value="#{helloPFBean.lastName}" />
</p:panelGrid>
这里定义了一个两列的 panelGrid，通过 JSF facelets 的 outputText 显示命名 Bean 的数据。
outputText 的值对应 @Named Bean 中的属性：
private String firstName;
private String lastName;
效果如下：
4.2 SelectOneRadio
使用 selectOneRadio 组件实现单选按钮功能：
<h:panelGrid columns="2">
<p:outputLabel for="jsfCompSuite" value="Component Suite" />
<p:selectOneRadio id="jsfCompSuite" value="#{helloPFBean.componentSuite}">
<f:selectItem itemLabel="ICEfaces" itemValue="ICEfaces" />
<f:selectItem itemLabel="RichFaces" itemValue="Richfaces" />
</p:selectOneRadio>
</h:panelGrid>
在后台 Bean 中声明变量存储单选值：
private String componentSuite;
这将生成一个绑定到 componentSuite 属性的双选项单选按钮：
4.3 数据表格
使用 dataTable 组件以表格形式展示数据：
<p:dataTable var="technology" value="#{helloPFBean.technologies}">
<p:column headerText="Name">
<h:outputText value="#{technology.name}" />
</p:column>
<p:column headerText="Version">
<h:outputText value="#{technology.currentVersion}" />
</p:column>
</p:dataTable>
在 Bean 中提供表格数据源：
private List<Technology> technologies;
效果展示多种技术及其版本：
4.4 带 Ajax 的 InputText
使用 p:ajax 为组件添加 Ajax 功能。
例如实现失焦事件：
<h:panelGrid columns="3">
<h:outputText value="Blur event " />
<p:inputText id="inputTextId" value="#{helloPFBean.inputText}}">
<p:ajax event="blur" update="outputTextId"
listener="#{helloPFBean.onBlurEvent}" />
</p:inputText>
<h:outputText id="outputTextId"
value="#{helloPFBean.outputText}" />
</h:panelGrid>
在 Bean 中提供属性：
private String inputText;
private String outputText;
并添加 Ajax 事件监听方法：
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}
这里简单将文本转为大写演示机制：
4.5 按钮
使用 p:commandButton 作为标准 h:commandButton 的扩展。
示例：
<p:commandButton value="Open Dialog"
icon="ui-icon-note"
onclick="PF('exDialog').show();">
</p:commandButton>
配置后得到一个通过 onclick 触发对话框的按钮：
4.6 对话框
使用 p:dialog 组件实现对话框功能。
结合上例的按钮实现点击打开：
<p:dialog header="Example dialog" widgetVar="exDialog" minHeight="40">
<h:outputText value="Hello Baeldung!" />
</p:dialog>
基础配置的对话框可通过前述 commandButton 触发：
5. Primefaces Mobile
Primefaces Mobile (PFM) 提供用于移动设备的 Primefaces UI 工具包。
PFM 支持针对移动设备优化的响应式设计。
5.1 配置
在 faces-config.xml 中启用移动导航支持：
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>
5.2 命名空间
在 .xhtml 文件中引入 PFM 命名空间：
xmlns:pm="http://primefaces.org/mobile"
除标准 Primefaces JAR 外无需额外依赖。
5.3 RenderKit
提供 RenderKit 用于移动环境组件渲染。
单页应用可在页面内定义：
<f:view renderKitId="PRIMEFACES_MOBILE" />
完整 PFM 应用可在 faces-config.xml 中定义：
<default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
5.4 示例页面
创建 PFM 示例页面：
<pm:page id="enter">
<pm:header>
<p:outputLabel value="Introduction to PFM"></p:outputLabel>
</pm:header>
<pm:content>
<h:form id="enterForm">
<pm:field>
<p:outputLabel
value="Enter Magic Word">
</p:outputLabel>
<p:inputText id="magicWord"
value="#{helloPFMBean.magicWord}">
</p:inputText>
</pm:field>
<p:commandButton
value="Go!" action="#{helloPFMBean.go}">
</p:commandButton>
</h:form>
</pm:content>
</pm:page>
使用 PFM 的 page、header 和 content 组件构建带标题的表单：
后台 Bean 处理输入和导航：
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("BAELDUNG")) {
return "pm:success";
}
return "pm:failure";
}
输入正确时跳转：
<pm:page id="success">
<pm:content>
<p:outputLabel value="Correct!">
</p:outputLabel>
<p:button value="Back"
outcome="pm:enter?transition=flow">
</p:button>
</pm:content>
</pm:page>
效果如下：
输入错误时跳转：
<pm:page id="failure">
<pm:content>
<p:outputLabel value="That is not the magic word">
</p:outputLabel>
<p:button value="Back" outcome="pm:enter?transition=flow">
</p:button>
</pm:content>
</pm:page>
效果如下：
⚠️ 注意：PFM 在 6.2 版本已弃用，6.3 版本将被移除，推荐使用响应式标准工具包替代。
6. 总结
本教程介绍了使用 Primefaces JSF 组件库的优势，演示了在 Maven 项目中配置和使用 Primefaces 的方法。
此外还介绍了专为移动设备设计的 Primefaces Mobile UI 工具包。