JavaEE5学习笔记14-JSF集成Facelets使用经验总结

suhuanzheng7784877

浏览: 706625 次
性别:
来自: 北京

最近访客更多访客>>

yangguangpiaosa

yekui

gaofeng393

s929498110

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 读金庸故事，品程序人生
浏览量：47819

文章分类

社区版块

存档分类

博客分类：

JavaWeb

JSF UI XHTML SUN HTML

1. Facelets就像tiles、sitemesh一样，以为了JSF模板布局而提出的页面模板框架，使用Facelets，先将项目页面的整体样式模板设计好（比如采用一般的上、中、下结构）。之后项目的其他页面布局只需要声明采用预先定义好的布局框架即可。使得用了最少的页面代码完成了整个系统样式的统一。

2. JSF集成facelets的准备

首先下载facelets相关的jar包，jsf-facelets.jar，在https://facelets.dev.java.net/就可以得到它。

修改web.xml,加入如下内容

<context-param>
		<description>指定facelets支持的后缀</description>
		<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
		<param-value>.xhtml</param-value>
	</context-param>

就是说，凡是xhtml文件结尾的都支持可以使用定义好的facelets模板。修改JSF配置文件，增加如下内容

<!--配置facelets-->
	<application>
		<locale-config>
			<default-locale>zh_CN</default-locale>
		</locale-config>	<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
	</application>

此处是告诉JSF，采用FaceletViewHandler进行视图处理器，这个处理器在JSF生命周期的第1阶段和第6阶段生效。也就是说视图创建阶段和返回响应阶段，将布局特效夹杂其中。这样环境算是配好了。

模板页面

我们先定义一个模板页面，这个页面就是所有页面布局的基础，其他页面呈现出来的效果都是基于此模板页面的。代码如下：

layout.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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">
	<head>
		<title><ui:insert name="title">Facelets模板</ui:insert>
		</title>
	</head>
	<body bgcolor="#ffffff" text="#000000" link="#023264" alink="#023264"
		vlink="#023264">

		<table border="0" width="768px" align="center">
			<tr>
				<td colspan="2">
					<ui:insert name="header">
						<ui:include src="header.xhtml" />
					</ui:insert>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<hr />
				</td>
			</tr>
			<tr>
				<td width="140" valign="top">
					<ui:insert name="menu">
						<ui:include src="menu.xhtml" />
					</ui:insert>
				</td>
				<td valign="middle" align="center">
					<ui:insert name="body">
						<ui:include src="body.xhtml" />
					</ui:insert>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<hr />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<ui:insert name="footer">
						<ui:include src="footer.xhtml" />
					</ui:insert>
				</td>
			</tr>
		</table>
	</body>
</html>

大致的布局如下效果

也就是经典的上、左右、下布局。

页面头header.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">
<table width="100%" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="http://www.sun.com"> <img
					src="/JSJDemo/pic/java_logo.bmp" alt="" border="0" height="100"
					width="100" /> </a>
		</td>
		<td>
			<font size="5" color="red">JSF+Spring+JPA</font>
		</td>
		<td>
			<a href="http://www.sun.com"> <img
					src="/JSJDemo/pic/sun_logo.bmp" alt="" border="0" height="100"
					width="100" /> </a>
		</td>
	</tr>
</table>

页面底部

<?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">
<table width="100%" border="0" align="center" cellpadding="1" cellspacing="0">
	<tr>
		<td height="20" align="center">
			<div align="center">
				<font color="#023264" size="3">Copyright &copy; 2007-2008,
					QJYONG All rights reserved.<br /> <a href="#">联系我们</a> 
				</font>
			</div>
		</td>
	</tr>
</table>

左页面menu.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:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core" xml:lang="utf-8" lang="utf-8">

	<body>
		<h:form id="serchFrom">
			<p>
				--功能菜单--
				<br />
				<br />
				<h:commandLink action="#{teamAction.serchAll}" value="【球队管理】">
				</h:commandLink>
				<br />
				<br />
				<h:commandLink action="#{playerAction.serchAll}" value="【球员管理】">
				</h:commandLink>
				<br />
				<br />
				<h:commandLink action="#{nationalityAction.serchAll}" value="【国籍管理】">
				</h:commandLink>
			</p>
		</h:form>
	</body>
</html>

右内容页面body.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">

<p>
	<em><font size="6" color="gray"><strong>欢迎访问JSF页面布局方案</strong>
	</font> </em>
</p>

以后其他页面的布局也就是差不多这个样式。一般有变化的都是中间那个body的内容。

自定义一个页面，套用定义好的facelets

