- 浏览: 1089919 次
- 性别:
- 来自: 成都
文章分类
最新评论
-
skyesx:
这是2PC实现,更常用的是一个柔性事务的实现,可以参考http ...
Spring分布式事务实现 -
ddbird:
这第一句就不严谨“分布式事务是指操作多个数据库之间的事务”,显 ...
Spring分布式事务实现 -
呵呵6666:
基于互联网支付系统的微服务架构分布式事务解决方案http:// ...
Spring分布式事务实现 -
小黄牛:
写得不错,交流群:472213887
Spring分布式事务实现 -
jiaoqf321456:
这明明是用的apache的压缩,给ant.jar有半毛钱关系吗 ...
使用ant.jar进行文件zip压缩
模板和复合组件是 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
说明:
模板通过 <ui:insert> 标记将内容插入到布局中。如为 <ui:insert> 标记指定了主体,JSF 会将此标记的主体作为默认内容。借助 <ui:define> 标记,使用此模板的那些封装可以定义内容或者覆盖默认内容。
(2)、使用模板
a、header:/sections/share/header.xhtml
b、footer:/sections/share/footer.xhtml
c、hello:/views/hello.xhtml
如果您想在hello.xhtml中,改变一下footer部分,可以用<ui:define name="foot">来完成,在<ui:composition>中增加:
说明:
模板功能背后的概念十分简单。定义一个模板来封装在多个视图中常见的功能。每个视图由一个组装和一个模板组成。
当 JSF 创建视图时,它加载组装的模板,然后将由组装所定义的内容插入模板。
JSF 2 鼓励使用较小的视图段组装视图。模板封装了常见功能,进而将视图分成了更小的块。JSF 2 还提供了一个 <ui:include> 标记,这个标记可以让您将视图进一步分成更小的功能块。使用组合的方式,遵循 DRY 原则。就像下面这样用:
二、复合组件
JSF 2 综合了 Facelets 模板、资源处理和一个简单的命名约定来实现复合组件。复合组件,正如其名字所示,让您能够从现有组件组装一个新组件。
一般情况下,是在 resources 目录下的 XHTML 内实现复合组件,并将它们完全通过约定链接到一个名称空间和标记。
要使用复合组件,需要声明一个名称空间并使用标记。此名称空间通常为 http://java.sun.com/jsf/composite 外加目录名,这个目录就是 resources 目录下组件所在之处。组件名本身是其 XHTML 文件的名字,只不过没有 .xhtml 扩展名。这种约定消除了对配置的需要。
(1)、icon 组件:一个简单的复合组件
a、组件定义文件:(/resources/components/util/icon.xhtml)
说明:
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组件
(2)、login 组件:一个完全可配置的组件
a、组件定义:/resources/components/util/login.xhtml
在 login 组件的界面,我已经在 loginButton 名称下公开了 Log In 按钮。该名称所针对的是位于 form 表单内的 Log In 按钮,因此 targets 属性的值为:form:loginButton。
Log In 按钮相关联的动作侦听器:
b、使用组件
要在faces-config.xml中加载资源文件:
说明:
你还可以实现实现嵌套组件,即在定义组件时,使用已定义过的组件。表达式 #{cc.parent.attrs.location.ATTRIBUTE_NAME} 的使用。可以使用一个复合组件的 parent 属性来访问父组件的属性,这一点极大地方便了组件的嵌套。
但是,无需严格依赖于嵌套组件中的父属性,可以将属性从父组件传递给其内嵌套的组件,与向其他任何组件(不管嵌套与否)传递属性无异。
是选择实现组件-显式属性,还是选择依赖于父属性,这是耦合和方便性之间的权衡问题。
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"> ©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}"/> <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 属性来访问父组件的属性,这一点极大地方便了组件的嵌套。
但是,无需严格依赖于嵌套组件中的父属性,可以将属性从父组件传递给其内嵌套的组件,与向其他任何组件(不管嵌套与否)传递属性无异。
是选择实现组件-显式属性,还是选择依赖于父属性,这是耦合和方便性之间的权衡问题。
评论
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一样的吗?
发表评论
-
JSF2与Spring集成
2010-03-03 09:43 3434一、配置部分 1、applicationContext.xml ... -
关于JSF2.0(Java™Server Faces 2.0)
2010-03-01 09:58 8000一、资源 (1)JSF主页: https://ja ... -
wicket之实现IDataProvider接口,只查询当前页数据
2009-02-21 17:17 30751.html文件 <html> <he ... -
tapestry5.0之页面组件定义/页间传值/Application State Object
2009-02-18 13:04 3594一、页面组件定义方式 1.在模板(tml)文件中明确定义 &l ... -
tapestry5.0之Grid
2009-02-17 16:55 33121.tml文件 <t:layout xmlns:t=& ... -
Tapestry5自定义组件
2009-02-11 12:27 5375一、普通组件 1.java文件 package com.log ... -
Maven2 + tapestry5.0.18 + spring2 + hibernate3.2
2009-02-10 09:49 2907用quickstart生成Tapestry架构,再进行相 ... -
重定义wicket分页组件PagingNavigator
2008-11-05 13:06 35931.Navigator.java package com. ... -
wicket1.3.5+spring2.5+hibernate3.2
2008-10-28 21:55 1861不喜欢Tapestry4要用hivemind,wicke ... -
Wicket 1.5和Tapestry 5比较
2008-10-24 16:59 28461.Build Tool 对于很多开发者来说,bu ... -
Tapestry4 Spring
2008-05-31 12:36 2209How can you reference Sprin ... -
Tapestry4实现文件导出功能
2008-05-09 12:50 1455@InjectObject("service:tap ...
相关推荐
JSF分页组件2,JSF分页组件2
一个纯JSF1.2写的日历组件,想了解JSF组件编写的可以用来参考
以一组具有拖放功能的drag和drop复合组件的实现为例,说明JSF2和HTML5技术相结合的工作原理和实现机制.通过所提供的定制复合组件方法,使开发者可以高效地利用JSF2和HTML5,实现易于修改和扩展的用户界面组件;开发...
JSF创建自定义组件
NULL 博文链接:https://beanil.iteye.com/blog/904114
经典JSF网店模板开发学习经典JSF网店模板开发学习catalog
JSF2.0实战 - 4、自定义组件 示例代码
JSF自定义组件学习的好教材
1. JSF生命周期与组件概述 1.1 JSF生命周期 1.2 概述自定义组件 2. 简单实例 2.1 编码、解码 2.2 组件标签 2.3 使用自定义组件 2.4 自定义Renderer
NULL 博文链接:https://madihe-126-com.iteye.com/blog/266276
深入讨论JSF中Tree2组件使用方法。
JSF UI 组件详解
JSF是一种用于构建Java ... 包含JSP页面的JSF应用程序也使用由为了表现UI组件和在页面上的其他对象的JSF技术而定义的标准的tag库。 Java Server Faces技术的重要开发框架 sun-ri、myfaces、icefaces、richfaces、seam
本人亲身实践,自己完成的jsf时间组件的替换。
这一个是以前写的 建议建议不要下载 不好 不要下载 不好不要下载
JSF入门详细资料(PDF),包括JSF入门中文版,JSF Web应用实战开发,以及JSF2,JSF入门必配学习资料
Ext组件转化成JSF Ext组件转化成JSF ext组件转化成JSF Ext组件转化成JSF Ext组件转化成JSF ext组件转化成JSF
而实际应用中很多时候需要上传文件,为了方便开发,我做了一个基于JSF2.0的文件上传组件,上传使用的是Apache 的commons-fileupload组件,我已经将commons-fileupload-1.2.1.jar和commons-io-1.3.2.jar打包成一个...
JSF2和RICHFASES4使用指南,JSF(Java Server Faces)是JCP标准化组织通过的Web应用开发标准框架,RichFaces是RedHat公司的JBoss社区开发的一套基于JSF的UI组件库,支持异步请求功能
JSF2和RICHFACES4使用指南