Welcome to JSF Primefaces tutorial. JavaServer Faces is one of the leading framework that is used these days for implementing Java web application user interface. JSF has componentized web application and especially that part related to the interface, in that all single view in the JSF has been built using a server side tree of components decoded into HTML when it comes to be rendered into browser.
欢迎使用JSF Primefaces教程。 JavaServer Faces是当今用于实现Java Web应用程序用户界面的主要框架之一。 JSF已对Web应用程序进行了组件化，尤其是与界面有关的部分，因为JSF中的所有单个视图都是使用服务器端组件树构建的，这些组件树在将其呈现给浏览器时解码为HTML。
JSF Primefaces教程 (JSF Primefaces Tutorial)
The process of rendering the view in JSF does pass through what known as JSF lifecycle. This tutorial isn’t intended for providing you a detailed discussion of how lifecycle works or how could we deal with. It’s just a notification about what you should know about the JSF framework and how get JSF view ready for rendering.
在JSF中呈现视图的过程确实会经历所谓的JSF生命周期。 本教程并非旨在为您提供有关生命周期如何工作或我们将如何处理的详细讨论。 这只是关于您应该了解的JSF框架以及如何准备好呈现JSF视图的通知。
JSF has two major implementations till the time in which the article written, oracle implementation Mojarra and Apache MyFaces implementation. Several JSF libraries has been coming into existence, Richfaces, IceFaces, Primefaces, MyFaces, etc and one of the most lead library that used intensively and has an excellent reputation is Primefaces. Primefaces cellabrate before months ago by releasing the Primefaces 5 which will consider the subject of this tutorial and next coming tutorials.
在撰写本文之前，JSF有两个主要实现，即oracle实现Mojarra和Apache MyFaces实现。 已出现了几个JSF库，Richfaces，IceFaces，Primefaces，MyFaces等，Primefaces是使用最广泛且声誉卓著的最主要的库之一 。 Primefaces在几个月前就发布了Primefaces 5，该产品将考虑本教程和后续教程的主题。
For being able of using the primefaces 5, you must install and configure it into your project. Either you are going to use a simple text editor or an enterprise development environment, by ending of this tutorial you will be ready for discovering the all Primefaces components.
为了能够使用撇号5，必须将其安装并配置到项目中。 您将要使用简单的文本编辑器或企业开发环境，到本教程结束时，您都准备好发现所有Primefaces组件。
JSF 2的新增功能 (What’s New In JSF 2)
As we knew, a JavaServer Faces is a framework for developing rich user interface web pages. JSF has been introduced in several Java Community Request JSR where the final release of JSF 2 was released in Jul, 2009 which contains a set of enhancement and new functionalities. Set of consequences have followed JSF 2 and the final one was JSF 2.2 that released in May 2013.
众所周知，JavaServer Faces是用于开发丰富的用户界面网页的框架。 JSF已在多个Java Community Request JSR中引入， JSF 2的最终版本于2009年7月发布，其中包含一组增强功能和新功能。 JSF 2产生了一系列后果，最后一个是2013年5月发布的JSF 2.2 。
Unlike JSF 1.x, JSF 2.x has been coming with a lot of features like using the annotations for declaring the JSF managed beans, Converters, Validators, Scopes etc. That’s not all the story, JSF 2 had provided a newly scopes like View Scope, Custom Scope, Flow Scope and Conversation Scope and much more.
与JSF 1.x不同，JSF 2.x具有很多功能，例如使用注释来声明JSF托管bean，转换器，验证器，范围等。这还不是全部，JSF 2提供了新的范围，例如查看范围，自定义范围，流范围和会话范围等等。
Also, we cannot forget the most amazing feature that added for JSF 2 and it’s an Ajax concept. In JSF 2, Ajax has built into JSF framework inherently. So, any of JSF component can be ajaxified by simply adding the Ajax stuff. Navigation rules also has changed and be much easier as well.
而且，我们不能忘记为JSF 2添加的最神奇的功能，它是Ajax概念。 在JSF 2中，Ajax固有地内置到JSF框架中。 因此，任何JSF组件都可以通过简单地添加Ajax东西来进行Ajax。 导航规则也已更改，并且也更加容易。
Next coming tutorials would cover more about those features that added for JSF 2, while in this tutorial, you’re going to create simple JSF application and a bsic sample of how we could use the Primefaces Tags for implementing certain business scenario.
接下来的教程将详细介绍为JSF 2添加的那些功能，而在本教程中，您将创建一个简单的JSF应用程序以及一个基本示例，说明我们如何使用Primefaces标签实现某些业务场景。
用于完成教程的二手工具 (Used Tools For Completing Tutorial)
For getting started discovering this tutorial, you have to use the following development tools.
为了开始发现本教程，您必须使用以下开发工具。
- Tomcat 7 Tomcat7
- Eclipse IDE Eclipse IDE
- Maven 3 Maven的3
- JSF 2 / Primefaces 5 JSF 2 / Primefaces 5
It’s obvious that we’ve used the Tomcat 7 for deploying the application and Eclipse IDE for developing the required components where the Maven used as building tool and for managing dependencies. So, be sure that you are aware of how could be all of these softwares installed and configured into your development machine. Our final project will look like below image.
显然，我们已经使用Tomcat 7来部署应用程序，并使用Eclipse IDE来开发所需的组件，其中Maven用作构建工具并管理依赖项。 因此，请确保您知道如何将所有这些软件安装并配置到开发计算机中。 我们的最终项目将如下图所示。
创建Eclipse项目 (Creating Eclipse Project)
Eclipse IDE support the development of web project under Dynamic Project umbrella. For creating a dynamic project just follow the below steps:
Eclipse IDE支持在Dynamic Project框架下开发Web项目。 要创建动态项目，只需执行以下步骤：
- Open Eclipse IDE 打开Eclipse IDE
- Right-Click on the project explorer space and select New – Dynamic Web Project 右键单击项目浏览器空间，然后选择“ 新建–动态Web项目”
- Complete the project creation process by setting up the project name, target runtime, source folder, context root, content directory and web.xml 通过设置项目名称，目标运行时，源文件夹，上下文根目录，内容目录和web.xml，完成项目创建过程
JSF安装与配置 (JSF Installation & Configuration)
As we’ve mentioned earlier, our goal is to use JSF/Primefaces for developing web application that uses the primefaces user interface component, but for now, all what we had is just a simple dynamic application that needs more steps for being jsf configured. To add a jsf into your project you need to add the jsf facet and making notice that the adding of jsf implementation does help you build a jsf application that uses Mojarra. For adding that facet you need to follow the below steps:
正如我们前面提到的，我们的目标是使用JSF / Primefaces开发使用primefaces用户界面组件的Web应用程序，但是到目前为止，我们所拥有的只是一个简单的动态应用程序，需要更多的步骤来配置jsf。 要将jsf添加到您的项目中，您需要添加jsf构面并注意添加jsf实现确实有助于您构建使用Mojarra的jsf应用程序。 要添加该构面，您需要执行以下步骤：
- Open the properties window for the created project 打开创建的项目的属性窗口
- From the Project Facets pane, just make the JavaServer Faces checked and follow Further configuration required for completing the configuration 从“ Project Facets”窗格中，只需选中“ JavaServer Faces”，然后按照“完成配置所需的进一步配置”进行操作
- Once you’ve clicked on Further configuration required, JSF Capabilities window must be shown 单击所需的进一步配置后 ，必须显示“ JSF功能”窗口
- Adding the jsf implementation library by clicking on Download Library< and select from the opening window JSF 2.2 (Mojarra 2.2.0) 通过单击下载库 <来添加jsf实现库，然后从打开的窗口JSF 2.2（Mojarra 2.2.0）中进行选择
After installing the JSF library, the JSF capabilities window looks like
By end of this phase, you have a web application with jsf capabilities.
安装JSF库后，“ JSF功能”窗口如下所示：
在本阶段结束时，您将拥有一个具有jsf功能的Web应用程序。
Primefaces 5安装 (Primefaces 5 Installation)
For now, your application is ready for using a JavaServer Faces User Interface, but not using of Primefaces. For being able of using the primefaces, you have to follow the below steps:
目前，您的应用程序已准备就绪，可以使用JavaServer Faces用户界面，但不能使用Primefaces。 为了能够使用素字，您必须遵循以下步骤：
- Download the required primefaces library from the primefaces official site or from Maven central. 从primefaces官方站点或Maven Central下载所需的primefaces库。
- Include the downloaded Primefaces JAR into your lib folder that beneath of WEB-INF folder 将下载的Primefaces JAR包含在WEB-INF文件夹下面的lib文件夹中
开发Primefaces应用程序 (Developing Primefaces Application)
Now, you project is ready for developing a JSF/Primefaces application as you would see. We are going to create a simple application in which a Primefaces DataTable has consumed a list of Employees from the backing bean. Employees list would be populated by a @PostConstruct special method. Follow the below steps for developing a full JSF/Primefaces application.
现在，您的项目已准备就绪，可以开发JSF / Primefaces应用程序了。 我们将创建一个简单的应用程序，其中Primefaces DataTable已消耗了支持bean的员工列表。 员工列表将通过@PostConstruct特殊方法填充。 请遵循以下步骤来开发完整的JSF / Primefaces应用程序。
- Create a managed bean named ViewEmployeesManagedBean 创建一个名为ViewEmployeesManagedBean的托管bean
- Create a Pojo named Employee that contains EmployeeName and EmployeeId 创建一个名为Employee的Pojo，其中包含EmployeeName和EmployeeId
- Create a Primefaces view in order to consume the employees list in the defined managed bean 创建一个Primefaces视图以使用定义的托管bean中的employees列表
package com.journaldev.data;
public class Employee {
private String employeeId;
private String employeeName;
public String getEmployeeId() {
return employeeId;
}
public void setEmployeeId(String employeeId) {
this.employeeId = employeeId;
}
public String getEmployeeName() {
return employeeName;
}
public void setEmployeeName(String employeeName) {
this.employeeName = employeeName;
}
}package com.journaldev.jsfBeans;
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import com.journaldev.data.Employee;
@ManagedBean
@SessionScoped
public class ViewEmployeesManagedBean {
private List<Employee> employees = new ArrayList<Employee>();
public ViewEmployeesManagedBean(){
}
@PostConstruct
public void populateEmployeeList(){
for(int i = 1 ; i <= 10 ; i++){
Employee emp = new Employee();
emp.setEmployeeId(String.valueOf(i));
emp.setEmployeeName("Employee#"+i);
this.employees.add(emp);
}
}
public List<Employee> getEmployees() {
return employees;
}
public void setEmployees(List<Employee> employees) {
this.employees = employees;
}
}Notice the use of JSF annotations and and use of PostConstruct annotation to populate the list of employees.
注意使用JSF注释和使用PostConstruct注释来填充雇员列表。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
xmlns:ui="https://java.sun.com/jsf/facelets"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:f="https://java.sun.com/jsf/core"
xmlns:p="https://primefaces.org/ui">
<p:outputLabel value="JournalDev - JSF2/Primefaces Tutorial"></p:outputLabel>
<p:dataTable value="#{viewEmployeesManagedBean.employees}" var="employee">
<p:column>
<f:facet name="header">
<h:outputText value="Employee ID"></h:outputText>
</f:facet>
<h:outputText value="#{employee.employeeId}"></h:outputText>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Employee Name"></h:outputText>
</f:facet>
<h:outputText value="#{employee.employeeName}"></h:outputText>
</p:column>
</p:dataTable>
</html>Notice the use of dataTable element to create the table from the managed bean properties. PrimeFaces and JSF takes care of passing these to the view page for rendering. If you are from Servlet background, you can easily see that number of steps are cut down – in servlet environment, we first handle the request in servlet, create the model data, set it as attribute in request/session and then forward it to the JSP page to render the response.
注意，使用dataTable元素从托管bean属性创建表。 PrimeFaces和JSF负责将它们传递到视图页面以进行渲染。 如果您是来自Servlet的背景，那么您很容易看到减少的步骤数–在Servlet环境中，我们首先在Servlet中处理请求，创建模型数据，在请求/会话中将其设置为属性，然后将其转发给JSP页面呈现响应。
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xmlns="https://java.sun.com/xml/ns/javaee"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd"
id="WebApp_ID" version="3.0">
<display-name>JournalDev-PrimefacesWebApplication</display-name>
<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>/faces/*</url-pattern>
</servlet-mapping>
<context-param>
<description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<context-param>
<param-name>javax.servlet.jsp.jstl.fmt.localizationContext</param-name>
<param-value>resources.application</param-value>
</context-param>
<listener>
<listener-class>com.sun.faces.config.ConfigureListener</listener-class>
</listener>
</web-app>Notice that javax.faces.webapp.FacesServlet is the controller class, this is where we plugin JSF into our web application.
注意， javax.faces.webapp.FacesServlet是控制器类，在这里我们将JSF插入到Web应用程序中。
<?xml version="1.0" encoding="UTF-8"?>
<faces-config
xmlns="https://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-facesconfig_2_2.xsd"
version="2.2">
</faces-config>This is where we provide JSF components configurations such as managed beans, i18n global messages, custom view handlers and custom factory classes. Since we are using annotations and it’s a simple project, there is no configuration done here, but we will see it’s usage in future posts.
我们在这里提供JSF组件配置，例如托管bean，i18n全局消息，定制视图处理程序和定制工厂类。 由于我们使用的是注释，并且它是一个简单的项目，因此这里没有完成配置，但是我们将在以后的文章中看到它的用法。
Now when you will run this, you will get output as shown in below image.
现在，当您运行它时，您将获得输出，如下图所示。
转换成Maven (Convert Into Maven)
Maven is the most preferred way to manage the java projects build and dependencies, so here we will see how we can convert it to Maven. Eclipse IDE provide the option to convert your Dynamic Web Project into Maven. Maven will help you controlling and managing the required dependencies. Just right click on the created project and from configure menu select Convert into Maven Project.
Maven是管理Java项目构建和依赖关系的最优选方式，因此在这里我们将看到如何将其转换为Maven。 Eclipse IDE提供了将动态Web项目转换为Maven的选项。 Maven将帮助您控制和管理所需的依赖项。 只需右键单击创建的项目，然后从配置菜单中选择“ 转换为Maven项目” 。
Once you have changed your project into Maven, you have to add the required dependencies for making the project compilable by the Maven itself.
一旦将项目更改为Maven，就必须添加所需的依赖关系，以使项目可由Maven本身编译。
The supposed Maven XML that you gain once you’ve converted the application into Maven project and after adding the required libraries for JSF 2, Primefaces and other is:
将应用程序转换为Maven项目后，并添加了JSF 2，Primefaces和其他组件所需的库之后，所获得的Maven XML是：
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>JournalDev-PrimefacesWebApplication</groupId>
<artifactId>JournalDev-PrimefacesWebApplication</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>war</packaging>
<build>
<sourceDirectory>src</sourceDirectory>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.6</source>
<target>1.6</target>
</configuration>
</plugin>
<plugin>
<artifactId>maven-war-plugin</artifactId>
<version>2.3</version>
<configuration>
<warSourceDirectory>webapp</warSourceDirectory>
<failOnMissingWebXml>false</failOnMissingWebXml>
</configuration>
</plugin>
</plugins>
<finalName>${project.artifactId}</finalName>
</build>
<repositories>
<repository>
<id>prime-repo</id>
<name>PrimeFaces Maven Repository</name>
<url>https://repository.primefaces.org</url>
<layout>default</layout>
</repository>
</repositories>
<dependencies>
<!-- Servlet -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.5</version>
<scope>provided</scope>
</dependency>
<!-- Faces Implementation -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Faces Library -->
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.2.4</version>
</dependency>
<!-- Primefaces Version 5 -->
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>5.0</version>
</dependency>
<!-- JSP Library -->
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>javax.servlet.jsp-api</artifactId>
<version>2.3.1</version>
</dependency>
<!-- JSTL Library -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.1.2</version>
</dependency>
</dependencies>
</project>And by executing the mvn clean package against the project, you will get a WAR file ready for being deployed against any of the Java EE container. Just deploy and examine.
通过对项目执行mvn clean软件包 ，您将准备好将WAR文件部署到任何Java EE容器中。 只需部署并检查。
摘要 (Summary)
This tutorial has introduced how you could use a JSF 2 / Primefaces for implementing a web application user interface. In that, we’ve used Eclipse IDE for achieving that, by creating a dynamic project followed by adding all of required libraries either those mandatory for JSF 2 implementation or those required for using Primefaces components. From next tutorial onwards, we will use Maven to create the project for our examples.
本教程介绍了如何使用JSF 2 / Primefaces来实现Web应用程序用户界面。 通过创建一个动态项目，然后添加所有必需的库（对于JSF 2实现是必需的库或使用Primefaces组件所必需的库），我们已经使用Eclipse IDE来实现。 从下一个教程开始，我们将使用Maven为示例创建项目。
Download sample project from above link and play around with it to learn more.
从上面的链接下载示例项目，并试用它以了解更多信息。
Reference: Primefaces Official Website
参考： Primefaces官方网站
翻译自: https://www.journaldev.com/2990/jsf-primefaces-tutorial
扫一扫
2142
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
