`
log_cd
  • 浏览: 1098624 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JSF2之模板和复合组件

JSFXHTMLCSSHTML应用服务器 
阅读更多
    模板和复合组件是 Java™Server Faces (JSF) 2 的两个功能强大的特性，借助这两个特性，您就可以实现易于修改和扩展的用户界面。
     JSF2 现在的默认显示技术 — Facelets — 就是一个模板框架，在很大程度上基于的是 Tiles。JSF 2 还提供了一个功能强大的机制，称为复合组件，该机制构建在 Facelets 的模板特性之上，因此，在无需任何 Java 代码和 XML 配置的情况下就可以实现定制组件。
一、JSF 2 模板
     JSF 2 在很多方面都支持 DRY(Don't Repeat Yourself) 原则，其中之一就是通过模板。模板能够封装在应用程序视图中十分常见的功能，因此该功能只需被指定一次。在 JSF 2 应用程序中，一个模板可供多个组装（compositions）用于创建视图。
      应用程序包含多个具有相同布局的视图。JSF 模板功能让您能够在一个模板内封装该布局 — 及其他共享文件，比如 JavaScript 和 Cascading Style Sheets（CSS）。
(1)、模板：/templates/masterLayout.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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
      
    <f:view contentType="text/html; charset=utf-8"/>
      
	<h:head>
		<h:outputScript library="js" name="util.js" target="head"/>
	    <h:outputStylesheet library="css" name="public.css" target="body"/>
	    
	    <title>${title}</title>
	</h:head>

	<body>
		<div id="mainbox">
			<div id="header">
				<ui:insert name="head">
	          		<ui:include src="/sections/shared/header.xhtml"/>
	        	</ui:insert>
			</div>
			
			<div id="main">
				<ui:insert name="content"/>
			</div>
			
			<div id="footer">
				<ui:insert name="foot">
	          		<ui:include src="/sections/shared/footer.xhtml"/>
	        	</ui:insert>			
			</div>
		</div>		
	</body>
</html>

说明：
      模板通过 <ui:insert> 标记将内容插入到布局中。如为 <ui:insert> 标记指定了主体，JSF 会将此标记的主体作为默认内容。借助 <ui:define> 标记，使用此模板的那些封装可以定义内容或者覆盖默认内容。
(2)、使用模板
a、header:/sections/share/header.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:util="http://java.sun.com/jsf/composite/components/util">

<ui:composition>
	<util:icon id="waveImg" image="#{resource['images/wave.med.gif']}" actionMethod="#{hello.homePage}"/>
</ui:composition>

</html>

b、footer:/sections/share/footer.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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">

	<f:view contentType="text/html; charset=utf-8"/>
	
<div id="footer_content">
	<div id="site_nav">
		<ul>
		  <li><a href="#">广告服务</a></li>
		  <li><a href="#">黑板报</a></li>
		  <li><a href="#">关于我们</a></li>
		  <li><a href="#">联系我们</a></li>
		  <li class="last"><a href="#">友情链接</a></li>
		</ul>
	</div>
	<div id="copyright">
		&copy;2000-2010 ColorWolf.com. All rights reserved. [ 蜀ICP备0289090980号 ]
	</div>
</div>
      
</html>

c、hello:/views/hello.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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
      
<ui:composition template="/templates/masterLayout.xhtml">

    <ui:param name="title" value="JavaServer Faces 2.0.2 Demo"/>

    <ui:define name="content">
    	
    	<div style="margin: 5px; color: green;font-weight: bold;">
    		欢迎您，<h:outputText value="#{ hello.loginName }"/>
    	</div>
    	
        <h:form id="helloForm" >
            <h:inputText id="name" class="oneInput" value="#{hello.name}"/>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <h:commandButton id="submit" class="NormalButton" action="response" value="确  定"/>
        </h:form>
		
    </ui:define>
	
</ui:composition> 

</html>

      如果您想在hello.xhtml中，改变一下footer部分，可以用<ui:define name="foot">来完成，在<ui:composition>中增加： 
<ui:define name="foot">
    <ui:include src="/sections/shared/footer2.xhtml"/>
</ui:define>

说明：
      模板功能背后的概念十分简单。定义一个模板来封装在多个视图中常见的功能。每个视图由一个组装和一个模板组成。
       当 JSF 创建视图时，它加载组装的模板，然后将由组装所定义的内容插入模板。
       JSF 2 鼓励使用较小的视图段组装视图。模板封装了常见功能，进而将视图分成了更小的块。JSF 2 还提供了一个 <ui:include>  标记，这个标记可以让您将视图进一步分成更小的功能块。使用组合的方式，遵循 DRY 原则。就像下面这样用： 
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets">

  <div class="placesSearchForm"> 
    <div class="placesSearchFormHeading">
      #{msgs.findAPlace}
    </div>    

    <ui:include src="addressForm.xhtml">	
    <ui:include src="logoutIcon.xhtml">	
  </div>    

</ui:composition>

二、复合组件
      JSF 2 综合了 Facelets 模板、资源处理和一个简单的命名约定来实现复合组件。复合组件，正如其名字所示，让您能够从现有组件组装一个新组件。
       一般情况下，是在 resources 目录下的 XHTML 内实现复合组件，并将它们完全通过约定链接到一个名称空间和标记。
       要使用复合组件，需要声明一个名称空间并使用标记。此名称空间通常为 http://java.sun.com/jsf/composite  外加目录名，这个目录就是 resources 目录下组件所在之处。组件名本身是其 XHTML 文件的名字，只不过没有 .xhtml 扩展名。这种约定消除了对配置的需要。
(1)、icon 组件：一个简单的复合组件
a、组件定义文件：(/resources/components/util/icon.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:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite">
    
  <!-- INTERFACE -->
  <composite:interface>
    <composite:attribute name="image"/>
    <composite:attribute name="actionMethod" 
             method-signature="java.lang.String action()"/> 
    <composite:attribute name="styleClass" default="icon" required="false"/>
  </composite:interface>

  <!-- IMPLEMENTATION -->          
  <composite:implementation>
    <h:form>  
      <h:commandLink action="#{cc.attrs.actionMethod}" immediate="true">

	      <h:graphicImage value="#{cc.attrs.image}"
	                styleClass="#{cc.attrs.styleClass}"/>

      </h:commandLink>
    </h:form>
  </composite:implementation>
  
</html>

说明：
       icon 组件包含两节：<composite:interface> 和 <composite:implementation>。<composite:interface>  节定义了一个界面，可用来配置此组件。icon 组件具有两个属性：image 和 actionMethod，前者定义了组件的外观，后者定义了组件的行为。
        <composite:implementation> 节包含组件的实现。它使用 #{cc.attrs.ATTRIBUTE_NAME}  表达式来访问组件的界面内定义的属性。（cc 是 JSF 2 表达式语言中的保留关键字，代表的是复合组件。）
        icon 组件用 <h:graphicImage> 的 styleClass  属性为其图像指定了一个 CSS 类。它是一个可选的 CSS 类，使用组件时，可以另指定名字覆盖默认的icon。
b、使用icon组件 
<!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:util="http://java.sun.com/jsf/composite/components/util">

<ui:composition>
	<util:icon id="waveImg" image="#{resource['images/wave.med.gif']}" actionMethod="#{hello.homePage}"/>
</ui:composition>

</html>

(2)、login 组件：一个完全可配置的组件
a、组件定义:/resources/components/util/login.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:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:composite="http://java.sun.com/jsf/composite">

  <!-- INTERFACE -->
  <composite:interface>
    <composite:actionSource name="loginButton" targets="form:loginButton"/>
    <composite:attribute name="loginButtonText" default="Log In" required="true"/>
    <composite:attribute name="loginPrompt"/>
    <composite:attribute name="namePrompt"/>
    <composite:attribute name="passwordPrompt"/>
    <composite:attribute name="loginAction" 
      method-signature="java.lang.String action()"/>
    <composite:attribute name="managedBean"/>
    
    <composite:attribute name="textInput" default="oneInput" required="false"/>
    <composite:attribute name="btnInput" default="NormalButton" required="false"/>
    
  </composite:interface>
    
  <!-- IMPLEMENTATION -->
  <composite:implementation>
   <h:form id="form" prependId="false">

     <div class="prompt">
       #{cc.attrs.loginPrompt}
     </div>
	
	 <h:panelGroup> 

	     <h:panelGrid columns="2" cellpadding="5" cellspacing="2" style="text-align:left;height:50px;">
	       #{cc.attrs.namePrompt}
	       <h:inputText id="name" value="#{cc.attrs.managedBean.name}" styleClass="#{cc.attrs.textInput}"/>
	
	       #{cc.attrs.passwordPrompt} 
	       <h:inputSecret id="password" value="#{cc.attrs.managedBean.password}" styleClass="#{cc.attrs.textInput}"/>
	
	     </h:panelGrid>
	
	     <h:panelGrid columns="2" cellpadding="5" cellspacing="2" style="text-align:center;width:200px;">
	       <h:commandButton id="loginButton"
	                     value=" #{cc.attrs.loginButtonText} " 
	                    action="#{cc.attrs.loginAction}" styleClass="#{cc.attrs.btnInput}"/>
	       
	       <input type="reset" class="NormalButton" value=" 取 消 "/>
	     </h:panelGrid>
	     
     </h:panelGroup>
     
   </h:form>
   
   <div class="error" style="padding-top:10px;">
     <h:messages layout="table"/>
   </div>
  </composite:implementation>
</html>

       在 login 组件的界面，我已经在 loginButton 名称下公开了 Log In 按钮。该名称所针对的是位于 form 表单内的 Log In 按钮，因此 targets  属性的值为：form:loginButton。
        Log In 按钮相关联的动作侦听器： 
package com.logcd.listener;

import javax.faces.event.AbortProcessingException;
import javax.faces.event.ActionEvent;
import javax.faces.event.ActionListener;

public class LoginActionListener implements ActionListener {
	  public void processAction(ActionEvent e) 
	    throws AbortProcessingException {
	    System.out.println("logging in ...........");
	  }
}

b、使用组件 
<!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:f="http://java.sun.com/jsf/core"      
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:util="http://java.sun.com/jsf/composite/components/util">
      
<ui:composition template="/templates/masterLayout.xhtml">

    <ui:param name="title" value="JavaServer Faces 2.0.2 Demo"/>

    <ui:define name="content">

		<div style="margin: 8px 0px;">
		    <util:login loginPrompt="#{msgs.loginPrompt}"
		                namePrompt="#{msgs.namePrompt}"
		            	passwordPrompt="#{msgs.passwordPrompt}"
		               	loginAction="#{user.login}"
		           		loginButtonText="#{msgs.loginButtonText}"
		               	managedBean="#{user}">
		                 
		       <f:actionListener for="loginButton" 
		                        type="com.logcd.listener.LoginActionListener"/>
		    </util:login>
		</div>
    </ui:define>
	
</ui:composition> 

</html>

     要在faces-config.xml中加载资源文件： 
<resource-bundle>
    <base-name>Messages</base-name><!--根为classpath-->
    <var>msgs</var>
</resource-bundle>

说明：
    你还可以实现实现嵌套组件，即在定义组件时，使用已定义过的组件。表达式 #{cc.parent.attrs.location.ATTRIBUTE_NAME} 的使用。可以使用一个复合组件的 parent 属性来访问父组件的属性，这一点极大地方便了组件的嵌套。
     但是，无需严格依赖于嵌套组件中的父属性，可以将属性从父组件传递给其内嵌套的组件，与向其他任何组件（不管嵌套与否）传递属性无异。
     是选择实现组件-显式属性，还是选择依赖于父属性，这是耦合和方便性之间的权衡问题。
分享到：
| JSF2与Spring集成
评论
4 楼 wzw_95_7 2012-07-23  
3 楼 wzw_95_7 2012-07-23  
hhhhhhh
2 楼 log_cd 2010-07-26  
，不好意思。我只是了解并感受一下下。没在项目中用过哈！你看下这篇吧http://pute.iteye.com/blog/634892
1 楼 lucky16 2010-07-25  
LZ,我想问问,JSF1.2的模板技术和JSF2一样的吗?
发表评论

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

相关推荐

    从零开始，跟我学JSF，起步 JSF

    6. **使用Facelets**：Facelets的语法和模板设计，包括导入组件库、创建复合组件等。 7. **监听器和事件**：JSF事件模型的介绍，包括怎样注册监听器和处理自定义事件。 8. **调试和日志**：如何在JSF应用中进行...

    JSF1.1,1.2,2.0API大集合

    7. **Facelets的进一步改进**：如模板、复合组件和命名空间的增强，使得视图开发更加灵活。 这些API文档包含了JSF各个版本的详细接口、类和方法说明，对于开发者来说，无论是学习基础概念还是解决实际问题，都是不...

    JSF标签暨注解规范

    4. **复合组件库**：`&lt;composite:component&gt;`标签允许开发者创建自定义的、复杂的行为和UI组件。 5. **JSTL核心库**和**JSTL函数库**：这两个库提供了JSP Standard Tag Library的标签，如`&lt;c:if&gt;`和`&lt;c:forEach&gt;`，...

    JSF2-Getting-Started.zip_Getting Started

    ### 五、Facelets模板和复合组件 Facelets使用XML语法，使得视图更易于理解和维护。你可以创建模板来定义通用布局，然后在多个页面中复用。复合组件允许开发者封装复杂的UI逻辑，提高代码复用。 ### 六、Ajax支持 ...

    jsf 规范编写文当

    2. **Facelets模板和复合组件** Facelets允许开发者使用XML语法来创建可重用的视图组件，通过模板技术和复合组件实现代码复用。这大大提高了代码的可维护性和可扩展性。 3. **EL（Expression Language）与Bean** ...

    JSF书，源代码，PPT

    Facelets允许动态生成和管理视图，提供了模板继承和复合组件等功能。 4. **控制器**：JSF的控制器主要由Managed Beans实现，它们是Java类，包含业务逻辑和状态管理。Managed Beans可以通过EL（Expression Language...

    jsf 1.2 myfaces1.2.7 richfaces3.3.1 facelets1.2 所有的最新包

    在开发过程中，你可以利用MyFaces和RichFaces提供的组件来快速构建界面，同时利用Facelets的模板和复合组件功能来组织和重用视图代码。这些包的组合使用，可以帮助你构建出功能强大、交互性强的Web应用程序。

    Core JavaServer Faces 3rd Edition JSF核心编程第三版

    - **定义**：JavaServer Faces (JSF) 是Java EE标准技术之一，用于构建Web用户界面。它提供了一套完整的框架来开发服务器端应用程序，能够将视觉展示与应用逻辑清晰地分离。 - **特点**： - 强大的框架支持，便于...

    petstore:一个解释 JSF 特性使用的启动示例项目

    复合组件和模板 JSF 中的消息传递 人脸验证器 显示了 JSF 2.2 的一些新特性 要求 *该项目已经在Tomcat 7上测试过，应该兼容所有的Servlet 3.0容器。 如果将它与作为 GlassFish 或 JBoss AS 的应用程序服务器一起使用...

    JavaServer.Faces.3rd.Edition

    - **复合组件**: 开发者现在可以轻松创建和使用复合组件，以提高代码重用性和可维护性。 #### 三、书籍主要内容概览 - **Facelets标签与页面布局**: 介绍如何使用Facelets进行页面布局设计，包括组件的嵌套、条件...

    JavaServer Faces 2.0, The Complete Reference源码

    9. **Composite Components**：这是一种自定义组件的新方式，允许开发者组合现有组件创建复合组件，提高开发效率。 10. **CDI Events**：JSF 2.0与CDI集成，支持事件发布和监听，使得组件间的通信更为灵活。 通过...

    Java.EE.7.Essentials

    JSF 2.2（章节三）提供了Facelets模板和资源处理，支持复合组件和Ajax，以及新的导航规则和JSF流。 3. RESTful Web Services：允许开发者以REST架构风格创建Web服务，并绑定HTTP方法到资源，同时支持资源的多种表示...

    Java EE 7 Recipes

    - 本章将介绍Facelets的基础知识，如标签库、模板和复合组件等。 - 使用Facelets可以显著提高JSF应用程序的开发效率，同时保持良好的可读性和可维护性。 ##### 5. **JavaServer Faces Standard Components** - JSF...

    try_java_ee7:使用 Java EE 7 构建 Web 应用程序

    复合组件 事件· veiwAction 阿贾克斯 CDI 1.1 请求、视图、会话范围的使用 使用事务 使用产品 日本特许经营协会 实体定义 模式生成/来自 Persicetence.xml 的初始数据输入 单元测试 使用 CDI 单元进行测试 由 ...

    facelets技术文档

    Facelets 非常适合 JSF 最后，专为 JSF 设计的视图技术！...在这篇文章中，JSF 的热心支持者 Rick Hightower 介绍了关于 Facelets 他最喜欢的内容：容易的 HTML 样式的模板化和可重用的复合组件。

    实用J2EE设计模式编程指南

    - **观察者模式**：J2EE中的事件驱动模型就应用了观察者模式，例如JSF（JavaServer Faces）中的组件和监听器。 **3. EJB设计模式** - **会话bean和消息驱动bean**：会话bean用于客户端交互，而消息驱动bean用于处理...

    三大框架SSH)面试题

    - **组件模型：** JSF提供了一套标准的UI组件，可以方便地构建用户界面。 - **事件驱动：** 基于事件驱动的开发模式，简化了前端与后端之间的交互。 - **生命周期管理：** JSF框架管理整个请求-响应周期，包括渲染、...

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