`
cucaracha
  • 浏览: 141423 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
博客专栏
A8f3fa2f-18ce-3862-897a-5d2209197c90
Java NIO.2
浏览量:87909
7a076ba7-8ec8-3241-aa3c-67bb2f7856a2
Java EE 7 简明教...
浏览量:36709
社区版块
存档分类
最新评论

[Java EE 7] JSF Composite 组件

阅读更多
文章来源: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
0
0
分享到:
评论

相关推荐

    JSF2自定义组件编程系列 第五部分 源代码

    **JSF2**(JavaServer Faces 2.0)是Java EE的一个标准组件模型和视图框架,用于构建Web应用程序。JSF2引入了许多改进,如增强的可扩展性和组件化,使得开发更加高效。 **Ubuntu**是Linux操作系统,它被用作开发...

    java ee 6 with glassfish 3

    JavaServer Faces 2.0是Java EE 6中的MVC(Model-View-Controller)Web框架,增强了组件模型,引入了Faces Flow和Composite Components,提供了更强大的表单处理和页面导航功能。 6. **GlassFish 3**: GlassFish...

    Sun Certified Enterprise Architect for Java EE Study Guide

    JSF是一种用于构建用户界面的MVC(Model-View-Controller)框架,提供了丰富的UI组件库,并且与JavaServer Pages(JSP)和JavaServer Faces Composite Component(JSF2.0引入)良好集成。它简化了Web应用开发,通过...

    JSF 组件开发.rar

    JSF是一种基于MVC(模型-视图-控制器)架构的Java Web应用程序框架,由Java Community Process(JCP)制定,并且是Java EE的一部分。它允许开发者创建可重用的用户界面组件,简化了Web应用的开发过程。在"JSF组件...

    jsf教程和ppt

    《Java Server Faces.ppt》可能是对JSF基础知识的详细讲解,包括JSF的架构、生命周期、UI组件、事件处理、数据绑定等内容。这份PPT可能通过图表、实例和步骤指导,使初学者能够快速入门JSF。它可能会涵盖如何创建JSF...

    jsf2.0(mojarra-2.0.2-FCS-binary.zip)

    综上所述,`jsf2.0(mojarra-2.0.2-FCS-binary.zip)`是一个全面的JSF 2.0开发工具包,包含了从开发到部署所需的所有组件和文档,为Java Web开发者提供了强大的工具集,便于他们构建高效、易维护的Web应用。...

    jsf 电子书合集(来源于网络)

    7. **JSF与Ajax**:了解如何使用AJAX功能增强JSF应用的用户体验,如PrimeFaces或RichFaces库的使用。 8. **综合应用**:通过实例分析,展示如何结合EJB、JPA或Hibernate等技术构建完整的Java EE应用程序。 9. **...

    JSF2-Getting-Started.zip_Getting Started

    要开始使用JSF2.0,你需要设置一个兼容的Java EE服务器(如Tomcat、GlassFish),安装JSF库,然后创建一个基本的JSF项目。可以使用Maven或Gradle等构建工具管理依赖,并通过IDE(如Eclipse或IntelliJ IDEA)创建和...

    TP1-JSF2-EJB-JPA:TP1与米歇尔·布法(Michel Buffa)

    JSF是Java EE中的一个MVC(Model-View-Controller)框架,用于构建用户界面。JSF 2.0引入了诸如Facelets、Composite Components、Managed Beans的增强,以及Ajax支持,使开发者能更高效地创建动态、交互式的Web页面...

    JDeveloper指南22

    它提供了JSF组件库,可以方便地拖放组件到页面,同时支持Facelets模板和Composite Component,有助于创建可重用的UI元素。 五、开发环境特性 1. **代码编辑器**:JDeveloper的代码编辑器具备语法高亮、自动完成和...

    实用的el表达式用法

    而`#{expr}`形式常用于JSF(JavaServer Faces)中,如`&lt;h:inputText value="#{checkOutFormBean.email}"&gt;`,在表单提交时计算,设置组件的值。 - 作为方法表达式:当表达式引用一个方法而非模型对象时,例如JSF中...

Global site tag (gtag.js) - Google Analytics