`
suhuanzheng7784877
  • 浏览: 702486 次
  • 性别: Icon_minigender_1
  • 来自: 北京
博客专栏
Ff8d036b-05a9-33b5-828a-2633bb68b7e6
读金庸故事,品程序人生
浏览量:47708
社区版块
存档分类
最新评论

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

阅读更多

1.       Facelets就像tilessitemesh一样,以为了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">

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

 

  • 大小: 20.6 KB
  • 大小: 25.3 KB
  • 大小: 62.7 KB
分享到:
评论

相关推荐

    JavaEE5学习笔记07-Web层与EJB集成总结

    ### JavaEE5学习笔记07-Web层与EJB集成总结 #### 一、JavaEE5框架中的Web层与EJB集成概述 在JavaEE5(即Java Platform, Enterprise Edition 5)中,Web层与EJB(Enterprise JavaBeans)的集成是构建企业级应用的...

    JavaEE5学习笔记01-JTA和数据库事务

    ### JavaEE5学习笔记01-JTA和数据库事务:深入解析与应用 #### 一、JavaEE5概览与核心组件 JavaEE5是Java Enterprise Edition的第五个版本,标志着企业级Java应用的一个重要里程碑。它引入了一系列重要的新特性,...

    javaee.jar,jsf-api.jar,jsf-impl.jar,jstl-1.2.jar

    API JAR文件包含JSF的公共接口和类,允许开发者在应用程序中引用和使用JSF的功能,如创建可重用的UI组件、处理用户事件、数据绑定等。 3. **jsf-impl.jar**:与jsf-api.jar相对应,这个文件包含了JSF的实现代码。在...

    JavaEE5学习笔记04-JavaMail使用总结---3

    这篇学习笔记主要聚焦于JavaMail在JavaEE5中的使用,通过深入理解其核心概念和实践操作,我们可以更好地在实际项目中应用这一工具。 JavaMail API提供了一套标准的接口,允许Java应用程序发送和接收电子邮件。它...

    javaee-api-8.0-javadoc.jar

    javaee-api-8.0-javadoc.jar,这是javaee1.8api的jar包,解压后可用javadoc2chm制作成chm帮助文档。

    JavaEE源代码 struts2-core-2.0.11

    JavaEE源代码 struts2-core-2.0.11JavaEE源代码 struts2-core-2.0.11JavaEE源代码 struts2-core-2.0.11JavaEE源代码 struts2-core-2.0.11JavaEE源代码 struts2-core-2.0.11JavaEE源代码 struts2-core-2.0.11JavaEE源...

    JavaEE源代码 struts2-spring-plugin-2.0.11

    JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-2.0.11JavaEE源代码 struts2-spring-plugin-...

    JavaEE源代码 jsf-api

    JavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-apiJavaEE源代码 jsf-...

    javaee-api-6.0-5

    java javaee-api-6.0-5

    JavaEE源代码 jsf-impl

    JavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源代码 jsf-implJavaEE源...

    JavaEE源代码 jaxen-1.1-beta-7

    JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-beta-7JavaEE源代码 jaxen-1.1-...

    JavaEE源代码 commons-logging-1.0.4

    JavaEE源代码 commons-logging-1.0.4JavaEE源代码 commons-logging-1.0.4JavaEE源代码 commons-logging-1.0.4JavaEE源代码 commons-logging-1.0.4JavaEE源代码 commons-logging-1.0.4JavaEE源代码 commons-logging-...

    javaEE健康管理系统SSH-oracle(源码+数据库sql+lun文+视频齐全).zip

    javaEE健康管理系统SSH-oracle(源码+数据库sql+lun文+视频齐全)javaEE健康管理系统SSH-oracle(源码+数据库sql+lun文+视频齐全)javaEE健康管理系统SSH-oracle(源码+数据库sql+lun文+视频齐全)javaEE健康管理系统SSH-...

    JavaEE源代码 commons-collections-2.1.1

    JavaEE源代码 commons-collections-2.1.1JavaEE源代码 commons-collections-2.1.1JavaEE源代码 commons-collections-2.1.1JavaEE源代码 commons-collections-2.1.1JavaEE源代码 commons-collections-2.1.1JavaEE源...

Global site tag (gtag.js) - Google Analytics