论坛首页 → Web前端技术论坛 →

FTL 使用自定义模板的方法

浏览 3565 次
锁定老帖子 主题：FTL 使用自定义模板的方法
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • bo_hai
  • 等级: 一星会员
  • 性别:
  • 文章: 22
  • 积分: 100
  • 来自: 武汉
   发表时间：2012-11-24  

前言：

1）在实际的工程中，可能存在FTL要引入相同的js或css的代码，每个页面手动copy引入js或css的代码很是麻烦。现在为大家介绍在FTl中定义模板的方法。所谓模板是指：可以指定所有的FTL页面自动加载某些代码工具。

2）在引入模板前，先要引入模板用到jar。jar的名称分别是:sitemesh-2.2.1.jar 和 struts2-sitemesh-plugin-2.0.11.2.jar。在实际的项目中，可以根据struts2的版本，现在对应jar的版本。

3）修改web.xml文件，加入以下内容：

<filter>
	<filter-name>sitemesh</filter-name>
	<filter-class>org.apache.struts2.sitemesh.FreeMarkerPageFilter</filter-class>
</filter>
<filter-mapping>
	<filter-name>sitemesh</filter-name>
	<url-pattern>*.action</url-pattern>
	<dispatcher>REQUEST</dispatcher>
	<dispatcher>FORWARD</dispatcher>
</filter-mapping>

 注：filter-mapping的配置应和struts2对应的filter-mapping的配置相同；

 

4）在 WEB-INF目录下面创建文件：sitemesh.xml。内容如下：

<sitemesh>
	<property name="decorators-file" value="/WEB-INF/decorators.xml" />
	<excludes file="${decorators-file}" />

	<page-parsers>
		<parser content-type="text/html"
			class="com.opensymphony.module.sitemesh.parser.FastPageParser" />
	</page-parsers>

	<decorator-mappers>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.PageDecoratorMapper">
			<param name="property.1" value="meta.decorator" />
			<param name="property.2" value="decorator" />
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.FrameSetDecoratorMapper">
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.AgentDecoratorMapper">
			<param name="match.MSIE" value="ie" />
			<param name="match.Mozilla [" value="ns" />
			<param name="match.Opera" value="opera" />
			<param name="match.Lynx" value="lynx" />
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.PrintableDecoratorMapper">
			<param name="decorator" value="printable" />
			<param name="parameter.name" value="printable" />
			<param name="parameter.value" value="true" />
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.RobotDecoratorMapper">
			<param name="decorator" value="robot" />
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.ParameterDecoratorMapper">
			<param name="decorator.parameter" value="decorator" />
			<param name="parameter.name" value="confirm" />
			<param name="parameter.value" value="true" />
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.FileDecoratorMapper">
		</mapper>

		<mapper
			class="org.apache.struts2.sitemesh.NoneDecoratorMapper">
		</mapper>

		<mapper
			class="com.opensymphony.module.sitemesh.mapper.ConfigDecoratorMapper">
			<param name="config" value="${decorators-file}" />
		</mapper>

	</decorator-mappers>

</sitemesh>

 

 

5）在 WEB-INF目录下面创建文件：decorators.xml。内容如下：

 

<?xml version="1.0" encoding="utf-8"?>

<decorators defaultdir="/WEB-INF/decorators">
	<!-- Any urls that are excluded will never be decorated by Sitemesh -->
	<excludes>
		<pattern>/js/*</pattern>
		<pattern>/css/*</pattern>
		<pattern>/images/*</pattern>
	</excludes>

	<decorator name="main" page="/module/common/decorator/main.dec">
		<pattern>/*</pattern>
	</decorator>
</decorators>

 

注：page="/module/common/decorator/main.dec" 这个的值。其意是：在WEB-INF目录有 "/module/common/decorator 目录，并在其目录下有main.dec的文件。

6）main.dec 文件的内容是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>FTL模板示例 - ${title}</title>
		<style type="text/css">
		<!--
		body {
			margin-left: 5px;
			margin-right: 5px;
		}
		-->
		</style>
		<script type="text/javascript" src="${base}/js/lib/jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="${base}/js/lib/jquery/jquery.validate.js"></script>
		<script type="text/javascript" src="${base}/js/lib/jquery/jquery.form.js"></script>
	    
	    ${head}
	</head>

	<body>
	<link rel="shortcut icon" href="http://localhost/qq.ico"/>
			${body}
	</body>
</html>

 

注：main.dec 是模板定义文件，模板中定义要自动加载的js和css代码。在这里，我定义人的每个ftl页面自动加载jquery的js文件。文件中还有三个自定义参数。这是将目标页面的对应内容加载到模板中显示。

7）自定义一个view.ftl页面，内容如下：

 

<html>
	<head>
		<title>自动跳转到ftl页面</title>
	</head>
	<body>
	这是ftl页面呀~~
	</body>
</html>

 

 

8）能通action跳转到view.ftl页面，解析后的html如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>FTL模板示例 - 自动跳转到ftl页面</title>
		<style type="text/css">
		<!--
		body {
			margin-left: 5px;
			margin-right: 5px;
		}
		-->
		</style>
		<script type="text/javascript" src="/js/lib/jquery/jquery-1.4.2.js"></script>
		<script type="text/javascript" src="/js/lib/jquery/jquery.validate.js"></script>
		<script type="text/javascript" src="/js/lib/jquery/jquery.form.js"></script>
	    
	    
	</head>
 
	<body>
	<link rel="shortcut icon" href="http://localhost/qq.ico"/>
			这是ftl页面呀~~
	</body>
</html>

 

 

9）目标页面在加载解析时，自动加载了模板中定义的js文件。止此配置成功。
返回顶楼
         
论坛首页 → Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics