面向初学者的JSF 2.0教程

最新推荐文章于 2021-09-28 20:08:57 发布

dnc8371

最新推荐文章于 2021-09-28 20:08:57 发布

阅读量316

点赞数

文章标签： python spring java linux vue ViewUI

1.什么是JSF？

JSF是Java Server Faces的首字母缩写。它是一种服务器端处理技术，它允许将服务器端代码嵌入到网页中。由于可以将服务器端处理和呈现代码嵌入网页本身，因此使项目的整体编码更加简单。减少总体数量以及文件大小。 JSF包含2个主要组件：

Java Facets ：服务器端文件，用作控制器，将客户端请求重定向到正确的JSF网页。
JSF标签：除了允许将服务器端脚本编写到网页中之外，JSF还提供了自定义标签来轻松执行某些操作，例如迭代或条件检查。

这些组件共同构成了MVC的视图和控制器。

2. JSF 2.0 –有何不同？

JSF 2.0和更高版本是其较早版本JSF 1.x的主要升级。随着JSF 2.0版本的发布，基于JSF的项目的编码风格发生了变化。使用JSF 2.0，无需在单独的配置文件（如旧版本）中声明不同的项目。 JSF 2.0允许在faces-config.xml文件中声明几乎所有内容。此外，JSF 2.0已添加了使用注释定义导航，托管或CDI Bean的功能。当然，这可以减少设置项目结构所需的配置量。

以下各节将通过一个简单的Hello World示例提供有关JSF代码如何工作的基本理解，并在以后转向JSF 2.0功能和标签。

3.设置基于JSF 2.0的动态Web项目

3.1先决条件

以下示例是使用以下工具集创建的：

Maven v4.0
Eclipse Java EE IDE
Apache Tomcat 9.0
JDK v7或更高版本
JSF 2.0

为了设置项目以执行与JSF 2.0相关的任务，请按照以下所示的步骤从创建Maven WebApp项目开始。

在Eclipse中，导航到File-> New-> Maven Project
选择工作空间或选择使用默认工作空间，然后单击下一步

具有默认工作区的新Maven项目
在“原型”选择中，选择“ maven-archetype-webapp”
提供您选择的组ID和工件ID，然后继续

这些步骤将创建一个带有默认index.jsp文件的简单Web项目。创建项目后，将Apache Tomcat服务器绑定到该项目。完成此配置后，通过右键单击文件index.jsp并导航至Run as- > Run on Server来测试项目的运行。选择Apache Tomcat服务器，然后单击完成。

如果一切都配置正确，将显示类似于以下所示的网页。

索引页

下一步是将JSF 2.0的Maven依赖项添加到项目中。在pom.xml中添加以下依赖项以启用对JSF 2.0功能的支持。

pom.xml

<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.1.7</version>
		</dependency>
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.1.7</version>
		</dependency>
		<!-- Required for JSTL tags to be used in JSF -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.2</version>
		</dependency>

一旦将依赖项添加到pom.xml中，请保存项目并留出一些时间来下载依赖项。

4.从托管豆开始

JSF 2.0的主要优点之一是它允许使用批注来定义Managed Bean。在本节中，我们将介绍如何创建和使用简单的托管Bean，以及稍后使用JSTL标签进行稍微复杂的操作。

4.1使用基本EL创建一个简单的xHTML页面

EL是表达语言的缩写。使用JSF 2.0，可以直接访问Bean中可用的变量或使用EL编写简单的表达式。下面的页面包含一个简单的EL #{'Coding'} ，它产生一个简单的字符串值Coding 。

SayHello.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
      
<head>
        <title>JSF 2.0 Say Hello</title>
</head>
    <body>
    	<p>Hey There! My hobby is #{'Coding'}</p>
    </body>
</html>

在WEB-INF文件夹中创建上述文件之前，需要完成某些配置。

通过右键单击项目并导航到“ 属性”->“项目构面” ，然后选中“ JavaServer Faces ”复选框，为Java Server Faces配置项目。
确定JSF模块是2.0，而不是1.2。如果将其设置为2.0时遇到问题，请从项目中的.settings文件夹中打开文件org.eclipse.wst.common.project.facet.core .xml并添加该行
```
<installed facet="jst.jsf" version="2.0"/>
```
将Web模块版本设置为3.0，以使JSF 2.0顺利运行。可以通过将facet="jst.web"版本修改为3.0来完成。
更改完成后刷新项目。
右键单击该项目，然后导航到Maven-> Update Maven Project。

现在，该项目可以运行了。项目结构应如下图所示：

Maven Web App项目结构

