`
eneasy
  • 浏览: 128342 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

使用Facelets创建JSF组合控件

    博客分类：
  • web
JSFXHTMLUISUNXML 
阅读更多

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

 

5
顶
2
踩
分享到：
| Facelets 标签参考 2
评论
3 楼 lhx1026 2009-12-29  
mycustom.taglib.xml 中的<tag-name>inputTextLabelled</tag-name> 写错了
inputTextLabelled中多了一个l啊大哥，应为<tag-name>inputTextLabeled</tag-name>。不然就前后不一致了。
2 楼 liushian 2009-05-15  
非常好！
多谢赐教，咱们后会有期！
1 楼 gzhzh 2008-10-02  
不错，一看就懂，谢谢！！
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jsf动态创建表单控件实例.

    1. **JSF控件基础**： JSF中的控件通常由UIComponent、UIInput和UICommand等接口实现，它们代表了HTML元素，如文本框、按钮等。这些控件可以通过`&lt;h:inputText&gt;`、`&lt;h:commandButton&gt;`等标签在页面上声明。每个控件...

    JSF1.2日历组件

    组件可以通过标签在JSP或Facelets视图中使用，并通过JSF生命周期进行渲染。 2. **自定义组件开发**：在JSF 1.2中，开发者可以通过实现UIComponent接口并重写必要的方法来创建自定义组件。组件需要定义属性、事件...

    JSF控件详细参考手册

    ### JSF控件详细参考手册 #### 概述 本文档旨在为BIMP平台开发者提供一个全面且深入的JSF Facelets标签集参考指南。通过详细介绍这些标签的用途与用法，帮助开发者更好地掌握和利用这些工具来提高Web应用的质量与...

    JSF 很全面的帮助文档

    JSF使用可重用的UI组件，如按钮、表单和数据展示控件，这些组件可以进行定制和组合以构建复杂的用户界面。 2. JSF组件库： JSF的核心在于其组件模型。JSF提供了一套内置的UI组件，例如`&lt;h:inputText&gt;`（文本输入框...

    jsf需要全部包

    - Facelets是JSF的默认视图描述语言，用于创建用户界面模板。 - 它允许开发者使用XHTML和XML语法定义组件，支持EL（Expression Language）和CSS。 4. **Managed Beans**： - Managed Beans是JSF中的业务逻辑容器...

    JSF1.1入门教程

    然后，通过编写简单的JSP页面并添加JSF控件来实践。接着，创建Managed Beans并绑定到视图组件，实现数据的双向绑定。最后，学习如何处理用户事件和控制页面导航。 总结，JSF 1.1入门教程是一个为初学者设计的资源，...

    JSF标签暨注解规范

    开发者可以通过组合使用各种标签和注解，创建复杂的应用逻辑，处理用户输入，进行数据验证，以及实现动态的Ajax行为。例如，`&lt;f:ajax&gt;`标签可以轻松地添加Ajax功能，而`&lt;h:messages&gt;`则用于显示验证错误消息。通过...

    JSF+Spring+JPA(Hibernate实现)的环境搭建.doc

    JSF中的组件可以监听并响应用户操作，通过AJAX4JSF库，可以方便地处理大量控件的异步事件，使得前端与后端的数据交换更加流畅。JSF的另一个优点是其与Java EE规范的兼容性，这使得在切换不同的ORM框架时，比如从...

    jsf基础教程+JPA教程

    JSF支持多种视图技术，如JSP（JavaServer Pages）和Facelets，Facelets是JSF 2.0及更高版本的推荐视图技术，因其更简洁和模块化的特性而受到青睐。 **JPA（Java Persistence API）教程** Java Persistence API...

    JSF2datatable分页控件与左侧菜单

    JSF2.xdatatable分页控件与左侧菜单最简单应用 　JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...

    JSF2.xdatatable分页控件与左侧菜单最简单应用

    JSF2.xdatatable分页控件与左侧菜单最简单应用 　JSF2.x，功能强大，使用方便。全世界使用JSF的人越来越多。而且也有很多很好的控件给发出来了，如：richfaces、primefaces、myfaces等，就日前来讲primefaces功能...

    JSF2开发代码示例

    通过分析这个示例，开发者可以学习如何使用JSF2.2的特性，结合PrimeFaces组件库创建动态、响应式的Web界面，并了解如何组织和配置一个基本的JSF项目。这些知识对于理解和实践企业级Java Web开发至关重要。

    jsf2项目开发及所需各种标签集合

    标题：“JSF2项目开发及所需各种标签集合”指的是在使用JavaServer Faces 2（JSF2）技术栈开发Web应用项目时，需要掌握的多种标签的使用方法，这些标签包括JSF标准标签、HTML标签、Facelets标签和RichFaces标签等。...

    JSF课件 jsf介绍

    - **易于学习和使用**：JSF具有良好的文档和支持社区，使得初学者也能快速上手。 - **组件驱动**：JSF采用组件模型，允许开发者通过拖放的方式构建用户界面，从而提高开发效率。 - **强大的组件库**：JSF提供了...

    JSF进阶指路

    Facelets是JSF的表现层扩展，它引入了模板机制，允许开发者创建可重用的组件。尽管许多人主要利用Facelets的模板功能，但它真正强大的地方在于组件创建。通过Facelets，开发者能够更加灵活地定制和管理UI组件，提高...

    第一个JSF程序

    在"第一个JSF程序"中，我们将探索如何使用JSF来创建一个基本的Web应用。 首先，JSF应用通常由以下几个部分组成： 1. **Facelets**：这是JSF的视图技术，用于定义用户界面。Facelets使用XML语法，并允许开发者使用...

    JSF 2.0 开发资料

    - **内置组件**：JSF 2.0 扩展了内置组件库，提供了更多的 UI 组件，如数据表格、树形控件等，使得开发者可以更容易地构建复杂的用户界面。 - **自定义组件**：自定义组件的创建变得更加容易，可以通过注解来...

    jsf pring hibernate

    在JSF应用中，开发者可以使用Facelets作为视图表示语言，结合EL（Expression Language）来绑定组件和后台数据。 **Spring框架** Spring是Java企业级应用开发的事实标准，它提供了一个全面的编程和配置模型，用于...

    JavaServer Faces in Action(英文版)

    8. **Facelets**：Facelets是JSF 2.0引入的默认视图技术，替代了原来的JSP，它提供了更清晰的结构和更好的分离关注点。 9. **Faces Servlet**：JSF框架的核心Servlet，负责处理所有的JSF请求，并驱动JSF生命周期。 ...

    JSF+Spring+JPA(Hibernate实现)的环境搭建

    综上所述，使用JSF+Spring+JPA（使用 Hibernate 实现）的技术栈为现代Web应用开发提供了一个强大的框架。它不仅符合Java EE的标准，还提供了高度的灵活性和可扩展性。通过遵循本文档中的步骤，开发者可以快速搭建出...

Magicbox
Global site tag (gtag.js) - Google Analytics