1. Introduction
1.介绍
Primefaces is an open source UI component suite for Java Server Faces (JSF) applications.
Primefaces是一个开源的UI组件套件，用于Java Server Faces（JSF）应用程序。
In this tutorial, we’ll give an introduction to Primefaces, and demonstrate how to configure it and use some of its main features.
在本教程中，我们将对Primefaces进行介绍，并演示如何配置它和使用它的一些主要功能。
2. Overview
2.概述
2.1. Java Server Faces
2.1. Java Server Faces
Java Server Faces is a component-oriented framework for building user interfaces for Java web applications. The JSF specification is formalized through the Java Community Process and is a standardized display technology.
Java Server Faces是一个面向组件的框架，用于为Java Web应用程序构建用户界面。JSF规范是通过Java社区进程正式确定的，是一种标准化的显示技术。
More about JSF in Spring environment can be found here.
关于Spring环境中的JSF的更多信息可以在这里找到。
2.2. Primefaces
2.2.原始面孔
Built on top of JSF, Primefaces supports rapid application development by providing pre-built UI components which can be added to any project.
构建于JSF之上，Primefaces通过提供预构建的UI组件支持快速应用开发，这些组件可以被添加到任何项目中。
In addition to Primefaces, there is also the Primefaces Extensions project. This community-based, open-source project provides additional components besides the standard ones.
除了Primefaces之外，还有Primefaces Extensions项目。这个基于社区的开源项目提供了除标准组件外的其他组件。
3. Application Setup
3.应用程序的设置
For the purpose of demonstrating some Primefaces components, let’s create a simple web application using Maven.
为了演示一些Primefaces组件，让我们用Maven创建一个简单的Web应用。
3.1. Maven Configuration
3.1.Maven配置
Primefaces has a lightweight configuration with only one jar so to get started, let’s add the dependency to our pom.xml:
Primefaces有一个轻量级的配置，只有一个jar，所以要开始了，让我们把这个依赖关系添加到我们的pom.xml。
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>6.2</version>
</dependency>The latest version can be found here.
最新版本可以在这里找到。
3.2. Controller – Managed Bean
3.2.控制器 – 被管理的 Bean
Next, let’s create the bean class for our component:
接下来，让我们为我们的组件创建一个bean类。
@ManagedBean(name = "helloPFBean")
public class HelloPFBean {
}We need to provide a @ManagedBean annotation to bind our controller to a view component.
我们需要提供一个@ManagedBean注解，将我们的控制器绑定到视图组件上。
3.3. View
3.3.查看
Finally, let’s declare the Primefaces namespace in our .xhtml file:
最后，让我们在我们的.xhtml文件中声明Primefaces命名空间。
<html xmlns:p="http://primefaces.org/ui">
4. Example Components
4.示例组件
To render the page, start the server and navigate to:
要渲染该页面，启动服务器并导航到。
http://localhost:8080/jsf/pf_intro.xhtml4.1. PanelGrid
4.1.PanelGrid
Let’s use PanelGrid as an extension to standard JSF panelGrid:
让我们使用PanelGrid作为标准JSF panelGrid的扩展：。
<p:panelGrid columns="2">
<h:outputText value="#{helloPFBean.firstName}"/>
<h:outputText value="#{helloPFBean.lastName}" />
</p:panelGrid>
Here, we’ve defined a panelGrid with two columns and set the outputText from JSF facelets to display data from a managed bean.
在这里，我们定义了一个有两列的panelGrid，并从JSF facelets中设置了outputText，以显示来自一个托管Bean的数据。
The values declared in each outputText correspond to firstName and lastName properties declared in our @ManagedBean:
每个outputText中声明的值与我们的@ManagedBean中声明的firstName和lastName属性相一致。
private String firstName;
private String lastName;
Let’s take a look at our first, simple component:
让我们看看我们的第一个简单组件。
<img class=" wp-image-32802 alignnone" style="font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif; white-space: normal;" src="https://www.baeldung.com/wp-content/uploads/2018/04/panelGridPF-300x68.png" alt="" width="256" height="58" />4.2. SelectOneRadio
4.2.SelectOneRadio
We can use selectOneRadio component to provide a radio button functionality:
我们可以使用selectOneRadiocomponent来提供一个单选按钮的功能。
<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>
We need to declare the value variable in the backing bean to hold the radio button value:
我们需要在backing bean中声明value变量来保存单选按钮的值。
private String componentSuite;
This setup will result in a 2 option radio button which is tied to the underlying String property componentSuite:
这种设置将产生一个2个选项的单选按钮，它与底层的String属性componentSuite相联系。
4.3. Data Table
4.3.数据表[/strong]
Next, let’s use the dataTable component to display data in a table layout:
接下来，让我们使用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>Similarly, we need to provide a Bean property to hold the data for our table:
同样，我们需要提供一个Bean属性来保存我们表格的数据。
private List<Technology> technologies;
Here, we have a list of various technologies and their version numbers:
这里，我们有一个各种技术及其版本号的清单。
4.4. Ajax With InputText
4.4.使用InputText的Ajax
We can also use p:ajax to provide Ajax features to our components.
我们还可以使用p:ajax为我们的组件提供Ajax功能。
For example, let’s use this component to apply a blur event:
例如，让我们用这个组件来应用一个模糊事件。
<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>
Accordingly, we’ll need to provide properties in the bean:
因此，我们需要在Bean中提供属性。
private String inputText;
private String outputText;
In addition, we also need to provide a listener method in our bean for our AJAX blur event:
此外，我们还需要在Bean中为我们的AJAX模糊事件提供一个监听器方法。
public void onBlurEvent() {
outputText = inputText.toUpperCase();
}Here, we’ve simply converted the text to upper case to demonstrate the mechanism:
在这里，我们只是将文本转换为大写字母，以演示该机制。
4.5. Button
4.5.钮扣
Besides that, we can also use p:commandButton as an extension to the standard h:commandButton component.
除此之外，我们还可以使用p:commandButton作为标准h:commandButton组件的扩展。
For example:
比如说。
<p:commandButton value="Open Dialog"
icon="ui-icon-note"
onclick="PF('exDialog').show();">
</p:commandButton>
As a result, with this configuration, we have the button which we’ll use to open dialog (using onclick attribute):
因此，通过这种配置，我们有了用来打开对话框的按钮（使用onclick属性）。
4.6. Dialog
4.6.对话
Furthermore, to provide the functionality of the dialog, we can use p:dialog component.
此外，为了提供对话框的功能，我们可以使用p:dialog组件。
Let’s also use the button from the last example to open dialog on click:
让我们也使用上一个例子中的按钮，在点击时打开对话框。
<p:dialog header="Example dialog" widgetVar="exDialog" minHeight="40">
<h:outputText value="Hello Baeldung!" />
</p:dialog>In this case, we have a dialog with the basic configuration which can be triggered using the commandButton described in the previous section:
在这种情况下，我们有一个基本配置的对话框，可以使用上一节中描述的命令按钮来触发。
5. Primefaces Mobile
5.原始面孔移动版
Primefaces Mobile (PFM) provides a UI kit to create Primefaces applications for mobile devices.
Primefaces Mobile（PFM）提供了一个UI工具包，用于为移动设备创建Primefaces应用程序。
For this reason, PFM supports responsive design adjusted for mobile devices.
出于这个原因，PFM支持针对移动设备调整的响应式设计。
5.1. Configuration
5.1.配置
To begin with, we need to enable mobile navigation support inside our faces-config.xml:
首先，我们需要在我们的faces-config.xml中启用移动导航支持。
<navigation-handler>
org.primefaces.mobile.application.MobileNavigationHandler
</navigation-handler>5.2. Namespace
5.2.名称空间
Then, to use PFM components, we need to include the PFM namespace in our .xhtml file:
然后，为了使用PFM组件，我们需要在我们的.xhtml文件中包含PFM命名空间。
xmlns:pm="http://primefaces.org/mobile"Besides the standard Primefaces jar, there is no need for any additional library in our configuration.
除了标准的Primefaces jar，我们的配置中不需要任何额外的库。
5.3. RenderKit
5.3、RenderKit
Last, we need to provide RenderKit, which is used to render the components in the mobile environment.
最后，我们需要提供RenderKit，它用于在移动环境中渲染组件。
In case of a single PFM page within an application, we can define a RenderKit inside our page:
如果在一个应用程序中只有一个PFM页面，我们可以在我们的页面中定义一个RenderKit。
<f:view renderKitId="PRIMEFACES_MOBILE" />With a full PFM application, we can define our RenderKit at the application scope inside faces-config.xml:
对于一个完整的PFM应用程序，我们可以在faces-config.xml内的应用程序范围内定义我们的RenderKit。
<default-render-kit-id>PRIMEFACES_MOBILE</default-render-kit-id>
5.4. Example Page
5.4.示例页面
Now, let’s make example PFM page:
现在，让我们来制作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>As can be seen, we used page, header and content component from PFM to build a simple form with a header:
可以看出，我们使用PFM中的page, header和contentcomponent来建立一个带有标题的简单表单。
Furthermore, we used our backing bean for user input check and navigation:
此外，我们使用我们的支持Bean来进行用户输入检查和导航。
public String go() {
if(this.magicWord != null
&& this.magicWord.toUpperCase().equals("BAELDUNG")) {
return "pm:success";
}
return "pm:failure";
}In case of a correct word, we navigate to next page:
如果有一个正确的词，我们会导航到下一页。
<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>This configuration results in this layout:
这种配置导致了这种布局。
In case of an incorrect word, we navigate to next 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>This configuration will result in this layout:
这种配置将导致这种布局。
Note that PFM is deprecated in version 6.2 and will be removed in version 6.3 in favor of a responsive standard kit.
请注意，PFM在6.2版本中已被废弃，并将在6.3版本中被移除，以支持响应式标准套件。。
6. Conclusion
6.结语
In this tutorial, we’ve explained the benefits of using the Primefaces JSF component suite and demonstrated how to configure and use Primefaces in a Maven-based project.
在本教程中，我们解释了使用Primefaces JSF组件套件的好处，并演示了如何在基于Maven的项目中配置和使用Primefaces。
In addition, we introduced Primefaces Mobile, UI kit specialized for mobile devices.
此外，我们还推出了Primefaces Mobile，专门用于移动设备的用户界面套件。
As always, the code samples from this tutorial are provided over on GitHub.
一如既往，本教程中的代码样本在GitHub上提供over。