现在，只需右键单击文件SayHello.xhtml并导航至“运行方式->在服务器上运行”，选择Apache Tomcat服务器，然后单击“完成”以运行第一个xHTML页面。

请注意，这里有2个不同的JSF标签库导入到页面中以支持JSF标签。这些标记使您可以在HTML页面中编写逻辑代码块，并可以用预先设置样式的JSF标记替换标准HTML标记。执行页面时，页面显示以下输出。

SayHello.xhtml的输出

4.2创建第一个托管Bean

下一步，让我们将用户的爱好作为托管Bean中的变量，并尝试使用托管Bean进行填充。使用下面的代码创建一个托管bean。

HobbiesBean.java

package jsftutorial;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class HobbiesBean {
	private String hobby = "Java Coding";

	public String getHobby() {
		return hobby;
	}

	public void setHobby(String hobby) {
		this.hobby = hobby;
	}
	
}

请注意，这里使用了两个注释。

ManagedBean ：此批注用于通过此简单批注定义托管bean。托管bean与页面紧密绑定，可用于从页面获取输入值，或仅将变量值放在输出文本中。
SessionScoped ：此批注用于声明bean的范围。 bean的作用域决定是否每次都将创建bean的新实例。

让我们尝试在之前创建的xhtml页面上显示变量hobby的值。为此，请修改SayHello.xhtml文件，如下所示：

SayHello.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
      
<head>
        <title>JSF 2.0 Say Hello</title>
</head>
    <body>
    	<p>Hey There! My hobby is #{hobbiesBean.hobby}</p>
    </body>
</html>

实施上述代码后，请重新启动服务器并检查页面。除爱好文本外，输出保持类似。输出现在是Hey There！ 我的爱好是Java编码 。这里有两点很重要。

上面文件中使用的名为bean的是hobbiesBean 。如果仔细注意，则Bean名称类似于类名称，除了第一个字符小写。 JSF 2.0标准通过将第一个字符转换为小写并保留其余的类名称来自动定义Bean名称。
变量hobby是一个私有变量，在Bean中具有getter和setter方法。服务器使用getter获取变量的值。因此，如果需要，开发人员可以自由地操纵吸气剂中的输出。

4.3使用自定义别名命名bean

上面的示例根据JSF标准使用bean的默认名称。但是，有时开发人员可能希望使用自定义bean名称来更好地理解。例如，对于Employee类，开发人员可能更喜欢bean名称为user 。对于此类情况，注释@ManagedBean具有属性名称

此属性允许开发人员使用以下语法来提供自定义名称。放置注释的代码行中的以下修改将把HobbiesBean重命名为myHobbies 。

@ManagedBean(name="myHobbies")

在Bean文件中完成此更改后，如下所示修改SayHello.xhtml文件。

SayHello.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
      
<head>
        <title>JSF 2.0 Say Hello</title>
</head>
    <body>
    	<p>Hey There! My hobby is #{myHobbies.hobby}</p>
    </body>
</html>

尽管Bean的名称发生了变化，但执行此代码后的输出仍保持不变。

4.4在托管Bean中注入Bean依赖项

依赖注入是在面向对象的环境中进行管理的重要方面。让我们考虑下面的User类：

User.java

package jsftutorial;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class User {
	private HobbiesBean hobby;
	private String name="Java Coder";
	public HobbiesBean getHobby() {
		return hobby;
	}

	public void setHobby(HobbiesBean hobby) {
		this.hobby = hobby;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}	
}

在这里，我们需要将HobbiesBean类的对象注入到User类中。为了将其作为托管bean依赖项注入，JSF 2.0支持注释@ManagedProperty(value="#{myHobbies}") 。值属性应根据相应类的bean名称进行分配。提取用户对象时，此批注将自动注入依赖的bean。可以通过如下创建新文件来验证。

injectiontest.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
      
<head>
        <title>JSF 2.0 Say Hello</title>
</head>
    <body>
    	<p>Hey There! I am #{user.name}. My hobby is #{user.hobby.hobby}</p>
    </body>
</html>

现在输出显示Hey There! I am Java Coder. My hobby is Coding Hey There! I am Java Coder. My hobby is Coding Hey There! I am Java Coder. My hobby is Coding 。以这种方式，可以轻松注入任何数量的bean，而不必初始化bean。

4.5 JSF 2.0标记

JSF 2.0标准定义了许多标签，用于以简单的方式执行高级操作。在上面创建的xhtml文件中可以注意到，已经导入了两个XML名称空间。

xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"

前缀为h的名称空间可替换常规html标签。下面提供了与实际HTML标签相关的最常用标签的列表。