allPlayer.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:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core">

	<!-- 调用template/layout.xhtml模板 -->
	<ui:composition template="../layout/layout.xhtml">
		<ui:define name="title">所有的队员</ui:define>
		<ui:define name="body">
			<c:set var="ctxPath"
				value="#{facesContext.externalContext.requestContextPath}" />
			<h:form id="form">
				<br />
				<h:outputLink value="#{ctxPath}/mangerTeam/addPlayer.faces">
					<h:outputText value="【添加运动员】" />
				</h:outputLink>
				<h:outputLink value="#{ctxPath}/mangerTeam/serchPlayer.faces">
					<h:outputText value="【查询运动员】" />
				</h:outputLink>
				<hr style="color: yellow" />
				<br />
				<table border="1" cellpadding="1" cellspacing="1"
					bordercolor="#0000FF">
					<tr>
						<td width="41">
							<div align="center">
								主键
							</div>
						</td>
						<td width="155">
							<div align="center">
								姓名
							</div>
						</td>
						<td width="234">
							<div align="center">
								操作
							</div>
						</td>
					</tr>

					<c:forEach items="#{playerAction.playersVOList}" var="playersVOVar">
						<tr>
							<td>
								<h:outputText value="#{playersVOVar.id}"></h:outputText>
							</td>
							<td>
								<h:commandLink action="#{playerAction.detail}"
									value="#{playersVOVar.name}">
									<f:param name="id" value="#{playersVOVar.id}" />
								</h:commandLink>
							</td>
							<td>

								<h:commandLink action="#{playerAction.beforUpdate}"
									value="【修改运动员】">
									<f:param name="id" value="#{playersVOVar.id}" />
								</h:commandLink>
								|
								<h:commandLink action="#{playerAction.delete}" value="【删除运动员】">
									<f:param name="id" value="#{playersVOVar.id}" />
								</h:commandLink>
							</td>
						</tr>
					</c:forEach>
					<tr>
						<td colspan="3">
							
							<c:forEach var="nowPage1" begin="1" step="1" end="#{playerAction.pageNum}">
								<h:commandLink action="#{playerAction.serchAll}"
									value="[${nowPage1}]">
									<f:param name="myNowPage" value="${nowPage1}" />
								</h:commandLink>
							</c:forEach>
							
						</td>
					</tr>
				</table>
			</h:form>
		</ui:define>
	</ui:composition>
</html>

需要说明的是：<ui:composition template="../layout/layout.xhtml">是代表引用相关模板的意思。在定义模板的时候<ui:insert name= "body" >代表着header域，如果自己的页面想替换body域，就可以在自己的页面引用完模板后使用<ui:define name="body">对原模板的内容进行内容替换。例如这里就是替换了body的内容。展示效果如下

如何~~~整体样式还是和模板中描述得差不多吧，只是body域的内容替换成自己的了。还有一点要说明的就是xhtml对于标签声明的方式和JSP有一些差异

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jstl/core">

对页面所用到的标签进行声明。

查看图片附件

分享到：

英语飙升的好方法(转) | JavaEE5学习笔记13-JSF集成AJAX使用经验总 ...

2011-03-24 12:06
浏览 3177
评论(0)
分类:Web前端
查看更多

发表评论

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

相关推荐

无需编写任何代码即可创建应用程序：Deepseek-R1 和 RooCode AI 编码代理.pdf: deepseek最新资讯、配置方法、使用技巧，持续更新中

Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑: Heric拓扑并网离网仿真模型：PR单环控制，SogIPLL锁相环及LCL滤波器共模电流抑制技术解析,基于Heric拓扑的离网并网仿真模型研究与应用分析：PR单环控制与Sogipll锁相环的共模电流抑制效能,#Heric拓扑并离网仿真模型（plecs）逆变器拓扑为：heric拓扑。仿真说明： 1.离网时支持非单位功率因数负载。 2.并网时支持功率因数调节。 3.具有共模电流抑制能力（共模电压稳定在Udc 2）。此外，采用PR单环控制，具有sogipll锁相环，lcl滤波器。注：（V0004） Plecs版本4.7.3及以上 ,Heric拓扑; 离网仿真; 并网仿真; 非单位功率因数负载; 功率因数调节; 共模电流抑制; 共模电压稳定; PR单环控制; sogipll锁相环; lcl滤波器; Plecs版本4.7.3及以上,Heric拓扑：离网并网仿真模型，支持非单位功率因数与共模电流抑制

培训机构客户管理系统 2024免费JAVA微信小程序毕设: 2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。开发工具：Idea+VSCode+微信开发者工具。

基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm: 基于SMIC 40nm工艺库的先进芯片技术,SMIC 40nm工艺库技术细节揭秘：引领半导体产业新革命,smic40nm工艺库 ,smic40nm; 工艺库; 芯片制造; 纳米技术,SMIC 40nm工艺库：领先技术驱动的集成电路设计基础

