[Java EE 7] JSF Facelets 快速入门
程序员文章站
2022-04-28 14:08:45
...
Facelets 是 JSF 的视图描述语言，用于取代 JSP，现在在 JSF 中支持 JSP 视图仅仅是为了向后兼容。在 JSF 2 中引入的新特性，例如 composit 组件和 Ajax，都只能使用 facelets。
Fecelets 的主要特性还包括强大的模板系统、可重用和易于开发、更好的错误报告（包括行标）、和设计师友好的架构。
Facelets 页面使用 XHTML 1.0 和层叠样式表（CSS）。XHTML 1.0 可以表示为遵守 XML 1.0 规则的 HTML 4 文档。Facelets 页面必须遵守 XHTML-1.0-Transitional DTD。
可以定义使用 XHTML 定义一个简单的 facelets 页面：
在上面的代码中，整个文档由 DTD 声明开始。接着，在 html 根节点中定义了默认命名空间为 http://www.w3.org/1999/xhtml，还定义了标签库命名空间 http://xmlns.jcp.org/jsf/html（以 h: 为前缀）。
下表展示了 facelets 支持的标准标签库：
按照惯例，使用 XHTML 创建的 web 页面后缀名为 .xhtml。
Facelets 提供了表达式语言（EL）集成，下面的例子演示了如何在后台 bean 和页面 UI 之间进行双向数据绑定：
在这段代码中 #{name} 就是一个 EL，用于指向 request 范围的 CDI Bean：
记住，在 CDI Bean 中一定要添加 @Named 注释，这样才能将值注入 EL。
从 JSF 2.2 开始 @javax.faces.bean.ManagedBean 不再赞成使用，因此强烈建议使用 @Named。
JSF 2.2 也引入了新的 CDI 范围：javax.faces.view.ViewScoped。使用此注释的 Bean 与当前视图绑定。而 javax.faces.bean.ViewScoped 将不再赞成使用，因此强烈建议使用新引入的 CDI 范围。
类似的，EJB 也可以注入到 EL 中：
这个无状态的 Session Bean 有一个业务方法，返回 customer 名字列表。使用 @Named 注释让这个 EJB 可以注入到 EL 中，因此我们在 Facelets 中可以这样使用：
在这段代码中，将 customer 名字列表显示在表格内。注意 getCustomerNames 方法是如何在 EL 中调用的。Facelets 提供了编译时的 EL 验证。
Facelets 提供了很强大的模板系统，允许你跨页面创建一致的用户体验。基本页面被称为模板，通过 Facelets 的模板标签创建，模板页面定义了页面布局以及页面占位符，占位符会被使用了这个模板的页面中的具体内容所取代。
下标列出了模板页面和普通页面使用的标签
下面是一个简单的模板文件：
在上面的代码中，使用 div 来定义了页面的布局，ui:insert 定义了将会被替换的占位符位置。
下面是普通页面文件：
可以看到，在模板文件中 ui:insert 定义的 top 和 bottom 两个占位符没有在普通文件中定义，因此会保留模板文件中的内容。使用 ui:define 定义的 content 将会替换模板文件中的 ui:insert content。另外，在普通文件中 ui:composition 标签之外的所有内容将会被忽略，因此可以不用写 body 和 html 标签，但是出于 html 编写习惯，你可以加上。
来源文章：http://www.aptusource.org/2014/04/java-ee-7-jsf-facelets/
Fecelets 的主要特性还包括强大的模板系统、可重用和易于开发、更好的错误报告（包括行标）、和设计师友好的架构。
Facelets 页面使用 XHTML 1.0 和层叠样式表（CSS）。XHTML 1.0 可以表示为遵守 XML 1.0 规则的 HTML 4 文档。Facelets 页面必须遵守 XHTML-1.0-Transitional DTD。
可以定义使用 XHTML 定义一个简单的 facelets 页面：
<?xml version='1.0' encoding='UTF-8' ?>
<!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:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<title>My Facelet Page Title</title>
</h:head>
<h:body>
Hello from Facelets
</h:body>
</html>
在上面的代码中，整个文档由 DTD 声明开始。接着，在 html 根节点中定义了默认命名空间为 http://www.w3.org/1999/xhtml，还定义了标签库命名空间 http://xmlns.jcp.org/jsf/html（以 h: 为前缀）。
下表展示了 facelets 支持的标准标签库：
| 前缀 | URI | 例子 |
| h | http://xmlns.jcp.org/jsf/html | h:head, h:inputText |
| f | http://xmlns.jcp.org/jsf/core | f:facet, f:actionListener |
| c | http://xmlns.jcp.org/jsp/jstl/core | c:forEach, c:if |
| fn | http://xmlns.jcp.org/jsp/jstl/functions | fn:toUpperCase, fn:contains |
| ui | http://xmlns.jcp.org/jsf/facelets | ui:component, ui:insert |
按照惯例，使用 XHTML 创建的 web 页面后缀名为 .xhtml。
Facelets 提供了表达式语言（EL）集成，下面的例子演示了如何在后台 bean 和页面 UI 之间进行双向数据绑定：
Hello from Facelets, my name is #{name.value}!
在这段代码中 #{name} 就是一个 EL，用于指向 request 范围的 CDI Bean：
@Named
@RequestScoped
public class Name {
private String value;
//. . .
}
记住，在 CDI Bean 中一定要添加 @Named 注释，这样才能将值注入 EL。
从 JSF 2.2 开始 @javax.faces.bean.ManagedBean 不再赞成使用，因此强烈建议使用 @Named。
JSF 2.2 也引入了新的 CDI 范围：javax.faces.view.ViewScoped。使用此注释的 Bean 与当前视图绑定。而 javax.faces.bean.ViewScoped 将不再赞成使用，因此强烈建议使用新引入的 CDI 范围。
类似的，EJB 也可以注入到 EL 中：
@Stateless
@Named
public class CustomerSessionBean {
public List<Name> getCustomerNames() {
//. . .
}
}
这个无状态的 Session Bean 有一个业务方法，返回 customer 名字列表。使用 @Named 注释让这个 EJB 可以注入到 EL 中，因此我们在 Facelets 中可以这样使用：
<h:dataTable value="#{customerSessionBean.customerNames}" var="c">
<h:column>#{c.value}</h:column>
</h:dataTable>
在这段代码中，将 customer 名字列表显示在表格内。注意 getCustomerNames 方法是如何在 EL 中调用的。Facelets 提供了编译时的 EL 验证。
Facelets 提供了很强大的模板系统，允许你跨页面创建一致的用户体验。基本页面被称为模板，通过 Facelets 的模板标签创建，模板页面定义了页面布局以及页面占位符，占位符会被使用了这个模板的页面中的具体内容所取代。
下标列出了模板页面和普通页面使用的标签
| 标记 | 描述 |
| ui:composition | 定义了页面使用的布局，有一个可选的属性 template。如果使用了 template 属性，表示这个标签下的所有元素都将使用 template 属性定义的模板布局，如果没有使用 template 属性，表示这只是一组元素，可以插入到任何地方。这个标签之外的任何内容都会被忽略。 |
| ui:insert | 用在模板文件中，定义了占位符，会被普通页面中的内容替换。跟它相对应的标签是普通页面中的 ui:define 标签，占位符会被普通页面中 ui:define 中的内容替换。 |
| ui:define | 用在普通页面中，用于定义替换模板文件中占位符的内容。 |
| ui:component | 在 JSF 树中插入新的 UI 组件，在这个标签之外的所有内容将会被忽略。 |
| ui:fragment | 类似于 ui:component 标签，但不会忽略标签之外的内容。 |
| ui:include | 使用 src 属性包含另外的文档到当前文档中。 |
下面是一个简单的模板文件：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:body>
<div id="top">
<ui:insert name="top">
<h1>Facelets are Cool!</h1>
</ui:insert>
</div>
<div id="content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">
<center>Powered by GlassFish</center>
</ui:insert>
</div>
</h:body>
</html>
在上面的代码中，使用 div 来定义了页面的布局，ui:insert 定义了将会被替换的占位符位置。
下面是普通页面文件：
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<body>
<ui:composition template="./template.xhtml">
<ui:define name="content">
<h:dataTable
value="#{customerSessionBean.customerNames}"
var="c">
<h:column>#{c.value}</h:column>
</h:dataTable>
</ui:define>
</ui:composition>
</body>
</html>
可以看到，在模板文件中 ui:insert 定义的 top 和 bottom 两个占位符没有在普通文件中定义，因此会保留模板文件中的内容。使用 ui:define 定义的 content 将会替换模板文件中的 ui:insert content。另外，在普通文件中 ui:composition 标签之外的所有内容将会被忽略，因此可以不用写 body 和 html 标签，但是出于 html 编写习惯，你可以加上。
来源文章：http://www.aptusource.org/2014/04/java-ee-7-jsf-facelets/
上一篇： E-Text Editor开源啦！
下一篇： 机器学习之逻辑回归python实现