JSF PrimeFaces 教程

1 年 ago
清, 扬
7 minutes

欢迎来到JSF Primefaces教程。JavaServer Faces是当今用于实现Java Web应用程序用户界面的主要框架之一。JSF采用组件化的Web应用程序方式，特别是与界面相关的部分。JSF中的每个单一视图都是使用服务器端组件树构建的，当它渲染到浏览器时，它会被解码为HTML。

JSF Primefaces 教程

在JSF中，渲染视图的过程经历了被称为JSF生命周期的步骤。本教程并不旨在详细讨论生命周期的工作原理或如何处理。它只是提醒您应该了解JSF框架以及如何准备JSF视图进行渲染的相关内容。到目前为止，JSF有两个主要的实现：Oracle实现Mojarra和Apache MyFaces实现。几个JSF库相继问世，如Richfaces、IceFaces、Primefaces、MyFaces等，其中使用广泛且享有极好声誉的是Primefaces。几个月前，Primefaces发布了Primefaces 5，它将成为本教程和后续教程的主题。要使用Primefaces 5，您必须将其安装并配置到您的项目中。无论您是使用简单的文本编辑器还是企业开发环境，通过本教程的结束，您将准备好探索所有Primefaces组件。

JSF 2有哪些新变化

众所周知，JavaServer Faces（简称JSF）是一个用于开发丰富用户界面的Web页面的框架。JSF已经在一些Java社区请求（JSR）中引入过，其中JSF 2的最终版本于2009年7月发布，该版本含有一系列增强和新功能。JSF 2之后还发布了许多版本，最终版本为JSF 2.2于2013年5月发布。与JSF 1.x不同，JSF 2.x引入了许多新特性，例如可以使用注解声明JSF managed beans、转换器、验证器、作用域等等。除此之外，JSF 2还引入了新的作用域，如View Scope、Custom Scope、Flow Scope和Conversation Scope等等。我们也不能忘记JSF 2新增的一个最令人惊叹的功能，即Ajax概念。在JSF 2中，Ajax已经内置在JSF框架中，因此任何JSF组件都可以通过简单添加Ajax相关内容来实现Ajax化。导航规则也得到了改变，并且变得更加简化。下一篇教程将更详细地介绍为JSF 2添加的这些特性，而在本教程中，您将创建一个简单的JSF应用程序，并使用Primefaces标签实现特定业务场景的基本示例。

完成教程所使用的工具

要开始学习本教程，您需要使用以下开发工具。

    1. Tomcat 7

 

    1. Eclipse IDE

 

    1. Maven 3

 

    1. JSF 2 / Primefaces 5

Tomcat 7
Eclipse 集成开发环境
Maven 3
JSF 2 / Primefaces 5

很明显，我们使用了Tomcat 7来部署应用程序，并使用Eclipse IDE来开发所需的组件，而Maven用作构建工具和管理依赖项。因此，请确保您知道如何将这些软件安装和配置到您的开发机器上。我们的最终项目将呈现如下图所示。

创建Eclipse项目

Eclipse IDE支持在动态项目集群下开发网页项目。要创建一个动态项目，只需按照以下步骤进行操作：

  • Open Eclipse IDE
  • Right-Click on the project explorer space and select New – Dynamic Web Project
  • Complete the project creation process by setting up the project name, target runtime, source folder, context root, content directory and web.xml

JSF 安装和配置

正如我们之前所提到的，我们的目标是使用JSF/Primefaces来开发使用Primefaces用户界面组件的Web应用程序。但是目前，我们所拥有的只是一个简单的动态应用程序，需要更多的步骤来进行jsf配置。要将jsf添加到您的项目中，需要添加jsf facet，并注意添加jsf实现有助于构建使用Mojarra的jsf应用程序。要添加这个facet，您需要按照以下步骤进行操作：

    1. 打开已创建项目的属性窗口

 

    1. 从项目组件窗格中，只需勾选JavaServer Faces并进行进一步的配置以完成配置程序

 

    1. 点击进一步配置所需后，应该显示JSF能力窗口

 

    通过点击“下载库”并在打开的窗口中选择JSF 2.2（Mojarra 2.2.0）来添加JSF实现库。

在安装JSF库之后，JSF功能窗口看起来像。到了这个阶段结束时，你将拥有一个具备JSF功能的Web应用程序。

Primefaces 5 安装

目前，您的应用程序已经准备好使用JavaServer Faces用户界面，但不能使用Primefaces。要能够使用Primefaces，您需要按照以下步骤操作：

    1. 从Primefaces官方网站或Maven中央下载所需的Primefaces库。

 

    将下载的Primefaces JAR文件包含到位于WEB-INF文件夹下的lib文件夹中。

开发Primefaces应用

现在，你的项目已准备好开发一个JSF/Primefaces应用程序，正如你所看到的。我们将创建一个简单的应用程序，其中一个Primefaces DataTable会消耗来自后端bean的员工列表。员工列表将由一个@PostConstruct特殊方法填充。按照以下步骤开发完整的JSF/Primefaces应用程序。

    1. 创建一个名为ViewEmployeesManagedBean的托管Bean。

 

    1. 创建一个包含EmployeeName和EmployeeId的普通Java对象（POJO）。

 

    创建一个Primefaces视图，以便消费在定义的托管bean中的员工列表。
package com.Olivia.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.Olivia.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.Olivia.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;
	}
}

注意使用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>

请注意使用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>

请注意，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>

这是我们提供JSF组件配置的地方，例如受控bean、国际化全局消息、自定义视图处理器和自定义工厂类。由于我们使用注解且这是一个简单的项目，因此在这里没有进行配置，但是我们将在以后的文章中看到它的用法。现在当你运行这个项目时，你将获得如下图所示的输出。

将其转换为Maven

Maven是管理Java项目构建和依赖项的首选方式，所以在这里我们将看到如何将其转换成Maven。Eclipse IDE提供了将动态Web项目转换成Maven的选项。Maven将帮助您控制和管理所需的依赖项。只需右键单击创建的项目，从配置菜单中选择转换为Maven项目。一旦您将项目转换为Maven，您必须添加所需的依赖项，以使项目能够被Maven自身编译。一旦您将应用程序转换为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>

通过对该项目执行mvn clean package命令，您将获得一个可以部署到任何Java EE容器的WAR文件。只需部署并进行检查即可。

Chinese paraphrase: 综述

本教程介绍了如何使用JSF 2 / Primefaces实现Web应用程序用户界面。为了实现这一目标，我们使用Eclipse IDE创建了一个动态项目，并添加了所有所需的库，无论是JSF 2实现所必需的库，还是使用Primefaces组件所需的库。从下一个教程开始，我们将使用Maven来创建我们的示例项目。

下载PrimeFaces的Hello World项目

从上面的链接下载示例项目，并通过与之互动来学习更多。参考：Primefaces官方网站。

发表回复 0

Your email address will not be published. Required fields are marked *

✖
广告
将在 10 秒后关闭
bannerAds