2013年上半年软件设计师上午题-真题及答案解析: 2013年上半年软件设计师上午题-真题及答案解析

淮南市乡镇边界，shp格式: shp格式，可直接导入arcgis使用

ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,RO: ROS下的移动机器人路径规划算法：基于强化学习算法DQN、DDPG、SAC及TD3的实践与应用,ROS系统中基于强化学习算法的移动机器人路径规划策略研究：应用DQN、DDPG、SAC及TD3算法,ROS下的移动机器人路径规划算法，使用的是强化学习算法 DQN DDPG SAC TD3等 ,ROS; 移动机器人; 路径规划算法; DQN; DDPG; SAC; TD3,ROS强化学习移动机器人路径规划算法研究

粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参: 粒子群优化算法精准辨识锂电池二阶RC模型参数：高仿真精度下的SOC估计铺垫,粒子群优化算法精准辨识锂电池二阶RC模型参数：仿真验证与SOC估计铺垫,使用粒子群优化算法（PSO）辨识锂电池二阶RC模型参数（附MATLAB代码）使用粒子群优化算法来辨识锂离子电池二阶RC模型的参数。将粒子群优化算法寻找到的最优参数代入二阶RC模型进行仿真，经过验证，端电压的估计误差小于0.1%，说明粒子群优化算法辨识得到的参数具有较高的精度，为锂离子电池SOC的估计做铺垫。 ,关键词：粒子群优化算法（PSO）; 锂电池二阶RC模型参数辨识; MATLAB代码; 端电压估计误差; 锂离子电池SOC估计。,PSO算法优化锂电池二阶RC模型参数：高精度仿真与MATLAB代码实现

selenium环境搭建-谷歌浏览器驱动: selenium环境搭建-谷歌浏览器驱动

35页-华为智慧社区商业解决方案.pdf: 在当今科技日新月异的时代，智慧社区的概念正悄然改变着我们的生活方式。它不仅仅是一个居住的空间，更是一个集成了先进科技、便捷服务与人文关怀的综合性生态系统。以下是对智慧社区整体解决方案的精炼融合，旨在展现其知识性、趣味性与吸引力。一、智慧社区的科技魅力智慧社区以智能化设备为核心，通过综合运用物联网、大数据、云计算等技术，实现了社区管理的智能化与高效化。门禁系统采用面部识别技术，让居民无需手动操作即可轻松进出；停车管理智能化，不仅提高了停车效率，还大大减少了找车位的烦恼。同时，安防报警系统能够实时监测家中安全状况，一旦有异常情况，立即联动物业进行处理。此外，智能家居系统更是将便捷性发挥到了极致，通过手机APP即可远程控制家中的灯光、窗帘、空调等设备，让居民随时随地享受舒适生活。视频监控与可视对讲系统的结合，不仅提升了社区的安全系数，还让居民能够实时查看家中情况，与访客进行视频通话，大大增强了居住的安心感。而电子巡更、公共广播等系统的运用，则进一步保障了社区的治安稳定与信息传递的及时性。这些智能化设备的集成运用，不仅提高了社区的管理效率，更让居民感受到了科技带来的便捷与舒适。二、智慧社区的增值服务与人文关怀智慧社区不仅仅关注科技的运用，更注重为居民提供多元化的增值服务与人文关怀。社区内设有互动LED像素灯、顶层花园控制喷泉等创意设施，不仅美化了社区环境，还增强了居民的归属感与幸福感。同时，社区还提供了智能家居的可选追加项，如空气净化器、远程监控摄像机等，让居民能够根据自己的需求进行个性化选择。智慧社区还充分利用大数据技术，对居民的行为数据进行收集与分析，为居民提供精准化的营销服务。无论是周边的商业信息推送，还是个性化的生活建议，都能让居民感受到社区的智慧与贴心。此外，社区还注重培养居民的环保意识与节能意识，通过智能照明、智能温控等系统的运用，鼓励居民节约资源、保护环境。三、智慧社区的未来发展与无限可能智慧社区的未来发展充满了无限可能。随着技术的不断进步与创新，智慧社区将朝着更加智能化、融合化的方向发展。比如，利用人工智能技术进行社区管理与服务，将能够进一步提升社区的智能化水平；而5G、物联网等新技术的运用，则将让智慧社区的连接更加紧密、服务更加高效。同时，智慧社区还将更加注重居民的体验与需求，通过不断优化智能化设备的功能与服务，让居民享受到更加便捷、舒适的生活。未来，智慧社区将成为人们追求高品质生活的重要选择之一，它不仅是一个居住的空间，更是一个融合了科技、服务、人文关怀的综合性生态系统，让人们的生活更加美好、更加精彩。综上所述，智慧社区整体解决方案以其科技魅力、增值服务与人文关怀以及未来发展潜力，正吸引着越来越多的关注与认可。它不仅能够提升社区的管理效率与居民的生活品质，更能够为社区的可持续发展注入新的活力与动力。

