文章来源:
http://www.aptusource.org/2014/04/java-ee-7-jsf-composite-components/
利用 Facelets 和资源处理的特性,JSF 定义了 Composite 组件,它是一个使用 Facelets 标签文件定义的组件,组件中可能包含了一组 JSF 组件。将这个定义 Composite 组件的 .xhtml 文件放到资源目录中。这样,你就可以在 JSF 页面中的任意地方使用这个可重用的组件了。
Composite 组件在“定义页面”中定义,在“使用页面”中使用。在定义页面中使用 <cc:interface> 定义元数据(或参数),使用 <cc:implementation> 定义具体实现。cc 的命名空间是 http://xmlns.jcp.org/jsf/composite/ namespace。在未来版本的 JSF 中,可能会放松定义元数据的限制,因为元数据可以从具体实现中推断出来。
从 JSF 1.2 开始就可以定义 Composite 组件了,但是在 1.2 中需要更深地理解 JSF 生命周期并且需要编辑多个文件。JSF 2.0 开始,使用 Composite 只需要编辑一个 .xhtml 文件。
我们看看,如果 Facelet 中有下面的代码片段用于显示登录表单:
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{user.name}" id="name"/>
<h:message for="name" style="color: red" />
<h:outputText value="Password:" />
<h:inputText value="#{user.password}"
id="password"/>
<h:message for="password" style="color: red" />
</h:panelGrid>
<h:commandButton actionListener="#{userService.register}"
id="loginButton"
action="status"
value="submit"/>
</h:form>
这段代码定义了一个有两行三列的表格,显示如下:
表格中的第一列定义了显示标签,第二列定义了输入框,第三列定义了错误提示语显示位置;表格第一行绑定输入值到 User.name 属性,第二行绑定输入值到 User.password 属性。页面还有一个提交按钮,点击后会提交到 UserService bean 的 register 方法。
如果这个登录表单需要在多个页面中展示,那么你需要在每个页面中编写上面的表单代码。更好的做法是将表单代码定义到 Composite 组件中。首选需要将代码拷贝到 .xhtml 文件中,再将文件拷贝到标准资源目录中。根据约定优于配置原则,这个代码段已经自动被分配了命名空间和标签名。
假设登录表单代码拷贝到了 resources/mycomp/login.xhtml 文件中,这个定义页面看起来应该是这样:
<?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:cc="http://xmlns.jcp.org/jsf/composite"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<!-- INTERFACE -->
<cc:interface>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{user.name}" id="name"/>
<!-- . . . -->
</h:form>
</cc:implementation>
</html>
在上面的代码中,cc:interface 用于定义组件的元数据,在 cc:interface 中可以定义:页面属性、facets、或事件监听器等。cc:implementation 中包含了组件的内容。
使用定义的 Composite 组件是,命名空间是 http://xmlns.jcp.org/jsf/composite/ 和 mycomp 组合,标记名称是去掉 .xhtml 后缀之后的文件名:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:mc="http://xmlns.jcp.org/jsf/composite/mycomp"
<!-- . . . -->
<mc:login/>
</html>
假如需要在代码中绑定另外的属性(替代 #{user.name})并且在不同的页面需要提交到不同的后台方法(替代 #{userService.register})。那么在定义页面的时候可以将这些值传入:
<!-- INTERFACE -->
<cc:interface>
<cc:attribute name="name"/>
<cc:attribute name="password"/>
<cc:attribute name="actionListener"
method-signature=
"void action(javax.faces.event.Event)"
targets="ccForm:loginButton"/>
</cc:interface>
<!-- IMPLEMENTATION -->
<cc:implementation>
<h:form id="ccForm">
<h:panelGrid columns="3">
<h:outputText value="Name:" />
<h:inputText value="#{cc.attrs.name}" id="name"/>
<h:message for="name" style="color: red" />
<h:outputText value="Password:" />
<h:inputText value="#{cc.attrs.password}"
id="password"/>
<h:message for="password" style="color: red" />
</h:panelGrid>
<h:commandButton id="loginButton"
action="status"
value="submit"/>
</h:form>
</cc:implementation>
在上面的代码中,在 cc:interface 中清晰地定义了各个参数。第三个参数使用了 targets 属性指向 ccForm:loginButton。
在 cc:implementation 中:
- h:form 拥有 id 属性。这是必须的,这样才能显式引用表单中的提交按钮。
- h:inputText 现在使用 #{cc.attrs.xxx} 替换了 #{user.xxx}。#{cc.attrs} 是一个 EL 表达式,用于在组件中访问组件定义的属性,在这个例子中组件定义了 name 和 password 两个属性。
- 属性 actionListener 中定义了事件监听器。它使用 method-signature 定义了方法签名。
- h:commandButton 拥有 id 属性,这样能在 h:form 中很方便的定位到提交按钮。
在使用页面中,可以使用下面的代码来传入 user、password 和 actionListener:
<ez:login
name="#{user.name}"
password="#{user.password}"
actionListener="#{userService.register}"/>
现在,使用页面可以传入不同的后台 bean 属性和不同的提交处理方法。
总的来说,Composite 组件带来了以下好处:
- 遵循不要重复自己原则,让你的代码集中在一个文件中。
- 允许开发者在不使用 Java 代码和 XML 的情况下定义新组件。
文章来源:
http://www.aptusource.org/2014/04/java-ee-7-jsf-composite-components/
- 大小: 11.3 KB
分享到:
相关推荐
algaworks-ebook-java-ee-7-com-jsf-primefaces-e-cdi-2a-edicao
Practical JSF in Java EE 8 pdf Master the Java EE 8 and JSF (JavaServer Faces) APIs and web framework with this practical, projects-driven guide to web development. This book combines theoretical ...
In a sense, this book teaches you to develop Java EE applications with JSF as user interface. It’s a book for Java enthusiasts. Knowledge about web technologies is helpful, but not required. For ...
JSF分页组件2,JSF分页组件2
本书是一个面向任务的实用指南,通过一系列实用示例来介绍如何开发Java EE 7(java平台企业版7)企业应用。这本书由Oracle的Java EE文档小组成员倾力编写,会让初学者和中缎Java程序员深入了解这个平台。 这个指南包括...
经典JAVA EE企业应用实战基于WEBLOGIC JBOSS的JSF+EJB 3+JPA整合开发——源码.part1 其他部分详见我的上传列表,全部分卷下载完成才能解压。 本书介绍了Java EE规范的三大主要规范JSF、EJB 3和JPA,其中JSF是Sun...
本书是一个面向任务的实用指南,通过一系列实用示例来介绍如何开发Java EE 7(java平台企业版7)企业应用。这本书由Oracle的Java EE文档小组成员倾力编写,会让初学者和中缎Java程序员深入了解这个平台。 这个指南包括...
本书涵盖了所有主要的Java EE 7的API,包括JSF 2.2,EJB 3.2,1.1 CDI,对于WebSocket的,JAX-WS,JAX-RS多的Java API。 书中还介绍了JSON-P,为JSON(JavaScript对象符号)处理的Java API。这种先进的主题涉及如何...
由于由Java Community Process (JCP) 推动,属于Java EE 5中的技术规范,而受到了厂商的广泛支持。 JSF(Java Server Faces)技术为开发基于网络用户界面的Java开发者提供了标准的编程接口API以及标签库。就像...
中文名: 经典Java EE企业应用实战--基于WebLogic/JBoss的JSF+EJB 3+JPA整合开发 原名: 经典Java EE企业应用实战--基于WebLogic/JBoss的JSF+EJB 3+JPA整合开发 作者: 李刚 资源格式: PDF 版本: 第一版 出版社: 电子...
JSF自定义组件学习的好教材
在Java EE 6中使用JSF 2.0简化页面制作 在Java EE 6中使用JSF 2.0简化页面制作 在Java EE 6中使用JSF 2.0简化页面制作
java+jsf+js java+jsf+js java+jsf+js java+jsf+js java+jsf+js java+jsf+js java+jsf+js
经典JAVA EE企业应用实战 基于WEBLOGIC JBOSS的JSF+EJB 3+JPA整合开发.part2
经典Java EE企业应用实战:基于WebLogic/JBoss的JSF+EJB 3+JPA整合开发 part3
java jsp jsf fx java jsp jsf fx java jsp jsf fx
本书为java ee 规范的讲解,JSF,CDI,EJB,JPA,JTA,互操作包括message queue;restful service; soapservice
Title: Java EE 7 Development with NetBeans 8 Author: David R. Heffelfinger Length: 362 pages Edition: 1 Language: English Publisher: Packt Publishing Publication Date: 2015-01-30 ISBN-10: 1783983523 ...
JSF UI 组件详解