使用Facelets创建JSF组合控件

最新推荐文章于 2021-03-07 11:35:48 发布
最新推荐文章于 2021-03-07 11:35:48 发布
阅读量116 收藏
点赞数
分类专栏： web 文章标签： JSF XHTML UI SUN XML

使用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>

 

eneasy
关注
专栏目录
jsf动态创建表单控件实例.
06-07
1. **JSF控件基础**： JSF中的控件通常由UIComponent、UIInput和UICommand等接口实现，它们代表了HTML元素，如文本框、按钮等。这些控件可以通过`<h:inputText>`、`<h:commandButton>`等标签在页面上声明。每个控件...
JSF1.2日历组件
03-16
组件可以通过标签在JSP或Facelets视图中使用，并通过JSF生命周期进行渲染。 2. **自定义组件开发**：在JSF 1.2中，开发者可以通过实现UIComponent接口并重写必要的方法来创建自定义组件。组件需要定义属性、事件...
编写 JSF 自定义复合组件的技巧和窍门
GengV - 在Java的世界流浪
06-15 1029
陈 荔龙 (chenlil@cn.ibm.com), I/T 架构师, IBMElaine Zhan (ezhan@cn.ibm.com), 软件咨询工程师, IBM齐 克科 (qikeke@cn.ibm.com), I/T 架构师, IBM 2009 年 5 月 25 日本文介绍开发 JavaServerFaces（JSF）自定义复合组件
Seam JSF 控件
03-30 1608
【转】 Seam的JSF控件(二)2010-07-05 14:21转载自 030721117最终编辑 030721117<br /><s:formattedText><br />描述<br />输出 Seam Text ，一种富文本标记，对于博客、Wiki和其他可能使用富文本的应用程序很有用。完整的用法请见Seam Text章节。<br />属性<br />value — 一个指定要渲染的富文本标记的EL表达式。<br />用法<s:formattedText value="#{blog.te
JSF Converter使用总结
问题，总是可以解决滴
02-14 2419
PrimeFaces4,5的AutoComplete、SelectOneMenu等在下拉菜单中除了显示单纯的文字列表外，还可以分多列显示图片等内容，效果上比OS自带的控件更绚了，但使用上并不复杂，将String的List数据更换成POJO的List，再自定义一个Converter就行了。      Converter并不是PrimeFaces定义的，属于JSF规范。在JavaEE的文
JSF-使用JSF标记
weixin_30653097的博客
01-04 253
使用JSF标记 基于Facelets技术的JSF页面是一个 XHTML页面，文件扩展名为 .xhtml 1)JSF页面可用html标记，但必须满足： ①所有标记都必须闭合。如<p>开始，</p>结束；不成对的<br/> ②所有的标记名和属性名都必须为小写 ③所有的属性值都应用双引号或单引号括起来 2)JSF页面主要由JSF标记组成，也可包含一些...
Seam的JSF控件（一）
alienor_cn的专栏
03-07 579
<br />为了使用这些tagsd，要在你的页面中定义“s”命名空间如下（只用于Facelets）：<html xmlns="http://www.w3.org/1999/xhtml"<br /> xmlns:s="http://jboss.com/products/seam/taglib"><br />ui的例子，示范了这其中许多标签的用法。<br />Table 29.1. Seam的JSF控件参考<br /><s:button><br />描述<br />通过控制对话传播支持动作调用的按钮。
Seam的JSF控件(二)
alienor_cn的专栏
03-07 641
<br /><s:formattedText><br />描述<br />输出 Seam Text，一种富文本标记，对于博客、Wiki和其他可能使用富文本的应用程序很有用。完整的用法请见Seam Text章节。<br />属性<br />value — 一个指定要渲染的富文本标记的EL表达式。<br />用法<s:formattedText value="#{blog.text}"/><br />实例<br /><s:validateFormattedText><br />描述<br />检查提交的值是否合
java 控件命名_java – 找不到JSF 2.1.13自定义组件：标签库支持命名空间：但没有为名称定义标记：...
weixin_26897585的博客
03-07 94
问题我正在使用JSF 2.1.13创建一个原型来展示JSF对我们当前使用JSP和struts 1.1构建的webapp的好处.我使用JSF 2.2.6的代码跟踪代码,但是一旦我发现Oracle Weblogic 12c还不支持JSF 2.2,我就不得不降级.使用2.1.13运行代码时收到以下错误：/pages/sites/tab-details.xhtml @27,90 Tag Library ...
JSF----------基础知识初解
热门推荐
black-ant
03-24 3万+
初次学习JSF,对其基础进行了一些学习与整理。 JSF(JavaServer Faces)它是一个基于服务器端组件的用户界面框架。 它用于开发Web应用程序。 它提供了一个定义良好的编程模型，由丰富的API和标签库组成。最新版本JSF 2使用Facelets作为其默认模板系统。 它是用Java编写的。 JSF API提供组件(inputText，commandButton等)并帮助管理其状态。...
JSF 文档参考
渴望飞的鱼的博客
10-24 2131
JSF 文档参考
JSF2datatable分页控件与左侧菜单
11-27
JSF2.xdatatable分页控件与左侧菜单最简单应用 　JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...
JSF2.xdatatable分页控件与左侧菜单最简单应用
11-23
JSF2.xdatatable分页控件与左侧菜单最简单应用 　JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...
基于Java开发的国际象棋棋盘游戏设计源码
最新发布
10-05
该项目是一款采用Java语言开发的国际象棋棋盘游戏，包含40个文件，其中包括15个Java源文件、13个PNG图像文件、4个中文文件、3个WAV音频文件、1个Git忽略文件、1个LICENSE许可文件和1个Markdown文件。
基于Java核心的志愿汇系统开源设计源码实现
10-05
该项目是一款开源的志愿汇系统，采用Java核心技术实现，并融合了JavaScript, HTML, CSS等前端技术。系统源码包含3648个文件，其中SVG文件2164个，PNG文件640个，JavaScript文件333个，HTML文件140个，CSS文件136个，Java文件56个，SCSS文件42个，LESS文件26个，JPG文件17个，XML文件11个。此系统提供了一个简单的开源实现，便于用户学习和定制。
新疆大学在辽宁2020-2024各专业最低录取分数及位次表.pdf
10-05
那些年，与你同分同位次的同学都去了哪里？全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据，高考志愿必备参考数据
ic客栈-ic卡分析助手.exe
10-05
目前应用最广的梯控分析修改软件
BIMP平台JSF Facelets控件与标签参考手册
"JSF控件详细参考手册是BIMP平台开发者的重要参考资料，它涵盖了JSF Facelets的各种标签集合，包括、、、、、、以及等。文档旨在帮助开发者提升Web 2.0应用的用户体验和项目研发效率。" JSF（JavaServer Faces）是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值