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-mappingの構成はstruts 2に対応するfilter-mappingの構成と同じであるべきである.
4)WEB-INFディレクトリの下にファイルを作成する:sitemesh.xml.内容は次のとおりです.
5)WEB-INFディレクトリの下にファイルを作成する:decorators.xml.内容は次のとおりです.
注意:page=「/module/common/decorator/main.dec」という値.WEB-INFディレクトリには「/module/common/decoratorディレクトリがあり、そのディレクトリの下にmain.decのファイルがある.
6)main.decファイルの内容は次のとおりです.
注意:main.decはテンプレート定義ファイルで、自動的にロードするjsコードとcssコードを定義します.ここでは、人のftlページごとにjqueryのjsファイルを自動的にロードすることを定義します.ファイルには3つのカスタムパラメータがあります.これは、ターゲットページの対応する内容をテンプレートにロードして表示します.
7)viewをカスタマイズする.ftlページ、内容は以下の通りです.
8)actionでviewにジャンプできる.ftlページ、解析後のhtmlは以下の通りです.
9)ターゲットページは解析のロード時にテンプレートで定義されたjsファイルを自動的にロードする.この構成は正常に終了しました.
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ファイルを自動的にロードする.この構成は正常に終了しました.