使用Facelets创建JSF组合控件
项目过程经常需要自定义组件，以提高代码复用和减少代码量等，使用JSF创建自定义组件需要做大量的工作，还需要手动编写烦人的html编码和解码等工作。而将Facelets和JSF结合使用，创建自定义组件则方便很多。当然Facelets的好处还不仅如此。下面的内容翻译自《Facelets Essentials: Guide to JavaServer™ Faces View Definition Framework 》,仅供学习交流使用，详细内容请看原著.
例子一：
创建一个h:outputLabel
和 h:inputText
组合的组件，命名为inputTextLabeled,
在JSF
页面中用下面的方式使用这个组件,
将在JSF
组件树中增加一个UIComponent
实例:
<custom:inputTextLabeled
label="Name" value="#{bird.name}" />
1.
创建一个标签源文件
创建一个名为InputTextLabeled.xhtml
的标签源文件,
放在
/WEB-INF/facelets/components
目录下:
$PROJECT
+- /WEB-INF
+- /web.xml
+-
/faces-config
+- /facelets
+-
/mycustom.taglib.xml
+-
/components
+-
/InputTextLabeled.xhtml
+-
[other tag files]
+- /[xhtml
documents]
源文件的代码如下：
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<ui:component>
<h:outputLabel
value="#{label}: ">
<h:inputText
value="#{value}"/>
</h:outputLabel>
</ui:component>
</html>
2.
在标签库中注册标签
先创建一个名为mycustom.taglib.xml
的标签库文件，位于/WEB-INF/facelets
文件夹下。
mycustom.taglib.xml
如下：
<!DOCTYPE
facelet-taglib PUBLIC
"-//Sun
Microsystems, Inc.//DTD
Facelet Taglib
1.0//EN"
"http://java.sun.com/dtd/
facelet-taglib_1_0.dtd">
<facelet-taglib>
<namespace>http://myfaces.apress.com/custom
</namespace>
<tag>
<tag-name>inputTextLabelled</tag-name>
<source>components/InputTextLabeled.xhtml
</source>
</tag>
</facelet-taglib>
为了使用这个标签库，需要将mycustom.taglib.xml
的路径告知Facelets
。在web.xml
增加以下内容:
<context-param>
<param-name>facelets.LIBRARIES</param-name>
<param-value>
/WEB-INF/facelets/mycustom.taglib.xml</param-value>
</context-param>
就此标签inputTextLabeled
的创建完毕。
3.
使用举例
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:custom="http://myfaces.apress.com/custom">
<body>
<f:view>
<h:form>
<h:panelGrid
columns="1">
<custom:inputTextLabeled
label="Name" value="#{bird.name}"/>
<custom:inputTextLabeled
label="Order" value="#{bird.order}"/>
<custom:inputTextLabeled
label="Family" value="#{bird.family}"/>
</h:panelGrid>
</h:form>
</f:view>
</body>
</html>
例子二：
和例子一相似，不同的是例子一使用的<ui:component>
会在JSF
组件树中创建一个UIComponent
实例，而例子二使用的<ui:composition>
不会在组件树上创建节点。
1.
创建一个标签源文件
EditableColumn.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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:custom="http://myfaces.apress.com/custom">
<ui:composition>
<h:column>
<f:facet
name="header">
<h:outputText
value="#{headerText}"/>
</f:facet>
<h:outputText
value="#{cellText}" rendered="#{!editMode}"/>
<h:panelGroup
rendered="#{editMode}">
<custom:inputTextLabeled
label="#{headerText}" value="#{cellText}"/>
</h:panelGroup>
</h:column>
</ui:composition>
</html>
2.
在标签库中注册标签
在上文的 mycustom.taglib.xml
中增加以下内容：
<tag>
<tag-name>editableColumn</tag-name>
<source>components/EditableColumn.xhtml</source>
</tag>
3.
使用举例
editablecolumn-example.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:custom="http://myfaces.apress.com/custom">
<head>
<title>custom:simpleColumn</title>
</head>
<body>
<h:form>
<h:dataTable
var="item" value="#{birdDirectory.allBirds}">
<custom:editableColumn
headerText="Name" cellText="#{item.name}"
editMode="#{userBean.editMode}"/>
<custom:editableColumn
headerText="Order" cellText="#{item.order}"
editMode="#{userBean.editMode}"/>
<custom:editableColumn
headerText="Family" cellText="#{item.family}"
editMode="#{userBean.editMode}"/>
</h:dataTable>
<h:commandButton
value="Edit Mode"
actionListener="#{userBean.switchToEditMode}"
rendered="#{!userBean.editMode}"/>
<h:commandButton
value="Normal Mode"
actionListener="#{userBean.switchToNormalMode}"
rendered="#{userBean.editMode}"/>
</h:form>
</body>
</html>
分享到：
相关推荐
jsf+facelets+ajax4jsf的全部jar包
jsf_facelets 1.0.10版本
JSF+Facelets相结合的应用程序例子。
JSF/Facelets/xhtml学习
jsf-facelets.jar 下载 希望对您有用
Facelets 非常适合 专为 JSF 设计的视图技术
一个组合定义一个 Facelets 页中的 JSF UIComponent 结构。Facelets 应用程序可以包含多个组合，这些组合在不同的 Facelets 页中定义、作为一个应用程序运行。 Facelets 是一种类似 Tiles 的模板化框架。与 Tiles ...
jsf-facelets.jar 1.1.15.B1
JavaEE5学习笔记13-JSF集成Facelets使用经验总结.
本文档将针对BIMP平台使用到的常见JSF Facelets标签集合进行阐述，供开发者日常开发工作期间参考。BIMP主要采用JSF（Facelets）前端组件技术实施Web 2.0，以提升用户体验，并达到快速、高质量实施产品或项目研发目的...
小面 jsf、primefaces、facelets、spring 集成、jstl、
jsf-facelets1.1.9 目前最高版本 时间：2012年9月
JSF框架的jar和JSF的教程帮助你学习的JSF框架
这是一个使用jsf框架实现简易登录功能的小例子，对于初学者可以参考一下。
[TipTec Development] JSF & Facelets & JBoss Seam 核心技术 (英文版) [TipTec Development] Essential JSF, Facelets & JBoss Seam (E-Book) ☆ 出版信息：☆ [作者信息] Kent Ka Iok Tong [出版机构] TipTec ...
JSF2.xdatatable分页控件与左侧菜单最简单应用 JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...
jsf-facelets-1.1.15.B1.jar
Facelets ，very good
开始使用 Ajax4jsf 环境需求 下载 Ajax4jsf 安装 简单的 AJAX Echo 项目 JSP 页面 数据 Bean faces-config.xml Web.xml 部署 3. Ajax4jsf 框架的基本概念 介绍 结构概览 如何做... 发送一个 AJAX 请求...
JSF2.xdatatable分页控件与左侧菜单最简单应用 JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...