当前位置：theitroad>JSF PrimeFaces教程

JSF PrimeFaces教程

时间：2020-02-23 14:33:44 　来源:igfitidea点击:

欢迎使用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，该版本将考虑本教程和后续教程的主题，从而使之破灭。

为了能够使用撇号5，必须将其安装并配置到项目中。
您将要使用简单的文本编辑器或者企业开发环境，在本教程结束时，您都将准备好发现所有Primefaces组件。

JSF 2的新增功能

众所周知，JavaServer Faces是用于开发丰富的用户界面网页的框架。
JSF已在多个Java Community Request JSR中引入，JSF 2的最终版本于2009年7月发布，该版本包含一组增强功能和新功能。
JSF 2产生了一系列后果，最后一个是2013年5月发布的JSF 2.2。

与JSF 1.x不同，JSF 2.x具有许多功能，例如使用注释来声明JSF托管bean，转换器，验证器，范围等。
这还不是全部，JSF 2提供了新的范围，例如查看范围，自定义范围，流程范围和会话范围等等。

另外，我们不能忘记为JSF 2添加的最神奇的功能，它是Ajax概念。
在JSF 2中，Ajax固有地内置到JSF框架中。
因此，任何JSF组件都可以通过简单地添加Ajax东西来进行Ajax。
导航规则也已更改，并且也更加容易。

接下来的教程将详细介绍为JSF 2添加的那些功能，而在本教程中，您将创建一个简单的JSF应用程序，以及一个基本示例，说明我们如何使用Primefaces标签实现某些业务场景。

用于完成教程的二手工具

为了开始发现本教程，您必须使用以下开发工具。

  • 雄cat 7
  • Eclipse IDE
  • Maven 3
  • JSF 2/Primefaces 5

显然，我们已经使用Tomcat 7来部署应用程序，并使用Eclipse IDE来开发所需的组件，其中Maven用作构建工具并管理依赖项。
因此，请确保您知道如何将所有这些软件安装和配置到开发计算机中。
我们的最终项目将如下图所示。

创建Eclipse项目

Eclipse IDE支持在Dynamic Project框架下开发Web项目。
要创建动态项目，只需执行以下步骤：

  • 打开Eclipse IDE
  • 右键单击项目资源管理器空间，然后选择"新建–动态Web项目"
  • 通过设置项目名称，目标运行时，源文件夹，上下文根目录，内容目录和web.xml，完成项目创建过程

JSF安装与配置

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

  • 打开创建的项目的属性窗口
  • 在Project Facets窗格中，只需选中JavaServer Faces并按照完成配置所需的其他配置进行操作
  • 单击"需要进一步配置"后，必须显示" JSF功能"窗口
  • 通过单击下载库<添加jsf实现库，然后从打开的窗口JSF 2.2(Mojarra 2.2.0)中进行选择

安装JSF库后，" JSF功能"窗口看起来像这样：在此阶段结束时，您将拥有一个具有jsf功能的Web应用程序。

Primefaces 5安装

目前，您的应用程序已准备就绪，可以使用JavaServer Faces用户界面，但不能使用Primefaces。
为了能够使用素字，您必须遵循以下步骤：

  • 从primefaces官方站点或者Maven Central下载所需的primefaces库。

  • 将下载的Primefaces JAR包含在WEB-INF文件夹下面的lib文件夹中

开发Primefaces应用程序

现在，您的项目已准备就绪，可以开发JSF/Primefaces应用程序了。
我们将创建一个简单的应用程序，其中Primefaces DataTable已消耗了支持bean的员工列表。
员工列表将通过@PostConstruct特殊方法填充。
请按照以下步骤开发完整的JSF/Primefaces应用程序。

  • 创建一个名为ViewEmployeesManagedBean的托管bean
  • 创建一个名为Employee的Pojo，其中包含EmployeeName和EmployeeId
  • 创建一个Primefaces视图以使用定义的托管bean中的employees列表
package com.theitroad.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.theitroad.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.theitroad.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="theitroad - 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>theitroad-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，i18n全局消息，定制视图处理程序和定制工厂类。
由于我们使用的是注释，并且它是一个简单的项目，因此此处没有进行任何配置，但是我们会在以后的帖子中看到它的用法。

现在，当您运行它时，您将获得输出，如下图所示。

转换成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>theitroad-PrimefacesWebApplication</groupId>
	<artifactId>theitroad-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软件包，您将准备好将WAR文件部署到任何Java EE容器中。
只需部署并检查。

相关推荐

Web浏览器作为Hive客户端

Web浏览器作为Hive客户端

从RDBMS模型转换为HBase

从RDBMS模型转换为HBase

在Hiveql中的窗口

在Hiveql中的窗口

第一个Hadoop计划：Hello Hadoop！

第一个Hadoop计划：Hello Hadoop！