JSF2之模板和复合组件

最新推荐文章于 2021-11-12 12:03:48 发布
最新推荐文章于 2021-11-12 12:03:48 发布
阅读量980 收藏
点赞数
文章标签： JSF 模板 复合模板
  模板和复合组件是 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">
		©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 属性来访问父组件的属性，这一点极大地方便了组件的嵌套。 
     但是，无需严格依赖于嵌套组件中的父属性，可以将属性从父组件传递给其内嵌套的组件，与向其他任何组件（不管嵌套与否）传递属性无异。 
     是选择实现组件-显式属性，还是选择依赖于父属性，这是耦合和方便性之间的权衡问题。

韭菜猫骑士
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
结合HTML5和JSF2技术定制复合组件 (2013年)
05-29
提出一种通过引入JSF2框架支持，利用JSF2的新技术与HTML5相结合开发复合组件的方法．以一组具有拖放功能的drag和drop复合组件的实现为例，说明JSF2和HTML5技术相结合的工作原理和实现机制．通过所提供的定制复合组件方法，使开发者可以高效地利用JSF2和HTML5，实现易于修改和扩展的用户界面组件；开发人员根据自己需要的功能可以自行构建JSF2组件，定制可复用的HTML5表现组件，提高Web应用程序的开发效率和质量．
JSF-on-Spring-Boot:小型模板项目，可快速开始使用JSF和Spring Boot
05-20
Spring Boot上的JSF 小型模板项目可帮助您快速开始使用JSF和Spring Boot。 您可能也有兴趣阅读上的描述该项目的。 运行Main.java类以启动服务器。 对应的URL是 。 另外，项目“ Understanding Scopes”展示了JSF范围之间的差异（包括更奇特的sopes，例如@CustomScope或@NoneScope）。 他们还研究了在JSF类中使用Spring类的几种方法（另请参见我的文章 ）。 重要的提示： 如果显示的JSF视图没有后端的数据，请检查IDE是否将类文件放入错误的文件夹中。 例如，默认情况下，Eclipse将类文件放入错误的目录中。 您必须将它们从“ / bin”移动到“ / src / webapp / WEB-INF / classes”。 pom.xml和.gradle文件是一个好的开始，但还不完善。 为了使事情变
jsf facelets模板的使用
专注=成功
03-07 394
指定使用哪个模版文件，然后通过 对模版文件中每个可供插入的“ 锚点”进行定义。 在运行期，具体的内容将会被插入到 中定义的锚点位置。 和 ui:component 一样，这个标签以外的内容将被编译器忽略 , 不会显示在视图中 , 和 ui:component 不同的是， ui:composition 不会在组件树上创建节点。 这里以及这里以前的内容将被忽略 这里以及...
JSF标签与参数使用说明
weixin_34095889的博客
01-05 481
JSF标签与参数使用说明 一、<f:actionListener> 1:参数有以下： binding,class,for,id,parent,rendered,renderertype,transient,type 专有特性有type,binding. 2:功能说明： 注册一个与它关联的最近的一UI元件的A...
jsf用于页面判断的标签_用于操作和导航的JSF命令组件标签
从零开始的教程世界
07-09 260
jsf用于页面判断的标签JSF provides two command component tags for performing action and navigation. They are JSF提供了两个命令组件标签，用于执行操作和导航。 他们是 <h:commandButton> tag <h：commandButton>标记 <h:commandLin...
使用JSF 2.2功能来开发可滚动，可延迟加载的Ajax数据表
最佳 Java 编程
05-18 225
这次，我想与您分享我最近从JSF 2.2功能中学到的知识。 为此，我决定创建一个简单的ajax，可滚动的延迟加载数据表。 请注意， 绝不这是相当大的库如Primefaces ， RichFaces的或ICEFaces的 。 这只是为了告诉您我学到了什么。 （当然，如果您愿意，没有人可以阻止您使用它）。 这个概念 请允许我先告诉您这个概念，或者如果您愿意的话，请告诉您这种情况。 实际上...
JSF 简介
Lucifinil的专栏
11-07 189
JSF页面 当用户制作Facelets页面时，会将JSF标签添加到一个XHTML页面中。一个XHTML页面仅仅是是HTML页面，该页面同时也是符合标准的XML。我们为Facelets页面使用扩展名.xhtml。 &lt;html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"&...
JSF 中模板(template)标签指令的使用
code袁的博客
11-12 594
JSF 中模板(template)标签指令的使用 一、JSF 的小面板(Facelets)标签指令 二、网页模板系统定义的宏观关系 三、JSF 模板面板的创建 这个网页从上到下划分为 3 个版块或分区，则分别定义 header.xhtml、 content.xhtml 和 footer.xhtml 文件，以定义排版格式。 3.1：header.xhtml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W
JSF 2 复合组件的使用
我的博客
10-13 3187
JSF 2 复合组件让我们能轻松的将视图中的某一小块提取出来放进一个独立的文件当中作为一个可重用可配置的组件使用。要使用复合组件，需要在中使用”xmlns:组件包名”属性声明一个名称空间。此名称空间通常为 http://java.sun.com/jsf/composite 外加目录名，这个目录就是 resources 目录下组件所在的目录名。组件包名可以自己定义，组件名是其声明的目录下 XHTML
jsf前端login界面
12-23
本存档系jsf登陆界面初级xhtml前端界面以及css模板，含部分未完全ajax部分
JSF2和RICHFACES4使用指南
12-03
JSF2和RICHFACES4使用指南
JSFCompositeComponent:JSF复合组件
05-02
JSFCompositeComponent JSF复合组件
JSF2和RICHFASES4使用指南
10-26
JSF2和RICHFASES4使用指南，JSF（Java Server Faces)是JCP标准化组织通过的Web应用开发标准框架，RichFaces是RedHat公司的JBoss社区开发的一套基于JSF的UI组件库，支持异步请求功能
JSF2自定义组件手记
03-22
NULL 博文链接：https://beanil.iteye.com/blog/904114
2014年311教育学专业基础综合答案解析.pdf
04-24
教育学考研，考研真题，全国硕士研究生统一考试教育学专业基础综合真题及解析，311历年真题，参考答案，答案解析。教育学统考。
大语言模型安全测试方法
04-24
4月16日联合国日内瓦总部万国宫，由世界数字技术院（WDTA）与云安全联盟大中华区（CSA GCR）联合主办第27届联合国科技大会AI边会上，世界数字技术院（WDTA）发布了两项具有重要意义的国际标准：“生成式人工智能应用安全测试标准”和“大语言模型安全测试方法”。这是国际组织首次在生成式AI应用安全、大模型安全领域发布国际标准，为业界提供了统一的测试框架，标准的发布将对人工智能领域产生深远影响，推动人工智能技术的安全、可靠发展。 这两大标准由云安全联盟大中华区研究院副院长黄连金带领的专家团队编制而成，他们来自CSA大中华区、OpenAI、蚂蚁集团、谷歌、微软、亚马逊、英伟达、OPPO、科大讯飞、百度、腾讯、加州大学伯克利分校、芝加哥大学、香港科技大学等数十家单位，体现了业界的广泛协作与集体智慧。 云安全联盟大中华区主席、世界数字技术院执行理事长李雨航院士发布时介绍，“生成式人工智能应用安全测试标准”为测试和验证生成式AI应用的安全性提供了一个框架，特别是那些使用大语言模型构建的应用程序。它定义了人工智能应用程序架构每一层的测试和验证范围，确保AI应用各个方面都经过严格的安全性和合规性
基于ssm电商网站的设计与实现(部署视频)_kaic.zip
04-24
目 录 目 录 1 绪论 1.1 研究背景 1.2 目的和意义 1.3 论文结构安排 2 相关技术 2.1 SSM框架介绍 2.2 B/S结构介绍 2.3 MYSQL数据库介绍 3 系统分析 3.1 系统可行性分析 3.1.1 技术可行性分析 3.1.2 经济可行性分析 3.1.3 运行可行性分析 3.2 系统性能分析 3.2.1 易用性指标 3.2.2 可扩展性指标 3.2.3 健壮性指标 3.2.4 安全性指标 3.3 系统流程分析 3.3.1 操作流程分析 3.3.2 登录流程分析 3.3.3 信息添加流程分析 3.3.4 信息删除流程分析 4 系统设计 4.1 系统概要设计 4.2 系统功能结构设计 4.3 数据库设计 4.3.1 数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1用户信息管理 5.2 商品信息管理 5.3商品分类管理 5.1商品资讯管理 6 系统测试 6.1 系统测试的特点  6.2 系统功能测试 6.2.1 登录功能测试 6.2.2 添加类别功能测试 6.3 测试结果分析 结 论 致 谢 参考文献
Comfast CF-924AC V3无线网卡驱动
最新发布
04-24
https://editor.csdn.net/md/?articleId=137978326文章对应USB 1300M无线网卡驱动，使用方式请参考博文。本驱动为博文对应的RDK X3平台所用，其它平台根据博文链接下载源码编译。
jsf和springmvc
08-15
2. 组件化 vs 注解驱动：JSF采用组件化编程模型，提供了丰富的UI组件库，并使用XML配置来定义页面和组件之间的关系。而Spring MVC则更加注重注解驱动的开发风格，通过注解将请求映射到处理方法，并使用模板引擎来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值