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

suhuanzheng7784877

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

最近访客更多访客>>

yangguangpiaosa

yekui

gaofeng393

s929498110

博主相关

博客

微博

相册

留言

关于我

博客专栏

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

文章分类

社区版块

存档分类

博客分类：

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">

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