PowerSettingsExplorer.rar: PowerSettingsExplorer.rar 电脑的电源管理软件，明白的不多说。自己搜索即可知道。

2025年开源人工智能：关键参与者与预测.pdf: deepseek最新资讯，配置方法，使用技巧，持续更新中

DeepSeek 发布 Janus Pro AI 图像生成器 – 开源且免费.pdf: deepseek最新资讯、配置方法、使用技巧，持续更新中

消息中间件rabbitmq-server: RabbitMQ 是一个开源的消息代理（Message Broker），实现了 AMQP（Advanced Message Queuing Protocol）协议，用于在分布式系统中实现高效、可靠的消息传递。

西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践 ,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代: 西门子S7-1200与汇川PLC新通信选择：Ethernet IP通信的突破与优势，功能安全及精准同步的创新实践。,西门子S7-1200与汇川PLC通信新选择：Ethernet IP通信方案亮相，替代Modbus TCP实现更高级功能与安全控制。,西门子PLC和汇川PLC新通信选择-西门子S7-1200 1500系列PLC也开始支持Ethernet IP通信了。这为西门子系列的PLC和包括汇川AM400 600等Codesys系PLC的通信提供了新的解决方案。当前两者之间的通信大多采用ModBus TCP通信。 Modbus TCP和EtherNet IP的区别主要是应用层不相同，ModbusTCP的应用层采用Modbus协议，而EtherNetIP采用CIP协议，这两种工业以太网的数据链路层采用的是CSMACCD，因此是标准的以太网，另外，这两种工业以太网的网络层和传输层采用TCPIP协议族。还有一个区别是，Modbus协议中迄今没有协议来完成功能安全、高精度同步和运功控制等，而EtherNet IP有CIPSatety、ClIP Sync和ClPMotion来

自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）: 自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法：系统估计效果展示与特性分析（含MATLAB代码与Excel数据）,自适应无迹卡尔曼滤波AUKF算法配套文件包含MATLAB代码+excel数据+学习资料估计效果与系统特性有关，图片展示为一复杂系统估计效果 ,AUKF算法; MATLAB代码; excel数据; 学习资料; 估计效果; 系统特性。,自适应无迹卡尔曼滤波AUKF算法：MATLAB代码与学习资料

基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关: 基于MATLAB Simscape的IGBT开关特性模型：揭示开关损耗、米勒平台及瞬态行为的分析工具,IGBT开关特性模型与MATLAB Simscape模拟：深入理解开关行为及损耗数据,IGBT开关特性模型，MATLAB Simscape模型。该模型展示了IGBT的详细的开关模型，用于创建开关损耗列表数据。有助于理解IGBT米勒平台、瞬态开关行为。也可以用于MOOSFET。 ,IGBT开关模型; MATLAB Simscape; 开关损耗; 米勒平台; 瞬态开关行为; MOOSFET。,MATLAB Simscape中IGBT精细开关模型：揭示米勒平台与瞬态行为

基于卷积神经网络CNN的多输入单输出数据回归预测-含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解-附代码注释、指标评估及Excel数据处: 基于卷积神经网络CNN的多输入单输出数据回归预测——含详细注释与多种评估指标（R2、MAE、MBE）,基于卷积神经网络CNN的多输入单输出数据回归预测模型详解——附代码注释、指标评估及Excel数据处理方法,基于卷积神经网络CNN的数据回归预测多输入单输出预测代码含详细注释，不负责数据存入Excel，替方便，指标计算有决定系数R2，平均绝对误差MAE，平均相对误差MBE ,基于卷积神经网络CNN; 数据回归预测; 多输入单输出; 详细注释; Excel存储; 指标计算(R2; MAE; MBE); 不负责。,基于CNN的卷积数据回归预测模型：多输入单输出代码详解与性能评估

四六级词汇系统 2024免费JAVA微信小程序毕设: 2024免费微信小程序毕业设计成品，包括源码+数据库+往届论文资料，附带启动教程和安装包。启动教程：https://www.bilibili.com/video/BV1BfB2YYEnS 讲解视频：https://www.bilibili.com/video/BV1BVKMeZEYr 技术栈：Uniapp+Vue.js+SpringBoot+MySQL。开发工具：Idea+VSCode+微信开发者工具。

最近访客 更多访客>>

博主相关

博客专栏

文章分类

社区版块

存档分类

最新评论