FTLカスタムテンプレートの使用方法

7475 ワード

前言:
1)実際のエンジニアリングでは,FTLが同じjsまたはcssのコードを導入する場合があり,各ページに手動copyでjsまたはcssのコードを導入するのは面倒である.ここでは、FTlでテンプレートを定義する方法を紹介します.テンプレートとは、すべてのFTLページに特定のコードツールを自動的にロードするように指定できます.
2)テンプレートを導入する前にjarにテンプレートを導入する.JArの名前はsitemesh-2.2.1です.JArとstruts 2-sitemesh-plugin-2.0.11.2.jar.実際のプロジェクトではstruts 2のバージョンに基づいて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の構成はstruts 2に対応する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ファイルを自動的にロードすることを定義します.ファイルには3つのカスタムパラメータがあります.これは、ターゲットページの対応する内容をテンプレートにロードして表示します.
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ファイルを自動的にロードする.この構成は正常に終了しました.

Bootstrapの認識-20140513

cssにおけるフォントサイズの異なるブラウザでの互換性の問題