HTML标签	JSF h标签
`<label>`	`<h:outputText>`
`<input type="text">`	`<h:inputText>`
`<input type="hidden">`	`<h:inputHidden>`
`<input type="password">`	`<h:inputSecret>`
`<input type="checkbox">`	`<h:selectBooleanCheckbox>`
`<input type="radio">`	`<h:selectOneRadio>`
`<textarea>`	`<h:inputTextArea>`
`<select>`	`<h:selectOneListbox>`
`<select multiple>`	`<h:selectManyListbox>`
`<img>`	`<h:graphicImage>`

除了这些，还可以在此处找到其他众多h标签的详细信息。

前缀f的名称空间在这里很重要。这些标签提供了某些特殊功能，例如验证组件，声明上述h标签的项目以及遍历列表，数组或映射之类的对象并创建数据表。一些基本的f标签将在下面与实现进行讨论。

actionlistener.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
<body>			
<h:form>
<h:commandButton action="result" value="Submit">
    <f:setPropertyActionListener target="#{user.name}" value="Java Code Geeks" />
</h:commandButton>
</h:form>
</body>
</html>

使用标签f:setPropertyActionListener ，可以在提交表单时设置特定属性的值。上面的代码设置了单击命令按钮时user Bean的属性name的值。该值将在操作页面result.xhtml上可用。输出如下所示。

f：setPropertyActionListener的输出

考虑如下所示的Bill类。

比尔

package jsftutorial;

import java.util.Date;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean
@SessionScoped
public class Bill {
	private double amount = 34.8; 
	private Date billDate = new Date();
	public double getAmount() {
		return amount;
	}
	public void setAmount(double amount) {
		this.amount = amount;
	}
	public Date getBillDate() {
		return billDate;
	}
	public void setBillDate(Date billDate) {
		this.billDate = billDate;
	}
}

讨论的下一个标签允许控制十进制输入中的小数位数。创建xhtml文件，如下所示。

convert.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
<body>			

<h:outputText value="#{bill.amount}" >
	<f:convertNumber minFractionDigits="2" />
</h:outputText>

</body>
</html>

这是一个非常有用的标记，当您希望将数字截断到某些小数位或将数字强制具有一定的小数位数时，此标记非常有用。该标签的使用非常简单。
minFractionDigits强制要求最小十进制精度。例如，如果输入的输入是34.8 （与Bill类相同），则标记将自动将值转换为34.80 ，如下图所示。

将数字转换为至少2个小数

同样，也可以以模式形式指定小数。例如：

convert.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
<body>			

<h:outputText value="#{bill.amount}" >
	<f:convertNumber pattern="#00.00" />
</h:outputText>

</body>
</html>

此模式将允许最多2位数字和2位小数。这样就无需在键盘输入或焦点对准时添加自定义脚本。输出仍然类似于上面显示的输出。

convert.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
<body>			

<h:outputText value="#{bill.amount}" >
	<f:convertNumber pattern="#00.00" />
</h:outputText><br>
<h:outputText value="#{bill.billDate}" >
	<f:convertDateTime pattern="d-M-yyyy"/>
</h:outputText>

</body>
</html>

当我们需要以特定格式显示日期和时间时，此属性非常有用。标记可以动态接受模式，并以给定模式显示提供的java.util.Date变量。 bill.billDate是此处的java.util.Date 。 f标记将日期转换为java.text.SimpleDateFormat类指定的dM-yyyy格式。输出将如下所示。

将f：convertDateTime转换为dM-yyyy格式

有关更多标签，您可以在此处进行探索。

5.结论

本文概括了JSF 2.0大部分必要功能的要点。它从设置过程开始，然后继续为托管bean使用注释的主要功能。所有主要功能（如注释， h标签和f标签）均已包含必要的详细信息。总是有更多参考。其他有用的链接可以在下面的参考资料中找到。

6.参考

7.下载Eclipse项目

这是讨论使用JSF 2.0的示例。

下载
您可以在此处下载此示例的完整源代码： jsftutorial-1.zip

翻译自: https://www.javacodegeeks.com/2018/03/jsf-2-0-tutorial-for-beginners.html

dnc8371

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向初学者的JSF 2.0教程

1.什么是JSF？ JSF是Java Server Faces的首字母缩写。它是一种服务器端处理技术，它允许将服务器端代码嵌入到网页中。由于可以将服务器端处理和呈现代码嵌入网页本身，因此使项目的整体编码更加简单。减少总体数量以及文件大小。 JSF包含2个主要组件： Java Facets ：服务器端文件，用作控制器，将客户端请求重定向到正确的JSF网页。 JSF标签：除了允许...
复制链接

扫一扫