JSF Facelet标签示例教程
JSF提供了一组特殊的标记，这些标记提供了灵活性，可以在一个地方管理多个应用程序中的通用标记/部件。
这些标签使我们能够创建可在应用程序之间使用的通用布局。
要在JSF页面中使用Facelet标记，请包含以下名称空间。
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" >
Facelet标签提供了以下标签。
<ui：component>标签
<ui：component>标记创建一个新组件，并在ui：include标记或者facelet标记的源中指定文件名。
facelet标签视图处理程序将忽略此标签之外使用的任何文本。
该标签支持的组件属性是；
绑定：按指定将组件绑定到支持bean属性
class：表示CSS类名称
id：组件的唯一标识符
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
考虑下面通过创建JSF页面carcomponent.xhtml来使用ui：component标签的示例。
carcomponent.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>UI Component tag</title>
</h:head>
<h:body>
<ui:component>
Hello!!!
</ui:component>
Hi You there?
</h:body>
</html>
ui：component标记内的文本将显示在输出中，并且该标记外的文本将被忽略，如下图所示。
<ui：composition>标记
<ui：composition>标记提供了一个模板，该模板封装了要包含在另一个facelet中的内容。
该标签支持的属性是；
class：CSS组件的类名
id：组件的唯一标识符
父级：表示子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
模板：插入组成部分中定义的页面(例如布局)。
ui：composition标签与ui：insert标签示例中显示的ui：insert标签结合使用。
<ui：decorate>标签
该标签装饰当前的JSF页面，包括另一个facelet的内容。
装饰包括布局，页眉，页脚等。
标签属性是；
class：组件CSS类名
id：组件的唯一标识符
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
考虑一个装饰标签的示例，该示例通过创建一个名为decorate.xhtml的JSF页面将数据包装在边框和颜色中。
decorate.xhtml
<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"> <h:head> <title>Decorate tag example</title> </h:head> <h:form> <h:panelGrid columns="3" border="2" bgcolor="cyan" cellpadding="2" cellspacing="2"> <f:facet name="caption"> <ui:insert name="caption" </f:facet> <ui:insert name="text" <ui:insert </h:panelGrid> </h:form> </html>
其中我们指定要插入的样式边框，颜色，单元格填充，单元格间距，标题标签和文本标签。
创建cardecorate.xhtml为;
cardecorate.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html"> <h:head> <title>Decorate</title> </h:head> <h:body> <ui:decorate template="decorate.xhtml"> <ui:define name="caption"> <h:outputText value="Car Names List" </ui:define> <h:outputText value="Zen" <h:outputText value="Innova" <h:outputText value="Alto" <h:outputText value="Qualis" <h:outputText value="Polo" <h:outputText value="Santro" </ui:decorate> </h:body> </html>
其中我们指定要为caption和text标签显示的值，并指定提及decorate.xhtml文件的装饰模板。
下图显示了产生的输出。
<ui：define>标记
该标记定义模板将要插入页面的内容。
name属性值必须与要包含的目标模板的<ui：insert>标记匹配。
标签属性是；
名称：为定义标签中的内容分配名称。
class：组件CSS类名称。
id：组件的唯一标识符
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
define标签可以用作
<ui:define name="title">Car World</ui:define> <ui:define name="header">List Of Cars</ui:define> <ui:define name="message">Alto,Zen,Innova</ui:define>
define标签和insert标签结合使用以打印insert标签中的值。
我们将在文章的后面部分中查看示例。
<ui：fragment>标记
<ui：fragment>标记将新的UI组件实例包含到JSF Component树中。
JSF不会丢弃此标记之外的内容。
标签属性是；
绑定：按指定将组件绑定到支持bean属性
class：表示CSS类名称
id：组件的唯一标识符
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
通过创建一个JSF页面fragment.xhtml来考虑该标签的示例：
fragment.xhtml
<!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:h="https://java.sun.com/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head <body> <h:form> <ui:fragment> <div>Welcome to the Car World</div> </ui:fragment> How can i help you? </h:form> </body> </html>
此处，标记外部的内容也与<ui：fragment>标记中的内容一起显示在输出中。
<ui：include>标签
此标记将src属性中的组件作为当前JSF页面的一部分。
src属性中的文件名是相对于最后一个请求而呈现的XHTML文件的。
属性是；
src：要在jsf页面中包含其内容的文件。
class：表示CSS类名称
id：组件的唯一标识符
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
考虑一个示例，在该示例中，我们希望包含另一个页面中当前JSF页面的标题。
include.xhtml
<!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:f="https://java.sun.com/jsf/core"
xmlns:h="https://java.sun.com/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<h:head
<body>
<f:view>
<h:form>
<ui:include src="head.xhtml"></ui:include>
Alto
<br>
Santro
<br>
Zen
<br>
VolksWagen
</h:form>
</f:view>
</body>
</html>
其中我们包含一个文件" head.xhtml"，以显示带有<ui：include>标签的" src"属性的标题信息。
创建为head.xhtml文件；
head.xhtml
<?xml version='1.0' encoding='UTF-8' ?> <!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:h="https://xmlns.jcp.org/jsf/html"> <h:head> <title>Facelet Title</title> </h:head> <h:body> <h1>List Of Cars Available</h1> </h:body> </html>
其中我们包括一个带有文本的标头标签<h1>。
以下是由此产生的输出。
<ui：insert>标记
该标签将内容插入模板。
标签属性是；
class：表示CSS类名称
id：组件的唯一标识符
名称：与模板中的关联标签匹配的可选属性。
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
创建一个JSF视图页面insert.xhtml为
insert.xhtml
<!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:h="https://java.sun.com/jsf/html" xmlns:ui="https://java.sun.com/jsf/facelets"> <h:head> <title><ui:insert name="title" </title> </h:head> <body> <h2> <ui:insert name="header" </h2> <ui:insert name="message" </body> </html>
其中我们通过在另一个jsp页面message.html中定义它们的值来包括标题，标题和消息。
创建message.xhtml为;
message.xhtml
<!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"> <h:head <body> <ui:composition template="insert.xhtml"> <ui:define name="title">Car World</ui:define> <ui:define name="header">List Of Cars</ui:define> <ui:define name="message">Alto,Zen,Innova</ui:define> </ui:composition> </body> </html>
其中我们定义标题，标题和消息的值，并包括上面创建的insert.xhtml。
<ui：param>标记
此标记用于将参数传递到包含的文件或者模板。
属性是；
name：参数名称。
值：参数的值。
class：表示CSS类名称。
id：组件的唯一标识符。
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
考虑一个示例，我们想借助param标签在输出中打印文本。
创建一个beanWelcome.java；
package com.theitroad.jsf.beans;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Welcome {
private String w1 = "Welcome!!!";
public String getW1() {
return w1;
}
public void setW1(String w1) {
this.w1 = w1;
}
}
其中我们将值初始化为变量w1，并包括getter setter方法来获取值。
创建welcome.xhtml为;
welcome.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:param name="w1" value="#{welcome.w1}"
<h3>#{w1}</h3>
</h:body>
</html>
其中我们使用ui param标签，并使用w1变量，并将值从Welcome bean类中获取到w1变量中，并使用此变量来打印值。
<ui：remove>标签
此标签从页面上删除内容。
此标签与facelets结合使用以进行其他标记。
属性是；
class：表示CSS类名称。
id：组件的唯一标识符。
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
考虑一个示例，我们想要从JSF页面中删除部分文本。
创建carremove.xhtml页面为;
carremove.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
Alto Car has power windows
<br>
<ui:remove>
Alto is a good Car
</ui:remove>
<br>
Alto Car gives a good mileage
</h:form>
</h:body>
</html>
其中我们在<ui：remove>标记中附上消息" Alto是一辆好车"。
因此，该语句将被排除在输出中。
<ui：repeat>标签
<ui：repeat>标记遍历暴露给页面的对象的集合。
属性是；
值：标签迭代的集合的名称。
var：当前迭代项的导出值的名称。
class：表示CSS类名称。
id：组件的唯一标识符。
offset：从开始进行迭代的集合开始的偏移量的write属性。
父级：代表子级或者构面的父级组件。
渲染：标志，指示是否应渲染组件。
renderingType：如果设置了此属性，则在请求处理生命周期内的操作将委派给该类型的实例。
如果未设置，则直接实现这些方法。
size：要迭代的集合的大小
步骤：从第一个步骤开始，迭代将处理项目列表中的每个步骤。
瞬态：布尔标志设置为true表示此组件不得包含在组件树的状态中。
varStatus：用于迭代状态的导出变量的名称。
考虑ui：repeat标签的示例；
这里有汽车名称的列表，我们必须在jsf页面中获取所有名称
创建一个名为Car.java的bean作为；
package com.theitroad.jsf.beans;
import java.util.ArrayList;
import java.util.List;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class Car {
private String carname;
private List<Car> cars;
public Car(String carname) {
this.carname = carname;
}
public String getCarname() {
return carname;
}
public void setCarname(String carname) {
this.carname = carname;
}
public Car() {
}
public List<Car> getCars() {
if (cars == null) {
cars = new ArrayList<Car>();
cars.add(new Car("Innova"));
cars.add(new Car("Qualis"));
cars.add(new Car("Scorpio"));
cars.add(new Car("Xylo"));
}
return cars;
}
}
其中我们声明列表，并使用列表的add方法将汽车名称插入列表中。
将car.xhtml页面创建为
car.xhtml
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="https://xmlns.jcp.org/jsf/html"
xmlns:ui="https://java.sun.com/jsf/facelets">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<h:form>
<ol>
<ui:repeat value="#{car.cars}" var="car">
<li><h:outputText value="#{car.carname}" </li>
</ui:repeat>
</ol>
</h:form>
</h:body>
</html>
我们使用ui：repeat标记迭代汽车列表，并从Car.java bean中获取值。
